🌍 Trippy - Tour & Travel Website

A modern, fully responsive travel agency website built with React and Vite. This project was built to practice Component-Based Architecture, Client-Side Routing, and Responsive UI Design.

🔗 Live Demo: https://tourandtravel-pearl.vercel.app/

🚀 Tech Stack

• Framework: React JS (Functional Components + Hooks)
• Build Tool: Vite (Fast HMR)
• Routing: React Router v6
• Styling: CSS3 (Mobile-First approach)
• Icons: FontAwesome

✨ Key Features

• Dynamic Components: Reused a single Hero component across multiple pages by passing data via Props.
• Mobile Responsive: Fully functional hamburger menu that toggles state for mobile devices.
• Single Page Application (SPA): Smooth page transitions without reloading using react-router-dom.
• Data Mapping: Navigation and Trip cards are generated dynamically by mapping over data arrays, making it easy to add new content.

🧠 What I Learned

Building this project helped me solidify several core React concepts:

1. State Management: Used useState to handle UI logic like the mobile menu toggle.
2. Props & Reusability: Learned how to pass data down to child components to keep code DRY.
3. Modern React Patterns: Migrated older Class Component tutorials into modern Functional Components to stay up-to-date with industry standards.

🛠️ How to Run Locally

1. Clone the repository:

   git clone [https://github.com/betheashvin/tourAndTravel.git](https://github.com/betheashvin/tourAndTravel.git)

2. Install dependencies: Navigate into the project folder and install the required packages.

   cd tourAndTravel
   npm install

3. Start the development server:

   npm run dev