Full-Stack Trip Planner Web App

Technologies | Features | Layout | Prerequisites

A full-stack web application that helps users plan their trips by providing AI-powered recommendations for travel itineraries, places to visit, and hotels. This app integrates Google Generative AI for dynamic travel planning, Firebase for data storage, and Google Places API for fetching detailed information about places and hotels.

📱 Visit this Project

💻 Technologies

Frontend:

• React: For building the user interface and handling frontend logic.
• TailwindCSS: For styling and responsive design.
• Axios: For making HTTP requests to external APIs.

Backend & Services:

• Google Generative AI API: For generating AI-powered travel recommendations and itineraries.
• Google Places API: For retrieving detailed information about places, hotels, and their photos.
• Firebase Firestore: For storing and managing user trip data.
• Firebase Authentication: For handling user authentication via Google OAuth.

🚀 Features

• AI-Powered Travel Plans: Generate personalized travel itineraries and hotel recommendations using Google Generative AI.
• Dynamic Place Information: Retrieve and display detailed information and photos of places and hotels using Google Places API.
• User Authentication: Secure user login and authentication with Google OAuth.
• Interactive UI: User-friendly and responsive interface designed with TailwindCSS.
• Data Storage: Persistent storage of user trip data in Firebase Firestore.
• Travel Itineraries: Detailed daily travel plans including attractions, timings, and ticket pricing.

🎨 Layout

Home Page:

Google OAuth Sign in:

Create Trip Page:

View Trip Page: AI-generated Hotel Recommendations & Places to Visit

My Trips Page:

Responsive view on mobile:

🗁 Prerequisites

• Node.js & npm
• Firebase Project: Set up a Firebase project and configure Firestore and Authentication. Obtain your Firebase configuration keys.
• Google API Keys: Obtain API keys for Google Generative AI and Google Places API.