Remix

Make your own version of DriveX Rental Platform

Edit the prompt below and generate a customized version in seconds.

Original by Savan Kakadia

Describe your app

Build a COMPLETE FULL-STACK React website called DriveX - Car & Bike Rental Website for my MCA Minor Project.

Use React + Vite + TypeScript + Tailwind CSS for frontend and Node.js + Express + PostgreSQL/Supabase for backend/database.

I need REAL working source code exportable as ZIP and runnable in VS Code. Do NOT create only a static frontend.

Required features:

1. Professional responsive public website:
Home, Cars, Bikes, All Vehicles, Vehicle Details, About, Contact, FAQ, Login, Signup, Forgot Password.

2. Authentication:
Proper signup/login/logout, password validation, protected routes and two roles: USER and ADMIN.

3. User Panel:
Dashboard, Profile, My Bookings, Booking Details, Favorites, Notifications.

4. Admin Panel:
Dashboard, Users, Vehicles, Cars, Bikes, Bookings, Notifications, Reports.

5. Admin vehicle CRUD:
Add/Edit/Delete Cars and Bikes, update rent, availability, images and all vehicle details.

6. Vehicle fields:
Name, Brand, Model, Type, Category, Registration Number, Description, Rent Per 24 Hours, Security Deposit, Location, Fuel, Transmission, Seats, Features, Image, Status.

7. Booking:
User selects pickup date/time and return date/time and enters customer details. Booking initially becomes PENDING and goes to Admin.

8. CRITICAL RENTAL LOGIC:
Rent is calculated in 24-hour blocks:
rentalBlocks = Math.ceil(totalHours / 24)
baseRent = rentalBlocks * rentPer24Hours

Example:
24h = 1 rent
25h = 2 rent
48h = 2 rent
49h = 3 rent
72h = 3 rent

Show total hours, rental blocks, rent, security deposit, taxes, discount and final total.

9. Admin approval:
Admin can Confirm/Reject/Cancel/Complete bookings.
Only after Admin confirms does booking become CONFIRMED and vehicle becomes BOOKED.

10. Notifications:
Admin gets notification for new booking.
User gets notifications for confirmed/rejected/cancelled/completed booking.
Use persistent database notifications with unread count.

11. Prevent double booking:
Backend must prevent overlapping confirmed bookings for the same vehicle.

12. Database tables:
users/profiles, vehicles, bookings, notifications, payments, reviews, favorites.

13. Payment:
Demo payment only with UPI/Card/Cash on Pickup.

14. Reviews:
After completed rental user can rate 1-5 and comment.

15. Favorites:
User can add/remove vehicles.

16. Search/filter:
Search name/brand/model/location.
Filter type, brand, category, price, location, fuel, transmission, availability.

17. Reports:
Admin dashboard with users, vehicles, bookings, revenue, monthly booking chart, revenue chart and car-vs-bike chart.

18. Demo data:
10 Cars + 10 Bikes with realistic Indian INR rental prices.

19. Security:
Role-based authorization, protected routes, backend validation, environment variables and no hardcoded secrets.

20. Responsive:
Desktop, laptop, tablet and mobile.

Use professional commercial rental website design, modern vehicle cards, navbar, hero, filters, booking UI, dashboard, sidebar, tables, charts, toast messages, loading/error/empty states.

Website branding:
DriveX
"Your Ride. Your Journey."

Create complete modular source code, backend APIs, database schema, seed data, .env.example and README.

DO NOT make a frontend-only prototype.
DO NOT use localStorage as the primary database.
Make all core functionality actually work.

START BUILDING THE COMPLETE DRIVEX WEBSITE NOW.

Free to use. No credit card required.