Remix

Make your own version of Worth It Inspection

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

Original by zoha

Describe your app

Yeh raha bilkul simplified, **2-page website** ka complete prompt. Is mein website ko compact rakh kar sirf 2 main pages (1. Main Homepage/Booking Page, 2. Dashboard/Admin Page) par build karne ki direct instruction di gayi hai.

Is ko direct copy karke GenMB mein paste kar dein:

---

Copy-paste this into GenMB:

Build a simplified, professional 2-page USA Mobile Car Inspection Booking Platform called **Worth It Inspection**.
This must be a functional full-stack web application with a frontend, backend, database, authentication, booking system, Safepay integration structure, and admin panel—all arranged across strictly 2 main pages.

### 1. PAGE ARCHITECTURE (STRICT 2-PAGE STRUCTURE)

**PAGE 1: MAIN PUBLIC WEBSITE & BOOKING (`/`)**
A single, high-converting homepage that includes all core public sections and the booking system:

* **Sticky Header:** Logo, Navigation Links (How It Works, Services, FAQ, Contact), and "Book Inspection" CTA button.
* **Hero Section:** Headline: *"Buy With Confidence. Inspect Before You Buy."* Subheadline: *"Professional mobile vehicle inspections across the USA."* Includes a quick VIN/ZIP check form.
* **Trust & How It Works Sections:** 4 simple steps explaining mobile vehicle inspection.
* **Inspection Services Section:** Cards for Pre-Purchase Inspection, Used Car Inspection, Mobile Inspection, and Dealer Inspection. Prices are loaded dynamically from the database.
* **Multi-Step Booking Form:**
* *Step 1:* Vehicle Details (VIN, Year, Make, Model, Mileage)
* *Step 2:* Location & Seller Info (Address, ZIP, Seller Phone)
* *Step 3:* Customer Details (Name, Email, Phone)
* *Step 4:* Service Selection & Date/Time
* *Step 5:* Order Summary & "Pay Securely with Safepay" Button

* **FAQ, Contact Form, & Footer:** Complete with basic USA local SEO elements.

**PAGE 2: PORTAL & DASHBOARD (`/dashboard`)**
A unified dashboard page with tabbed role-based access:

* **Customer View:** View active bookings, payment status (Pending, Paid), scheduled time, and secure PDF report downloads.
* **Admin View:** Overview stats (Total Revenue, Orders, Scheduled Inspections), Order Management (change status, assign inspectors, upload PDF reports), Service & Pricing Management, and Contact Messages.
* **Inspector View:** View assigned inspection jobs, inspection address, and upload final inspection reports.

---

### 2. BUSINESS & SECURITY REQUIREMENTS

* **Business Name:** Worth It Inspection
* **Target Audience:** USA used car buyers (private sales, dealerships, auctions). Do NOT claim affiliation with Carfax, AutoCheck, or KBB.
* **Design Style:** Modern, clean, professional automotive theme using Dark Navy, Black, White, and Subtle Gold/Amber accents. Mobile-first and fully responsive.
* **Safepay Payment Security:**
* Do NOT hardcode API credentials in the prompt or frontend.
* Use backend environment variables: `SAFEPAY_API_KEY`, `SAFEPAY_SECRET_KEY`, `SAFEPAY_ENVIRONMENT`, `SAFEPAY_WEBHOOK_SECRET`.
* Create payment sessions server-side and verify transactions via webhooks before marking orders as `Paid`.

* **Report Access Control:** Uploaded inspection reports must be protected so customers can only access their own files.

---

### 3. DATABASE & TECH STACK

* **Database Tables:** `users`, `customers`, `inspectors`, `vehicles`, `services`, `bookings`, `payments`, `inspection_reports`, `contact_messages`.
* **Backend:** Express/Node API handling authentication, booking logic, dynamic pricing, and secure file downloads.
* **Frontend:** React component framework rendering the 2 main routes (`/` and `/dashboard`).

Free to use. No credit card required.