grand-travel
Javid FarooqBuild a modern, premium SaaS web application named “Travel Itinerary by Bilu G” for travel agencies to create, customize, and export professional travel itineraries. The application must feature a luxury UI/UX using glassmorphism, gradient backgrounds, soft shadows, smooth animations, and a fully responsive design across mobile, tablet, and desktop. Use a clean dashboard layout with sidebar navigation, rounded corners (2xl), proper spacing, and consistent typography with Google Fonts. Include light/dark mode, custom color themes, and font customization. Implement a secure authentication system with Signup (Name, Email, Password, Mobile Number) and Login. After signup, redirect users to a manual payment page showing ₹2999 lifetime access, with payment options (GPay, PhonePe, Paytm) to 6006070550, and an upload payment screenshot feature. Access must be restricted until admin approval (approve/reject system). After approval, users must complete a Company Profile setup including: Company Name Logo Upload Contact Number Email Address Social Media Links (Instagram, Facebook) Add a Company Account Details section (for receiving client payments), including: Account Holder Name Bank Name Account Number IFSC Code Branch Name UPI ID QR Code Upload (for payments) --- 🧠 CORE FEATURE: ADVANCED ITINERARY BUILDER (ENHANCED) Client & Tour Details: Client Name Destination Contact Number Email Tour Duration (e.g., 5 Nights / 6 Days) Number of Adults Number of Children Child Age(s) Total Package Cost Per Person Cost (auto/manual calculation option) --- 📅 Day-wise Itinerary Builder (Advanced Layout) For each day: Day Title (Day 1, Day 2…) Rich text description Upload up to 4 images per day (grid layout preview) Hotel Details: Hotel Name (custom input) Category (2★ / 3★ / 4★ / 5★) Transportation: Sedan, Ertiga, Innova, Crysta, Tempo Traveller, Bus Meal Plan: Breakfast / Lunch / Dinner (multi-select) --- 📦 PACKAGE DETAILS (PROFESSIONAL LAYOUT) Inclusions Structured bullet list with proper alignment (icon-based optional) Exclusions Structured bullet list in separate column layout --- 📜 TERMS & THANK YOU Terms & Conditions (editable template) Thank You Note (custom message) --- 📄 PREMIUM PDF GENERATION SYSTEM (ADVANCED) One-click Preview and Download Itinerary PDF Generate high-quality A4, print-ready PDF PDF Structure: 1. Cover Page Company Logo Client Name Destination Travel Dates Tour Duration Hero background image 2. Tour Summary Section Number of Adults / Children (with ages) Total Cost Per Person Cost 3. Day-wise Pages Title + Description 4-image grid layout per day Hotel + Transport + Meals 4. Package Details Page Inclusions (left column) Exclusions (right column) 5. Terms & Conditions Page 6. Final Page Company Contact Details Social Media Links Thank You Note Company Bank Account Details + UPI + QR Code for payment --- 🛠️ ADMIN PANEL View all users Verify payment screenshots (approve/reject) Activate/deactivate users View all itineraries Dashboard analytics: Total users Total revenue --- 🚀 ADVANCED FEATURES Save, edit, duplicate itineraries Real-time preview Auto-save drafts Multi-color templates Smooth transitions and hover effects Optional drag-and-drop itinerary builder --- ⚙️ TECH STACK Frontend: React.js / Next.js with Tailwind CSS Backend: Node.js / Firebase Database: MongoDB / Firestore Storage: Cloudinary / Firebase Storage Authentication: JWT / Firebase Auth
Comments (0)
Sign in to leave a comment
Project Tasks21
Implement Theme and Structure
As a Frontend Developer, I want to implement the global theme, color palette, typography, and layout structure across all existing scaffold pages so they match the mock-design pages exactly. This includes applying the color palette (#F3F8FB background, #E6EDF2 surface, #2A2A2A text, #FF8C42 accent, #B0B0B0 muted), glassmorphism effects, gradient backgrounds, soft shadows, smooth animations, and responsive layouts. Also remove any pages not present in the design pages list. This task is independent of all others and must be completed first.
Build Landing Page
As a Frontend Developer, I want to implement the Landing page based on the existing JSX design (Landing v6) so that users can view app info and navigate to Login or Signup. The page should feature the living watercolor background with time-based color transitions, floating watercolor blobs with quick actions, ripple effects, and micro-interactions as described in the SRD. Links to: Login, Signup.
Build Login Page
As a Frontend Developer, I want to implement the Login page based on the existing JSX design (Login v9) so that users and admins can sign in securely. The page should include email and password fields, JWT-based authentication integration, and navigation to the appropriate dashboard post-login. Links from: Landing. Links to: AdminDashboard (admin), Dashboard (user).
Build Signup Page
As a Frontend Developer, I want to implement the Signup page based on the existing JSX design (Signup v4) so that new users can create an account with Name, Email, Password, and Mobile Number. After signup, users are redirected to the Payment page. Links from: Landing. Links to: Payment.
Build Admin Dashboard Page
As a Frontend Developer, I want to implement the AdminDashboard page based on the existing JSX design (AdminDashboard v1) so that admins can view analytics (Total Users, Total Revenue), navigate to User Management, view all itineraries, and monitor revenue. Links from: Login (admin). Links to: UserManagement, Itineraries.
Build Payment Page
As a Frontend Developer, I want to implement the Payment page based on the existing JSX design (Payment v3) so that users can view the ₹2999 lifetime access fee, see GPay/PhonePe/Paytm options for payment to 6006070550, and upload a payment screenshot for admin verification. After upload, the user awaits admin approval. Links from: Signup. Links to: CompanyProfile (after approval).
Build User Management Page
As a Frontend Developer, I want to implement the UserManagement page based on the existing JSX design (UserManagement v1) so that admins can view all users, approve or reject payment screenshots, and activate or deactivate user accounts. Links from: AdminDashboard. Links to: AdminDashboard.
Build Company Profile Page
As a Frontend Developer, I want to implement the CompanyProfile page based on the existing JSX design (CompanyProfile v2) so that users can set up their company profile (Company Name, Logo, Contact, Email, Address, Social Media Links) and add bank/UPI details (Account Holder Name, Bank Name, Account Number, IFSC Code, Branch, UPI ID, QR Code). Links from: Payment approval. Links to: Dashboard.
Implement Auth and Payment API
As a Backend Developer, I want to implement the Authentication and Payment APIs using FastAPI so that users can sign up, log in with JWT, upload payment screenshots, and admins can approve or reject payments. Endpoints: POST /auth/signup, POST /auth/login, POST /payment/upload, PATCH /payment/{id}/approve, PATCH /payment/{id}/reject.
Build Dashboard Page
As a Frontend Developer, I want to implement the Dashboard page based on the existing JSX design (Dashboard v8) so that users can view their itineraries list, duplicate itineraries, and navigate to the Templates page or ItineraryBuilder. The dashboard should support auto-saved drafts visibility. Links from: CompanyProfile. Links to: ItineraryBuilder, Templates, Itineraries.
Implement Company Profile API
As a Backend Developer, I want to implement the Company Profile APIs using FastAPI so that users can create and update their company profile and bank/UPI details. Endpoints: POST /company/profile, PUT /company/profile, POST /company/bank-details, PUT /company/bank-details.
Implement Admin Panel API
As a Backend Developer, I want to implement the Admin Panel APIs using FastAPI so that admins can view all users and itineraries, monitor analytics (Total Users, Total Revenue), manage user accounts (activate, deactivate, delete), and view/verify payment screenshots. Endpoints: GET /admin/users, GET /admin/itineraries, GET /admin/analytics, PATCH /admin/users/{id}/activate, PATCH /admin/users/{id}/deactivate, DELETE /admin/users/{id}.
Build Itineraries Page
As a Frontend Developer, I want to implement the Itineraries page based on the existing JSX design (Itineraries v7) so that users can view all their itineraries, search/filter them, and access individual itinerary details. Links from: Dashboard. Links to: ItineraryBuilder.
Build Templates Page
As a Frontend Developer, I want to implement the Templates page based on the existing JSX design (Templates v6) so that users can browse and select multi-color themes for their itineraries. Links from: Dashboard. Links to: ItineraryBuilder (with selected theme applied).
Build Itinerary Builder Page
As a Frontend Developer, I want to implement the ItineraryBuilder page based on the existing JSX design (ItineraryBuilder v3) so that users can add client and tour details (Client Name, Destination, Contact, Email, Tour Duration, Adults, Children, Child Ages, Package Cost, Per Person Cost), create day-wise itineraries (Day Title, Rich Text, up to 4 images), add hotel details (Hotel Name, Category stars), select transportation (Sedan, Ertiga, Innova, Crysta, Tempo Traveller, Bus), and select meal plans (Breakfast/Lunch/Dinner). Supports real-time preview and auto-save drafts. Links from: Dashboard/Itineraries. Links to: PackageDetails, PDFExport.
Build Package Details Page
As a Frontend Developer, I want to implement the PackageDetails page based on the existing JSX design (PackageDetails v2) so that users can add inclusions and exclusions as structured bullet lists for their itinerary package. Links from: ItineraryBuilder. Links to: ItineraryBuilder (preview).
Implement Itinerary Builder API
As a Backend Developer, I want to implement the Itinerary Builder APIs using FastAPI so that users can create, save, edit, duplicate, and auto-save itineraries with client details, day-wise content, hotel, transport, and meal data. Endpoints: POST /itineraries, GET /itineraries, GET /itineraries/{id}, PUT /itineraries/{id}, POST /itineraries/{id}/duplicate, PATCH /itineraries/{id}/autosave.
Build PDF Export Page
As a Frontend Developer, I want to implement the PDFExport page based on the existing JSX design (PDFExport v7) so that users can preview and download high-quality A4 print-ready PDFs. The page should allow customization of PDF structure including Cover Page, Tour Summary, Day-wise Pages, Package Details Page, Terms & Conditions Page, and Final Page. Links from: ItineraryBuilder preview. Links to: Dashboard.
Implement Package Details API
As a Backend Developer, I want to implement the Package Details APIs using FastAPI so that users can add, update, and retrieve inclusions and exclusions for an itinerary. Endpoints: POST /itineraries/{id}/package, PUT /itineraries/{id}/package, GET /itineraries/{id}/package.
Implement PDF Generation API
As a Backend Developer, I want to implement the PDF Generation API using FastAPI so that users can generate and download high-quality A4 print-ready PDFs with customizable structure (Cover Page, Tour Summary, Day-wise Pages, Package Details, Terms & Conditions, Final Page). Endpoints: POST /itineraries/{id}/pdf, GET /itineraries/{id}/pdf.
Integrate Frontend with Backend APIs
As a Frontend Developer, I want to integrate all frontend pages with their corresponding backend APIs so that the app functions end-to-end. This includes wiring up auth flows, company profile, itinerary builder, package details, PDF export, templates, and admin panel pages with their respective API endpoints.
No comments yet. Be the first!