ErnestKapesa/bemba-app

# Bemba Dictionary - Mobile First Web App A modern, mobile-first Bemba-English dictionary application built with React and Vite. ## 🎨 Features - **Mobile-First Design**: Optimized for mobile devices with responsive layout - **Orange Theme**: Beautiful orange color scheme throughout the app - **Fast Search**: Real-time search with intelligent ranking - **Word Details**: Comprehensive word information including examples, synonyms, and related words - **Clean UI**: Modern, intuitive interface with smooth animations - **Offline-Ready Structure**: Built to support PWA features ## 🚀 Quick Start ### Prerequisites - **Node.js** (v16 or higher) - Download here - **npm** (comes with Node.js) or **yarn** - **Git** (for cloning the repository) ### Installation & Running 1. **Clone the repository**: ```bash git clone github.com cd bemba-app ``` 2. **Install dependencies**: ```bash npm install ``` 3. **Start the development server**: ```bash npm run dev ``` 4. **Open your browser**: - Navigate to `localhost` - The app will automatically reload when you make changes ### Build for Production ```bash npm run build ``` The production-ready files will be in the `dist` folder. ### Preview Production Build ```bash npm run preview ``` This will start a local server to preview the production build. ## 📱 Testing on Mobile 1. **Find your local IP address**: ```bash # On Mac/Linux ifconfig | grep "inet " | grep -v 127.0.0.1 # On Windows ipconfig ``` 2. **Access from your phone**: - Make sure your phone is on the same WiFi network - Open browser and go to `your_ip_address` ## 🎯 Try It Out Once the app is running, try these searches: - `bomba` - to work - `muntu` - person - `help` - shows -afwa (to help) - `eat` - shows -lya (to eat) - `house` - shows ng'anda ## 📁 Project Structure ``` bemba-app/ ├── src/ │ ├── components/ # React components │ │ ├── Header.jsx # App header with branding …