Jakarta Scooter Shop
Jakarta Scooter Shop sells Vespa parts through a desktop and mobile storefront. The project connects that storefront to the stock, shipping, and payment systems named in its scope.
Visit the live site
- Client
- Jakarta Scooter Shop (JSS Vespa)
- Scope
- E-Commerce & Digital Flagship
- Year
- 2025
- Project
- Live site
A customer arrives with one part in mind
The catalog holds parts whose names and uses differ from each other, so search, categories, photos, and product names do most of the work once someone is chasing one specific component.
The catalog also has to line up with the work behind the counter. The project scope names Accurate Online for stock data, Biteship for shipping, and Midtrans for payment.
The parts catalog up front, the shop's daily work in the same checkout
The desktop storefront on a MacBook Air: orange bar with contact details and account links, search field, classic Vespa banner, and spare parts catalog.
A storefront wired to the shop's systems
Search and products sit beside the shop's identity at the top of the page. The transaction side is built around the stock, shipping, and payment services the project called for.
Search lives in the page header
The desktop layout puts the search field next to the logo, with Product, Contact, and Order links within reach. From the home page a customer has a direct route into the catalog.
Products keep their room on a phone
On mobile the page runs in one vertical order: banner, the Lihat Produk button, a row of brands, then product cards. Orange marks the buttons and navigation against the white background.
Stock and payment join the same flow
Accurate Online holds inventory, Biteship covers shipping options, and Midtrans takes payment. The shop's daily operations sit inside the shopping flow rather than beside it.
- 01
Enter the catalog
Start from search, the Product navigation, or the Lihat Produk button in the banner. The home page also shows a row of brands and a set of product cards.
- 02
Pick a part and fill the cart
Move through the product cards, check the name and the details, then add the part to the cart with the shopping action on the card.
- 03
Set the delivery
In the checkout flow recorded for the project, the customer enters an address and picks a courier service, with shipping cost calculated through Biteship.
- 04
Pay
Checkout hands off to payment through Midtrans, and the Order navigation leads to the order section of the storefront.
The phone layout on an iPhone: compact navigation, Vespa banner, brand shortcuts, and bestselling parts cards within reach.
What it can do now.
A catalog on desktop and phone
The screenshots show the shop identity, product banners, and shopping navigation laid out for two screen sizes.
Stock inside the project scope
Inventory in Accurate Online is part of the backend integration, so the catalog is not managed apart from the shop's operations.
Shipping and payment connected
Biteship and Midtrans are recorded as the services used for shipping cost and payment in the shopping flow.
The points above describe the implemented scope, not measured sales, conversion, or hours saved. We reviewed the interface from the screenshots; the integrations follow the project notes and were not verified through transactions, ERP access, or tests against the third-party services.
Jakarta Scooter Shop now has a storefront that treats parts as the main content. From finding an item to paying for it, the customer's path and the shop's operations are part of one design.
Behind the build.
Scope of work
- Responsive storefront for desktop and phone
- Search and grouping across the parts catalog
- Cart and checkout flow
- Stock integration with Accurate Online, per the project notes
- Shipping integration with Biteship, per the project notes
- Payment integration with Midtrans, per the project notes
Technology
- Next.js 15
- NestJS 11
- PostgreSQL
- Accurate ERP
- Midtrans
- Biteship
Next.js 15 runs the storefront, while NestJS 11 and PostgreSQL carry the backend and data storage according to the project notes. That split gives the catalog and transaction logic their own place, with Accurate Online, Biteship, and Midtrans handling stock, shipping, and payment.
Project teamFarid (Architecture, Backend & ERP Sync), Surya (Backend & ERP Sync), Sutan (UI/UX & Storefront)
jakartascootershop.comTell us about it. We start from the need.
MAU'S KITCHEN
MAU'S Kitchen is a home kitchen in Depok selling sate taichan, drinks, and ChocoBerry desserts. The site holds the menu, the cart, and the ordering information in one place.
HMTI UBSI Margonda
HMTI UBSI Margonda is the Information Technology student association at Universitas Bina Sarana Informatika's Margonda campus, founded on 2 February 2020. This is their official website: identity, structure, work programs, and publications in one structured home.