VibeFind 🌍✈️

Discover your perfect vacation destination with AI-powered personalized recommendations

VibeFind is a modern travel recommendation app that uses AI to match users with their ideal vacation destinations based on their preferences, personality, and travel style.

✨ Features

• 🧠 AI-Powered Recommendations: Personalized destination suggestions using Google's Gemini AI
• 📝 Personality Quiz: Interactive quiz to understand your travel preferences
• 🖼️ Dynamic Images: High-quality destination photos from Unsplash API
• 🌍 Destination Explorer: Browse and discover amazing places around the world
• 💾 Save Favorites: Bookmark destinations you love for later reference
• 🔐 User Authentication: Secure login and profile management
• 📱 Responsive Design: Beautiful UI that works on all devices
• 🎨 Modern Stack: Built with Next.js 15, React 19, and Tailwind CSS

🚀 Demo

Try the live demo: VibeFind App (Add your deployment URL here)

🛠️ Tech Stack

• Framework: Next.js 15
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Radix UI + shadcn/ui
• Animation: Framer Motion
• AI Integration: Google Gemini AI
• Images: Unsplash API
• Icons: Lucide React

📋 Prerequisites

Before you begin, ensure you have installed:

• Node.js (version 18 or higher)
• npm or pnpm

🔧 Installation

1. Clone the repository

   git clone https://github.com/yourusername/vibefind.git
   cd vibefind

2. Install dependencies

   npm install
   # or
   pnpm install

3. Set up environment variables

   Create a .env.local file in the root directory:

   # Google Gemini AI API Key
   GEMINI_API_KEY=your_gemini_api_key_here
   
   # Unsplash API Key
   NEXT_PUBLIC_UNSPLASH_ACCESS_KEY=your_unsplash_access_key_here

4. Get API Keys

   Google Gemini AI:

   • Visit Google AI Studio
   • Create a new API key
   • Add it to your .env.local file

   Unsplash API:

   • Visit Unsplash Developers
   • Create a new application
   • Get your Access Key
   • Add it to your .env.local file

5. Run the development server

   npm run dev
   # or
   pnpm dev

6. Open your browser

   Navigate to http://localhost:3000

📁 Project Structure

vibefind/
├── app/                    # Next.js 13+ app directory
│   ├── api/               # API routes
│   │   └── recommendations/
│   ├── destination/       # Destination detail pages
│   ├── explore/          # Explore destinations page
│   ├── login/            # Authentication pages
│   ├── profile/          # User profile
│   ├── quiz/             # Personality quiz
│   ├── recommendations/  # AI recommendations page
│   └── globals.css       # Global styles
├── components/            # Reusable React components
│   ├── ui/               # shadcn/ui components
│   └── ...               # Custom components
├── hooks/                # Custom React hooks
├── lib/                  # Utility functions and configurations
├── public/               # Static assets
└── styles/              # Additional styling

🎯 How It Works

1. Take the Quiz: Users answer questions about their travel preferences, budget, and interests
2. AI Processing: Gemini AI analyzes responses and generates personalized destination recommendations
3. Image Enhancement: Unsplash API provides high-quality, relevant images for each destination
4. Explore Results: Users can browse recommendations, save favorites, and explore details
5. Discover More: Browse the explore page for additional destination inspiration

🚀 Deployment

Vercel (Recommended)

1. Deploy to Vercel

   npm run build
   npx vercel --prod

2. Set environment variables in your Vercel dashboard:

   • GEMINI_API_KEY
   • NEXT_PUBLIC_UNSPLASH_ACCESS_KEY

Other Platforms

The app can be deployed to any platform that supports Next.js:

Render

1. Connect your repository

   • Go to Render Dashboard
   • Click "New +" → "Web Service"
   • Connect your GitHub repository

2. Configure the deployment

   Name: vibefind
   Branch: main
   Runtime: Node
   Build Command: npm install && npm run build
   Start Command: npm start
   

3. Set environment variables in Render dashboard:

   • GEMINI_API_KEY = your_gemini_api_key
   • NEXT_PUBLIC_UNSPLASH_ACCESS_KEY = your_unsplash_api_key
   • NODE_VERSION = 18 (or higher)

4. Deploy

   • Click "Create Web Service"
   • Render will automatically build and deploy your app
   • Your app will be available at https://your-app-name.onrender.com

Netlify

1. Deploy via Git

   • Connect your GitHub repository
   • Build command: npm run build
   • Publish directory: .next

2. Set environment variables in Netlify dashboard

Railway

1. Deploy from GitHub
   • Connect repository and set environment variables
   • Railway will auto-detect Next.js and deploy

🔐 Environment Variables

Variable	Description	Required
GEMINI_API_KEY	Google Gemini AI API key for generating recommendations	✅
NEXT_PUBLIC_UNSPLASH_ACCESS_KEY	Unsplash API key for fetching destination images	✅

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

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

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Google Gemini AI for powerful AI recommendations
• Unsplash for beautiful travel photography
• shadcn/ui for excellent UI components
• Vercel for seamless deployment

📞 Support

If you have any questions or run into issues, please:

1. Check the Issues page
2. Create a new issue if your problem isn't already listed
3. Contact the maintainers

---

Made with ❤️ and ☕ by Chimdike John