A modern business asset reservation system inspired by the seamless booking flow of Traveloka.
Supports Down Payment / Full Payment, real-time admin verification, and QR-Based EβTicketing.
-
TravelokaβStyle Booking Flow
Choose Date β Fill Details β Make Payment -
Smart Calendar
- Blocks Pending & Confirmed dates
- Supports Daily & Hourly rentals
-
Flexible Payment
- Full Payment / 50% Down Payment
- Prevents double payments
-
User Dashboard
- Realβtime status updates
- Upload payment proof
- Booking history
-
Wishlist to save preferred services
-
Form Persistence using localStorage
-
EβTicket (PDF) + QR Code activated upon payment completion
- Management Dashboard
- Verify Payments (Approve / Reject)
- CRUD Services + Multiple Image Upload
- Dynamic Spec (JSONB)
- AutoβGenerated Slug URL
- Builtβin QR Scanner (Camera Support)
| Category | Technology |
|---|---|
| Framework | Next.js 15 (App Router) |
| Language | TypeScript |
| Database & Auth | Supabase (PostgreSQL) |
| UI | TailwindCSS + Shadcn/ui |
| Forms | React Hook Form + Zod |
| Date Utilities | Date-fns + React-day-picker |
| PDF Renderer | @react-pdf/renderer |
| QR Scanner | @yudiel/react-qr-scanner |
| Notifications | Sonner Toast |
git clone https://github.com/username/project.git
cd projectnpm installCreate a .env.local file:
NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here
Ensure the following tables exist:
- profiles
- categories
- services
- bookings
- payments
- saved_services
Include required triggers & payment status functions.
npm run devOpen in browser:
π http://localhost:3000
app/
βββ (main)/
β βββ services/
β βββ book/
β βββ dashboard/
βββ (admin)/
β βββ bookings/
β βββ services/
β βββ scan/
βββ (checkout)/
β βββ payment/
βββ layout.tsx
|
|
|
|
|
|
git checkout -b new-featuregit commit -m "Add new feature"git push origin new-featureThis project is released under the MIT License.
See the LICENSE file for more details.
β If you like this project, consider giving it a Star! β