# 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