Welcome to the Tour & Travel App project! This is a clean, interactive, and responsive web application built to master component architecture, component decomposition, and props management in React using Tailwind CSS for rapid styling.
A modern, responsive React application for showcasing holiday travel packages. Built with React, Vite, React Router, and styled with CSS.
Master component architecture, props drilling, and responsive design patterns
- Framework: React.js (Vite Template)
- Styling: CSS
- Language: JavaScript (ES6+), HTML, CSS
- Hosting: Vercel
- 🎨 Modular Components – 5+ reusable, independent UI components
- 🔄 Props Drilling – Seamless data flow through component hierarchy
- 📱 Fully Responsive – Mobile, tablet, and desktop optimized
- ⚡ Lightning Fast – Vite-powered development with Hot Module Replacement (HMR)
- 🎯 Modern Styling – CSS for rapid, utility-first design
- 🛣️ React Router – Multi-page navigation and routing
- 🚀 Production Ready – Clean, maintainable, scalable codebase
| Technology | Version | Purpose |
|---|---|---|
| React | ^19.2.7 | UI framework |
| Vite | ^8.1.1 | Build tool & dev server |
| React Router DOM | ^7.18.1 | Client-side routing |
| CSS | ^3.7.18 | Utility-first styling |
| JavaScript | ES6+ | Language |
| oxlint | ^1.71.0 | Code linting |
Tour_Travel_Project/
├── index.html # HTML entry point
├── vercel.json # Vercel
├── package.json # Project dependencies and scripts
├── package-lock.json
├── vite.config.js # Vite configuration
├── public/ # Static assets
├── src/
│ ├── App.css # Main app styles
│ ├── App.jsx # Main app component
│ ├── index.css # Global styles
│ ├── main.jsx # Application entry point
│ ├── Components/ # Reusable UI components
│ │ ├── AboutUs.css
│ │ ├── AboutUs.jsx
│ │ ├── ContactForm.css
│ │ ├── ContactForm.jsx
│ │ ├── Destination.css
│ │ ├── Destination.jsx
│ │ ├── DestinationData.jsx
│ │ ├── Footer.css
│ │ ├── Footer.jsx
│ │ ├── Hero.css
│ │ ├── Hero.jsx
│ │ ├── MenuItem.jsx
│ │ ├── NavBar.css
│ │ ├── NavBar.jsx
│ │ ├── Trip.css
│ │ ├── Trip.jsx
│ │ └── TripData.jsx
│ └── Routes/ # Page-level route components
│ ├── About.jsx
│ ├── Contact.jsx
│ ├── Home.jsx
│ └── Services.jsx
├── Router/ # Additional router-based app folder
│ ├── Dockerfile
│ ├── package.json
│ ├── README.md
│ ├── tsconfig.json
│ ├── vite.config.ts
│ ├── app/
│ │ ├── app.css
│ │ ├── root.tsx
│ │ ├── routes.ts
│ │ ├── routes/
│ │ │ └── home.tsx
│ │ └── welcome/
│ │ └── welcome.tsx
│ └── public/
└── README.md # This file
| Component | Purpose |
|---|---|
| NavBar | Displays the top navigation bar with menu links and a mobile toggle. |
| Hero | Shows the landing banner section with image, title, description, and CTA button. |
| Trip | Renders the recent trips section with multiple trip cards. |
| TripData | Displays an individual trip card with image, heading, and details. |
| Destination | Shows featured destinations with image-based content blocks. |
| DestinationData | Displays a single destination section with text and images. |
| AboutUs | Presents the company history, mission, and vision. |
| Footer | Displays the page footer content. |
| ContactForm | Provides a contact form UI for user inquiries. |
- Home – Main landing page combining hero, trips, and destinations
- About – Company information section
- Services – Service-related page content
- Contact – Contact page with a form
Every time I initialize a new React + Tailwind CSS project, I follow these exact standard steps. You can use this guide to recreate or understand the workspace structure:
Run the following command in your terminal:
npm create vite@latestProceed? y
Project Name: Your_Project_Name Package Name: your_package_name
Select a framework: React
Select a variant: JavaScript
With oxy? No
Install with npm? Yes
If you want to pull this project and run it again locally, simply execute these commands:
# Navigate to the project folder
cd Bg_Changer_Project
# Start the local development server
npm run dev
- Node.js (v16 or higher)
- npm package manager
- Basic knowledge of React and JavaScript
- Clone the repository
git clone https://github.com/MehmoodCoder/Tour_Travel_App.git
cd Tour_Travel_App/Tour_Travel_Project- Install dependencies
npm install- Start the development server
npm run dev- Open in browser
Project Link : Tuor App
npm run devRun oxlint to check code quality and style.
This project uses ** CSS ** for all styling.
- Push your code to GitHub
- Go to vercel.com
- Click "New Project"
- Connect your GitHub repository
- Connect the exact project folder containing
package.jsonto avoid nested directory issues - Vercel automatically detects Vite settings
- Toggle the "Build Command" and write
npm run buildmanually to override it - Click "Deploy"
- ✅ Component Decomposition – Breaking complex UIs into reusable pieces
- ✅ Props Management – Passing data and functions through component trees
- ✅ React Hooks – State management with hooks
- ✅ Conditional Rendering – Showing/hiding content based on conditions
- ✅ List Rendering – Displaying dynamic data with
.map() - ✅ CSS-in-JS & Utility Classes – Styling with Tailwind
- ✅ Responsive Design – Mobile-first approach with media queries
- ✅ Client-Side Routing – Multi-page navigation with React Router
MehmoodCoder
- 🔗 GitHub: github.com/MehmoodCoder
- 🌐 Portfolio: My Portfolio Link
This project is open source and available under the MIT License.
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- ✨ Responsive homepage with hero section
- 🎯 Trip and destination showcases
- 📄 Multi-page routing with React Router
- 💅 CSS styling
- 📱 Mobile-responsive design
- Built with Vite
- Styled with Tailwind CSS
- Routed with React Router
Happy coding without chai ! ☕