Bike Rental Web App with Hourly Pricing and Live Availability

Renting a bike in an Indian city still runs on phone calls and a paper register, so two riders can arrive for the same bike. The Bike Rental Web App with Hourly Pricing and Live Availability replaces that guesswork with a live catalogue of five two-wheelers whose availability updates for the exact hours picked. A rider picks a bike, chooses pickup and return times, sees the price before paying, and collects it with a 4-digit OTP and a driving licence check, while the owner watches earnings, bikes out and utilisation on a dashboard. While building the demo, one real gotcha surfaced: datetime-local returns wall-clock local time with no zone, so storing a slot through UTC shifts every booking by 5 hours 30 minutes — the demo keeps slots as local wall-clock strings. The demo holds five bikes with three seed bookings for today, and its dashboard opens at ₹1,686 of rental earnings computed from the demo's own data.

A rider opens the app, sees the fleet for the chosen hours, and the booking is complete five steps later. First, the frontend reads the bookings table for the selected pickup and return times and marks each bike available or booked for that exact slot, so the catalogue never shows a bike that is already taken. The rider picks a bike and the calculator shows the bill — started hours times the hourly rate plus the refundable deposit — before any payment is taken. Confirming the booking re-checks the bike inside a database transaction and writes the booking with its payment record and a 4-digit OTP. At the hub the rider shows a driving licence and the OTP, the keys are handed over, and the ride begins. At return the system compares the actual return time with the booked end time, adds ₹50 per extra started hour if late, and refunds the deposit after inspection.

1. The rider opens the app and picks pickup and return date-and-times; the frontend requests availability for that exact slot from the REST API.
2. The backend queries the bookings table and returns the status of all 5 bikes, which the catalogue renders with green available badges and red booked badges showing the taken hours.
3. The rider clicks an available bike, and the booking panel fills in its rate, deposit and a live price breakdown for the chosen hours.
4. The rider enters a name and driving licence number and confirms; the system re-checks the bike's status at that exact moment and rejects the booking if it was just taken.
5. A confirmed booking is stored with a booking reference and a 4-digit OTP and appears in the My Bookings list and on the owner dashboard.
6. At the hub the rider shows a driving licence and the OTP, collects the keys, and at return the system settles the final bill — rental plus any late fee — and refunds the deposit after inspection.

Tech stack:

• React · Vite
• Node.js · Express
• MySQL
• JWT authentication · bcrypt
• Razorpay test-mode payments
• Chart.js owner dashboard
• HTML5 · CSS3 · JavaScript
• Git · GitHub

Requirements

• Software: Node.js, MySQL 8, React with Vite for the frontend, a modern browser, and MySQL Workbench for the database.
• For the demo: No server is needed — the single-file demo runs directly in the browser and holds its 5-bike dataset in the page.
• For deployment: A Node.js hosting account with a MySQL database; the operator configures the fleet, hourly rates, deposits and late-fee rules before launch.
• Optional: A Razorpay account if online payment is required; the demo runs payments in test mode instead.

The app is built around four capabilities a real rental operator needs every day. First, the live bike catalogue shows five two-wheelers — a Honda Activa 6G, Hero Splendor Plus, Royal Enfield Classic 350, Suzuki Access 125 and Bajaj Pulsar 150 — each with its hourly rate, refundable deposit, engine size and fuel-tank capacity, and an availability badge that updates the moment the pickup and return times change. Second, the hourly price calculator turns a chosen slot into an exact bill before payment: hours are rounded up to started hours, the rental is multiplied out, and the refundable deposit is shown separately so the rider knows what is a charge and what comes back. Third, the booking guard re-checks a bike at the exact moment of confirmation, so two riders can never hold the same bike for the same hours. Fourth, the owner dashboard converts bookings into decisions, showing today's earnings, bikes out, fleet utilisation and revenue by bike.

• [Live availability for the exact slot] The catalogue checks every bike against the bookings table for the chosen pickup and return times, so a bike shows as available only when no existing booking overlaps any part of the slot, and a booked bike shows the hours it is taken.
• [Hourly price calculator with per-started-hour billing] Choosing a slot fills in the bill immediately: started hours times the hourly rate, plus the refundable deposit shown as a separate line, so the total payable now is visible before any payment is taken.
• [Double-booking guard with race simulation] Confirming a booking re-checks the bike's live status at that exact moment and refuses the second attempt with a clear message, and the demo includes a "Simulate another rider" button so the guard can be watched working instead of only described.
• [OTP pickup with driving licence check] Every confirmed booking issues a booking reference and a 4-digit OTP; at the hub the rider shows a driving licence and the OTP, and only then are the keys handed over.
• [Return billing with late-return fee] Returning a bike compares the actual return time with the booked end time and adds ₹50 per extra started hour when late, and the deposit is refunded in full after the bike passes inspection.
• [Owner dashboard with earnings and utilisation] The operator sees today's rental earnings, bikes out now, fleet utilisation, active bookings, revenue by bike and a table of today's bookings with slots, riders and rental values.
• [My Bookings list] Every confirmed booking appears with its reference, bike, slot, rental and OTP, and the rider marks the bike returned from the same list, which settles the final bill.
• [Date and time picker with slot validation] Pickup and return use date-and-time pickers that refuse a return time at or before pickup, and changing the slot re-checks every bike's availability immediately.

• Complete source code (React frontend + Node.js/Express API)
• MySQL schema with seed data (5 bikes, rate card, deposits, sample riders and bookings)
• Working single-file demo of the catalogue, hourly price calculator, OTP pickup and owner dashboard
• Admin owner dashboard with earnings, utilisation and revenue by bike
• Project report PDF (background, problem statement, methodology, system design, testing and results)
• PPT presentation for final review
• Viva Q&A preparation document (REST APIs, JWT authentication, transactions, billing logic, OTP verification)