Trip Blueprint
Welcome to Trip Blueprint, an AI-powered travel itinerary planner built with React. Trip Blueprint helps you create, customize, and visualize your travel plans seamlessly. By integrating the Gemini API and Google Maps API, it provides real-time data and interactive maps to enhance your travel planning experience. Perfect for travel enthusiasts who want a streamlined and personalized trip planning solution.
Features
- Interactive Maps: Leverage the power of Google Maps API to visualize routes and locations, making it easier to plan your journey.
- Customizable Itineraries: Tailor your travel plans to your preferences, ensuring a personalized experience.
- Real-time Data: Access up-to-date information about destinations with the Gemini API.
- Responsive Design: Enjoy a seamless experience across all devices with a fully responsive design.
- User Authentication: Secure login and sign-up functionality (currently under progress).
3.3Setup
- Setup and Requirements
- Sign up or Sign in to your Google Cloud account and create a new project. After creating your project, note your project ID for further use.
- Enable APIs For Google Maps & Google Gemini
2. Cloning Repository
The Project Is Written In React JS
git clone https://github.com/swarnade/trip-blueprint.git
Assets:- Contains Various Images/Logos
Components:-Contains all the Sub-Components Used To Display Various Objects
Pages:- Contains The Main Pages That Are To Be Displayed
cd trip-blueprint
npm i
3. Creating Environmental variables
Create Maps API @ Google Cloud Console
Create Gemini API Keys @ MakerSuite
Make sure to add API keys for Gemini & Maps
REACT_APP_API_GEMINI=
REACT_APP_API_MAPS=
Note:-Make Sure To Enable Google Maps & Gemini APIs from Google Cloud Console
4.Starting The Project
npm run dev
5.The Project Is Upp
https://localhost:5173
Using Gemini On Vertex Ai [Optional]
- Open Google Cloud Console
- Search Vertex Ai
3.Go To Plan.jsx , Replace The Code With Gemini in Vertex Ai
npm install @google-cloud/vertexai
const {VertexAI} = require('@google-cloud/vertexai');
async function generate_from_text_input(projectId = 'PROJECT_ID') {
const vertexAI = new VertexAI({project: projectId, location: ''});
const generativeModel = vertexAI.getGenerativeModel({
model: 'gemini-1.5-flash-001',
});
const jsonnn = '```json';
const prompt = `Make a ${props.date} Days & ${props.person} Person Tour Plan For ${props.place} In Format "[{
"day": "",
"title": "",
"description": "",
"locations": [
{
"name": "",
"type": "",
"description": "",
"time": ""
}
],
"notes": ""
}] " Format Such That It Directly Compatible In Map Function Of JS And Only Directly The Json Only & And Make Sure Not To Print "${jsonnn}"`;
const resp = await generativeModel.generateContent(prompt);
const contentResponse = await resp.response;
const data = eval(contentResponse);
setOut(data);
}
4.Setup The Apis Keys & Project ID in .env File
Navigating The Project
- Open The Main Navigation Page
2.Open The Details Page
Place:- Enter Destination
Check-In:-Enter Starting Date
Check-Out :-Enter Ending Date
Person:-Enter Number Of Person
3.Final Page
Github Link @ https://github.com/swarnade/trip-blueprint.git
Project Live Link @ https://tripblueprint.swarnadeepsahapoddar.in
Developer Email :- contact@swarnadeepsahapoddar.in