Vibe Navigator 🗺️ Your AI-Powered City Explorer Vibe Navigator is a modern web application designed to help users discover public locations like cafes, parks, and gyms based on their unique "vibe." Leveraging Generative AI and Retrieval-Augmented Generation (RAG), it analyzes user-generated reviews to summarize the atmosphere of each spot and provides personalized recommendations in a friendly, storytelling format.

This project was developed as part of a hackathon, focusing on clean architecture, a mobile-first approach, and AI grounded in real, retrieved evidence (simulated with mock data for this prototype).

✨ Features Search by City & Category: Easily find locations by specifying a city (e.g., "Delhi", "Bangalore") and a category (e.g., "Cafe", "Park", "Gym").

Vibe Cards: Visually engaging cards display a summary of each location's vibe, complete with emojis, mood indicators, and descriptive tags (e.g., 'cozy', 'aesthetic', 'lively', 'nature-filled').

Personalized Queries: Get tailored suggestions by asking natural language questions (e.g., "Tell me a great coffee shop in Delhi with a floral theme") or by selecting specific vibe tags.

Transparent Summaries with Review Citations: Every vibe summary and recommendation is supported by citations from the original (mock) user reviews, ensuring traceability and trust.

🤖 Vibe AI Agent (Bonus Feature): Chat naturally with an AI agent that acts as your city-expert friend. The agent provides recommendations through storytelling (e.g., "Start your day at this cozy floral cafe, then stroll over to a quiet bookshop…"), maintaining a casual and witty persona.

🚀 Technologies Used Frontend: React.js

Styling: Tailwind CSS

AI/Generative Model: Google Gemini API (for vibe analysis, summarization, and personalized recommendations)

Package Manager: npm / npx

(Note: For this hackathon prototype, web scraping, backend services, and database integration are simulated using mock data directly within the frontend. In a full production application, these would be implemented with technologies like BeautifulSoup/Selenium for scraping, FastAPI/Flask/Node.js for backend, and PostgreSQL/MongoDB for storage.)

⚙️ How to Run Locally To get the Vibe Navigator running on your local machine, follow these steps:

Prerequisites:

Node.js (LTS version recommended) and npm installed. You can download them from nodejs.org.

Clone the Repository:

git clone https://github.com/YOUR_USERNAME/YOUR_REPOSITORY_NAME.git cd YOUR_REPOSITORY_NAME # or vibe-app if that's your folder name

(Replace YOUR_USERNAME and YOUR_REPOSITORY_NAME with your actual GitHub details.)

Install Dependencies:

npm install

Configure Tailwind CSS: The project uses Tailwind CSS. Ensure it's correctly set up.

Install Tailwind CSS dependencies (if not already done):

npm install -D tailwindcss postcss autoprefixer

Initialize Tailwind CSS config (if tailwind.config.js and postcss.config.js are missing):

npm exec tailwindcss init -p

Update tailwind.config.js: Ensure the content array includes paths to your React components:

/** @type {import('tailwindcss').Config} / module.exports = { content: [ "./src/**/.{js,jsx,ts,tsx}", "./public/index.html", ], theme: { extend: { fontFamily: { inter: ['Inter', 'sans-serif'], }, }, }, plugins: [], }

Add Tailwind Directives to src/index.css: Add these lines at the very top of src/index.css:

@tailwind base; @tailwind components; @tailwind utilities;

Add Google Font Link to public/index.html: Add this line inside the section of public/index.html:

Start the Development Server:

npm start

This will open the application in your default web browser at http://localhost:3000.

🌐 Deployment (GitHub Pages) This project can be easily deployed using GitHub Pages:

Install gh-pages:

npm install --save-dev gh-pages

Configure package.json: Add a homepage property and predeploy/deploy scripts:

// in package.json "homepage": "https://YOUR_USERNAME.github.io/YOUR_REPOSITORY_NAME", "scripts": { // ... existing scripts "predeploy": "npm run build", "deploy": "gh-pages -d build" },

Deploy:

npm run deploy

Enable GitHub Pages: Go to your GitHub repository -> Settings -> Pages, and select the gh-pages branch as your source.

🔮 Future Enhancements Real Web Scraping: Implement a robust backend for scraping live review data from platforms like Google Maps, Reddit, or TripAdvisor.

Vector Database Integration: Integrate a vector database (e.g., Pinecone, ChromaDB) for efficient storage and retrieval of review embeddings, enhancing the RAG pipeline.

Advanced RAG: Implement more sophisticated RAG techniques for improved context understanding and more nuanced recommendations.

Map Integration: Integrate interactive maps (e.g., OpenStreetMap, Google Maps API) to visualize recommended locations.

User Authentication & Data Persistence: Allow users to save their favorite locations and personalized tour plans.

Expanded Vibe Tags: Dynamically generate or allow users to define custom vibe tags.

Improved AI Agent Memory: Enhance the AI agent's conversational memory for more coherent and context-aware interactions.

Developed for a Hackathon by [Your Name/Team Name]