DevLaukey/kiswahili-eng-dictionary-frontend

# Swahili Dictionary Frontend A modern, responsive web interface for the Swahili-English dictionary powered by AI and vector search technology. ## Features - **AI-Powered Search**: Get natural language responses from the LLM - **Vector Similarity Search**: Fast and accurate word lookups - **Bilingual Support**: Search in both Swahili and English - **Real-time Health Monitoring**: Track system status and connectivity - **Responsive Design**: Works seamlessly on desktop and mobile devices - **Dark Mode Support**: Automatic dark/light theme support ## Prerequisites - Node.js 18+ or Bun - pnpm (or npm/yarn) - Backend API running (see main project README) ## Installation 1. Install dependencies: ```bash pnpm install ``` 2. Configure environment variables: ```bash cp .env.example .env.local ``` Edit `.env.local` if your backend API is running on a different URL: ```env NEXT_PUBLIC_API_URL=localhost ``` ## Development Run the development server: ```bash pnpm dev ``` Open localhost in your browser. ## Production Build Build for production: ```bash pnpm build pnpm start ``` ## Project Structure ``` kisw-dict-frontend/ ├── app/ # Next.js app directory │ ├── layout.tsx # Root layout with metadata │ ├── page.tsx # Main dictionary page │ └── globals.css # Global styles ├── components/ # React components │ ├── SearchBar.tsx # Search input component │ ├── SearchResults.tsx # Results display component │ ├── DictionaryEntry.tsx # Individual entry card │ └── HealthStatus.tsx # System status display ├── lib/ # Utilities and services │ ├── api.ts # API client │ └── types.ts # TypeScript type definitions └── public/ # Static assets ``` ## API Integration The frontend connects to the following backend endpoints: - `GET /api/v1/health` - System health check - `POST /api/v1/query` - Single query with RAG - `POST …