bezawit525/ethiopia-navigator-main

A modern, bilingual navigation web app for Ethiopia powered by Gebeta Maps API. Search places, get turn-by-turn directions, and explore Ethiopia — all in English and Amharic (አማርኛ). # 🗺️ Gebeta Navigate — Ethiopian Navigation App A modern, bilingual navigation web app for Ethiopia powered by Gebeta Maps API. Search places, get turn-by-turn directions, and explore Ethiopia — all in **English** and **Amharic (አማርኛ)**. --- ## ✨ Features | Feature | Description | |---|---| | 🔍 **Place Search** | Search for locations across Ethiopia with real-time suggestions via Gebeta Geocoding API | | 🧭 **Turn-by-Turn Directions** | Get route directions between any two points with distance and duration estimates | | 🌍 **Bilingual UI** | Full support for **English** and **Amharic** — switch languages at any time | | 📍 **Geolocation** | Detect your current location and use it as a starting point | | 🗺️ **Interactive Map** | Pan, zoom, and tap to select origin/destination directly on the map (Leaflet) | | 🚗 **Travel Modes** | Choose between **Driving** and **Walking** routes | | 📌 **Reverse Geocoding** | Tap anywhere on the map to get the place name | | 🎮 **Demo Mode** | Try the app instantly without an API key — explore with built-in sample places | | 🎨 **Smooth Animations** | Polished UI with Framer Motion transitions and glassmorphism design | --- ## 🛠️ Tech Stack | Layer | Technology | |---|---| | **Framework** | React 18 + TypeScript | | **Build Tool** | Vite 5 | | **Routing** | React Router v6 | | **Maps** | Leaflet | | **API** | Gebeta Maps API (Geocoding, Directions, Reverse Geocoding) | | **UI Components** | shadcn/ui + Radix UI | | **Styling** | Tailwind CSS 3 | | **Animations** | Framer Motion | | **State / Data** | TanStack React Query | | **Forms** | React Hook Form + Zod | | **SEO** | react-helmet-async | --- ## 📁 Project Structure ``` ethiopia-navigator-main/ ├── public/ # Static assets (favicon, robots.txt) ├── src/ │ ├── components/ │ │ ├── ui/ # shadcn/ui primitives (Button, Toast, Dialog, etc.) │ │ ├── ApiKeyInput.tsx # API key entry form │ │ ├── LanguageToggle.tsx # EN / AM language …