✈️ The Booking Concept — AI-Powered Flight Booking App

✨ Features

• AI Flight Recommendations — Powered by Google Gemini API, the app suggests optimal flights based on user intent and travel preferences
• Flight Search UI — Clean, intuitive search interface for origin, destination, dates, and passenger count
• React Router Navigation — Multi-page SPA with smooth client-side routing between search, results, and booking views
• Axios HTTP Client — Structured API calls with clean async data-fetching patterns
• Font Awesome Icons — Rich iconography throughout the UI for a polished, travel-app feel
• Tailwind CSS Styling — Responsive, utility-first design that works across all screen sizes
• Fast Dev Experience — Vite 5 with HMR for instant feedback during development

---

🛠️ Tech Stack

Layer	Technology
Frontend	React 18, React Router v6
AI / Recommendations	Google Gemini API (@google/generative-ai)
HTTP Client	Axios
Styling	Tailwind CSS 3, PostCSS
Icons	Font Awesome (React)
Build Tool	Vite 5

---

🚀 Getting Started

Prerequisites

• Node.js v18+
• A Google Gemini API key (free to get from Google AI Studio)

Installation

# 1. Clone the repo
git clone https://github.com/Shaikh224/The-Booking-Concept.git
cd The-Booking-Concept

# 2. Install dependencies
npm install

# 3. Set up environment variables
cp .env.example .env   # or create .env manually

Environment Variables

Create a .env file in the project root:

VITE_GEMINI_API_KEY=your_google_gemini_api_key

Get your free Gemini API key at Google AI Studio.

Running Locally

npm run dev

App runs at http://localhost:5173.

---

📦 Available Scripts

Command	Description
npm run dev	Start the Vite development server
npm run build	Create an optimized production build
npm run preview	Preview the production build locally
npm run lint	Lint all JS/JSX files with ESLint

---

🗂️ Project Structure

The-Booking-Concept/
├── public/               # Static assets
├── src/
│   ├── components/       # Reusable UI components (SearchBar, FlightCard, etc.)
│   ├── pages/            # Route-level views (Home, Results, Booking)
│   ├── services/         # Gemini API integration & Axios calls
│   └── main.jsx          # App entry point
├── index.html
├── tailwind.config.js
└── vite.config.js

---

🤖 How the AI Recommendation Works

The app uses the Google Gemini API to generate contextual flight recommendations. Based on inputs like travel dates, destination preferences, and budget hints, Gemini processes the context and returns ranked suggestions that surface the most relevant options — going beyond simple filter-based search.

import { GoogleGenerativeAI } from "@google/generative-ai";

const genAI = new GoogleGenerativeAI(import.meta.env.VITE_GEMINI_API_KEY);
const model = genAI.getGenerativeModel({ model: "gemini-pro" });

const result = await model.generateContent(prompt);
const response = await result.response;
const text = response.text();

---

🚢 Deploying

Vercel (Recommended)

npm run build
npx vercel --prod

Add VITE_GEMINI_API_KEY in Vercel under Settings → Environment Variables.

Netlify

npm run build
# Deploy the `dist/` folder

---

🤝 Contributing

1. Fork the project
2. Create your feature branch: git checkout -b feature/your-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin feature/your-feature
5. Open a Pull Request

---

📄 License

Distributed under the MIT License.

---

Made with ❤️ by Shaikh224