Rent a motorcycle — anywhere, anytime.
A motorcycle rental platform built end to end: browse the catalogue, book with your ID card, pay by scanning a QR from your phone, and ride.
Motoran is a web-based motorcycle rental service. A customer browses a catalogue of motorcycles with live availability, picks a rental date range, uploads a photo of their ID card, and confirms the booking. The app then renders a payment summary with a QR code — scan it with a phone and the payment page opens there, already authenticated, so the customer can pay on the device in their hand and get a confirmation telling them exactly which day to come pick the motorcycle up.
On the other side, an admin manages the whole fleet and the whole lifecycle: add, edit and remove motorcycles from the catalogue, and track every rental through its paid → taken → returned stages, with search, status filters and a last-7-days view over the order table.
Motoran is the term project for Information Systems and Technology Services (II3120) at the School of Electrical Engineering and Informatics (STEI), Institut Teknologi Bandung, developed by five Information Systems and Technology (STI) '22 students. It is a complete service — not a mock-up — deployed and running against a real database and real object storage.
- Live availability — the catalogue reflects real stock, and booking decrements it.
- Role-aware auth — JWT sessions with an
isAdminclaim gating every admin route and endpoint. - Direct-to-R2 uploads — the API issues a presigned URL and the browser uploads straight to Cloudflare R2, so no file ever passes through the API or touches its disk.
- Private ID cards — inventory photos are public, but ID cards are stored as raw object keys and resolved through short-lived (300 s) presigned download URLs on the way out.
- QR payment hand-off — the QR carries its own scoped token, so the payment page works on a phone that has never signed in.
- Admin controls — full stock CRUD, order search, status filters, and a last-7-days toggle.
Catalogue with live availability |
Admin — stock management |
Admin — add or edit a motorcycle |
Booking form with ID card upload |
Payment summary with QR code |
QR scanned — paying from the phone |
Payment success with pickup reminder |
Admin — manage orders and filters |
 Jihan Aurelia 18222001 Frontend Developer GitHub · LinkedIn |
 Serenada Cinta Sunindyo 18222011 UI/UX Designer GitHub · LinkedIn |
 Aththariq Lisan Quran D. S. 18222013 Frontend Developer GitHub · LinkedIn |
 Nasywaa Anggun Athiefah 18222021 Backend Developer GitHub · LinkedIn |
 Muhammad Faiz Atharrahman 18222063 Backend Developer GitHub · LinkedIn |
| Repository | What it is | Live |
|---|---|---|
| motoran-web | React 18 + Vite single-page app — catalogue, booking, payment and the admin console. | motoran.faizath.com |
| motoran-api | Express 4 + Mongoose REST API — auth, inventory, orders, payment and presigned uploads. | motoran-api.faizath.com |
| .github | This organization profile and its assets. | — |
| Layer | Stack |
|---|---|
| Frontend | React 18.3 · Vite 6 · React Router 7 · Tailwind CSS 3.4 · Ant Design 5.22 · axios · react-hook-form + yup · framer-motion · date-fns · sonner · react-qr-code |
| Backend | Node.js · Express 4.21 · Mongoose 8.9 · MongoDB driver 6.12 · jsonwebtoken · bcrypt · @aws-sdk/client-s3 + s3-request-presigner |
| Data & storage | MongoDB Atlas · Cloudflare R2 (S3-compatible object storage) |
| Deployment | Vercel (web) · CapRover + Docker (API) |
Important
Run both projects on Node.js 18–22. On Node 25, jsonwebtoken → jwa →
buffer-equal-constant-time references the removed SlowBuffer, and anything that loads the
auth path throws at require time.