muchaisam/Theesafari_web

🌿 Theesafari — A modern Next.js web application showcasing Kenya's breathtaking safari destinations and wildlife experiences. Built with Firebase Firestore, Tailwind CSS, and Framer Motion for smooth animations. Features dynamic destination browsing, category filtering, an immersive gallery, and seamless integration with the Theesafari mobile app. # Theesafari 🌿 Discover Kenya's hidden gems - from secret waterfalls to authentic local restaurants. Theesafari helps travelers explore off-the-beaten-path destinations across Kenya. ## 📱 Mobile App Get the full experience on Android: ## ✨ Features - 🗺️ **Explore 100+ Destinations** - Curated hidden gems across Kenya - 🏷️ **Browse by Category** - Restaurants, nature sanctuaries, adventure parks & more - 📍 **Location Details** - Coordinates, nearby landmarks, accessibility info - ⭐ **Ratings & Reviews** - Community-driven recommendations - 📱 **Responsive Design** - Beautiful on any device ## 🚀 Getting Started ### Prerequisites - Node.js 18+ - npm or yarn - Firebase project with Firestore ### Installation 1. **Clone the repository:** ```bash git clone github.com cd theesafari_web ``` 2. **Install dependencies:** ```bash npm install ``` 3. **Set up environment variables:** ```bash cp .env.example .env.local ``` Then edit `.env.local` with your Firebase credentials. 4. **Start the development server:** ```bash npm run dev ``` 5. Open localhost in your browser. ## 🔐 Environment Variables Create a `.env.local` file with your Firebase configuration: ```env NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project.appspot.com NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id ``` > ⚠️ **Never commit your `.env.local` file!** It's already in `.gitignore`. ## 🛠️ Tech Stack - **Framework:** Next.js 15 (App Router) - **Language:** TypeScript - **Database:** Firebase Firestore - **Storage:** Firebase Storage - **Styling:** Tailwind CSS - **Animations:** Framer Motion - **Deployment:** Vercel ## 📁 Project Structure ``` app/ ├── components/ # Reusable UI components ├── explore/ # Explore page with category fil …