epic-download/memory/PRD.md

Epic Travel & Destinations - Product Requirements Document

Project Overview

A comprehensive travel website featuring destination galleries, weekly specials, and an admin dashboard for content management.

Created: December 2025

---

User Personas

1. Travel Enthusiast: Browsing destinations, looking for deals, seeking inspiration
2. Admin/Content Manager: Updating gallery, managing specials, maintaining fresh content

---

Core Requirements (Static)

Public Website

• Hero section with compelling CTA buttons
• Weekly specials showcase with discount badges
• Searchable and filterable destination gallery
• Customer testimonials section
• Contact form and newsletter signup
• Responsive design with ocean/sky theme (cyan, blue, teal)

Admin Dashboard

• Secure login authentication
• Destination management (Add/Edit/Delete)
• Photo gallery management with images, descriptions, locations
• Weekly specials management with discount percentages and expiry dates
• Real-time updates reflected on public site

---

What's Been Implemented (December 2025)

✅ Phase 1: Frontend with Mock Data

Date: December 2025

Public Pages:

• Home page with all sections:
  • Hero section with smooth animations
  • Weekly specials (3 featured destinations with discount badges)
  • Destination gallery (12 destinations: Paris, Bali, Tokyo, Santorini, Iceland, Dubai, Maldives, NYC, Machu Picchu, Swiss Alps, Venice, Kenya Safari)
  • Search and category filters (All, Beach, City, Adventure)
  • Testimonials from 4 travelers
  • Contact form with validation
  • Newsletter subscription
• Professional header with smooth navigation
• Footer with contact info and social links

Admin Pages:

• Admin login page with demo credentials
• Admin dashboard with two tabs:
  • Destinations Gallery: Add/Edit/Delete destinations with all details
  • Weekly Specials: Toggle destinations as specials with discount % and end date
• Protected routes with localStorage authentication

Design Features:

• Ocean & sky theme (cyan, blue, teal colors)
• Smooth hover animations on cards
• Professional spacing and typography
• Shadcn UI components used throughout
• Lucide React icons (no emoji icons)
• Responsive grid layouts
• Toast notifications for user actions

Mock Data:

• 12 diverse global destinations with ratings, prices, descriptions
• 3 weekly specials with highlights
• 4 customer testimonials
• All stored in /app/frontend/src/mockData.js

---

Technical Architecture

Frontend Stack

• React 19 with React Router
• Tailwind CSS for styling
• Shadcn UI component library
• Sonner for toast notifications
• Lucide React for icons

Backend Stack (To Be Implemented)

• FastAPI with Python
• MongoDB with Motor (async driver)
• JWT authentication for admin
• Image upload handling

Database Schema (To Be Implemented)

destinations: {
  _id, name, location, description, image, category, rating, price, currency, createdAt
}

specials: {
  _id, destinationId, discount, endDate, highlights[], createdAt
}

admin_users: {
  _id, email, password_hash, createdAt
}

contacts: {
  _id, name, email, message, createdAt
}

newsletter_subscribers: {
  _id, email, subscribedAt
}

---

API Contracts (For Backend Implementation)

Authentication

• POST /api/auth/login - Admin login
• POST /api/auth/logout - Admin logout
• GET /api/auth/verify - Verify JWT token

Destinations

• GET /api/destinations - Get all destinations (with optional filters)
• GET /api/destinations/:id - Get single destination
• POST /api/destinations - Create destination (admin only)
• PUT /api/destinations/:id - Update destination (admin only)
• DELETE /api/destinations/:id - Delete destination (admin only)

Specials

• GET /api/specials - Get all weekly specials
• POST /api/specials - Add destination to specials (admin only)
• PUT /api/specials/:id - Update special details (admin only)
• DELETE /api/specials/:destinationId - Remove from specials (admin only)

Contact & Newsletter

• POST /api/contact - Submit contact form
• POST /api/newsletter/subscribe - Subscribe to newsletter

Image Upload

• POST /api/upload/image - Upload destination image (admin only)

---

Prioritized Backlog

P0 (High Priority)

• Backend API implementation with MongoDB
• Admin authentication with JWT
• Destination CRUD operations
• Specials management APIs
• Frontend-backend integration
• Remove mock data, use real API calls

P1 (Medium Priority)

• Image upload functionality for destinations
• Contact form backend integration (email notifications)
• Newsletter subscription backend
• Admin user management
• Search and filter optimization

P2 (Nice to Have)

• Booking system integration
• Payment gateway (Stripe)
• Email marketing integration
• Analytics dashboard for admin
• Multi-language support
• Advanced image gallery with lightbox
• Reviews and ratings system

---

Next Tasks

1. Backend Development:

   • Create MongoDB models for destinations, specials, admin users
   • Implement authentication with JWT
   • Build CRUD APIs for destinations
   • Build APIs for specials management
   • Add contact form and newsletter endpoints

2. Frontend-Backend Integration:

   • Replace mock data with API calls
   • Add loading states and error handling
   • Implement protected routes with real authentication
   • Add image upload UI and functionality

3. Testing:

   • End-to-end testing of all features
   • Admin dashboard workflow testing
   • Form validation testing
   • Mobile responsiveness testing

---

Notes

• All frontend interactive elements work with browser state
• Mock authentication uses localStorage (admin@epictravel.com / admin123)
• Ready for backend integration - frontend designed with API structure in mind
• Design follows ocean/sky theme without dark colorful gradients
• All icons from lucide-react, no emoji characters used