Dream Travel Agency

---

🗺️ Overview

Dream Travel Agency is a frontend prototype for a fictional travel booking platform. It showcases a polished visual design and clean UX, built with modern technologies and best practices.

---

✨ Features

• ✈️ Responsive design with Bootstrap 5
• 🧩 Component-based architecture using React
• 🔐 Safe & predictable code with TypeScript
• ⚡ Fast dev/build process with Vite
• 🧪 Integrated testing with React Testing Library & Cypress
• 🧱 Modular structure for easy scalability

---

🧠 Project Structure

dream-travel/
├── public/                # Static assets served as-is
│   └── assets/
│       ├── favicon.svg
│       └── logo.svg
├── src/                   # Source code
│   ├── assets/            # Project assets
│   ├── components/        # Reusable UI components
│   │   ├── DestinationCard.tsx
│   │   ├── Footer.tsx
│   │   ├── Hero.tsx
│   │   ├── Navbar.tsx
│   │   └── PackageCard.tsx
│   ├── database/          # Mock data storage
│   ├── pages/             # Application pages
│   │   ├── AboutUs.tsx
│   │   ├── Contact.tsx
│   │   ├── Destinations.tsx
│   │   ├── Home.tsx
│   │   └── __tests__/     # Unit & integration tests (RTL + Jest)
│   ├── styles/            # Global styles
│   ├── App.tsx            # Main application component
│   └── main.tsx           # Entry point
├── cypress/               # End-to-end tests (Cypress)
│   ├── e2e/
│   ├── fixtures/
│   └── support/
├── index.html             # HTML entry point
├── jest.config.ts         # Jest config
├── cypress.config.ts      # Cypress config
└── vite.config.ts         # Vite config

---

🚀 Getting Started

1. Clone & Install

git clone https://github.com/veras-d/dream-travel-agency.git
cd dream-travel
npm install

2. Run the app locally

npm run dev

---

🧪 Tests

✅ React Testing Library (Unit & Integration)

• Located in src/pages/__tests__/
• Run all RTL tests:

npm run test

• Watch mode (recommended for development):

npm run test:watch

Uses Jest under the hood

🌐 Cypress (End-to-End)

• Located in cypress/e2e/
• Open interactive UI:

npx cypress open

• Run tests headlessly:

npx cypress run

---

📦 Available Scripts

Script	Description
dev	Start development server
build	Build for production
preview	Preview production build
lint	Run ESLint
test	Run all Jest tests
test:watch	Watch mode for Jest
cypress:open	Launch Cypress UI
cypress:run	Run Cypress tests headlessly

---

🛠️ Technologies

• React – UI development
• TypeScript – Type safety
• Vite – Dev/build tooling
• Bootstrap – CSS framework
• React Router – Navigation
• Jest + RTL – Component/unit testing
• Cypress – E2E testing

---

🌍 Live Demo

👉 dream-travel-ruddy.vercel.app

---

📄 License

MIT

---

☕ Buy Me a Ko-Fi

---

© 2025 VERAS. All rights reserved.