| # **Aglimate - Frontend Product Requirements Document (PRD)** |
|
|
| **Version**: 1.0 |
| **Last Updated**: June 20, 2026 |
| **Author**: Oluchukwu Prosper |
| **Backend Developer**: Oluchukwu Prosper |
|
|
| --- |
|
|
| ## **📋 Document Overview** |
|
|
| This document outlines the requirements for building the **frontend interface** for Aglimate, a Farmer-First Climate-Resilient Advisory Agent for Nigerian smallholder farmers. The backend is already developed and deployed; this PRD specifies what the frontend must implement to provide a complete user experience. |
|
|
| --- |
|
|
| ## **🎯 Product Vision** |
|
|
| **Aglimate** empowers Nigerian smallholder farmers with AI-powered, multilingual agricultural advice accessible via simple, intuitive interfaces. The frontend must be **farmer-first** — designed for users who may have: |
| - Limited literacy |
| - Basic or feature phones |
| - Intermittent internet connectivity |
| - No prior experience with AI chatbots |
|
|
| --- |
|
|
| ## **👥 Target Users** |
|
|
| ### **Primary Users (Priority 1)** |
| | User Type | Persona | Needs | Device | Language | |
| |-----------|---------|-------|--------|----------| |
| | Smallholder Farmer | Rural farmer, 35-65 years | Simple farming advice in local language | Basic phone / Smartphone | Hausa, Igbo, Yoruba, Pidgin | |
| | Subsistence Farmer | Woman farmer, manages small plot | Disease/pest identification, weather planning | Feature phone | Local language + voice | |
|
|
| ### **Secondary Users (Priority 2)** |
| | User Type | Persona | Needs | Device | Language | |
| |-----------|---------|-------|--------|----------| |
| | Agricultural Extension Officer | Government/NGO worker | Field support, farmer education | Tablet / Smartphone | English + local | |
| | Agronomist | Professional advisor | Quick reference, multilingual support | Smartphone / Laptop | English + local | |
| | NGO Field Agent | Community worker | Data collection, farmer support | Smartphone | English + local | |
|
|
| --- |
|
|
| ## **🌐 Platform Requirements** |
|
|
| ### **Required Platforms** |
|
|
| #### **Phase 1: Web Application (MVP)** ⭐⭐⭐ |
| - **Type**: Responsive web app |
| - **Framework**: React.js or Vue.js (recommended) |
| - **Responsiveness**: Mobile-first, works on all screen sizes |
| - **Offline Support**: Service Worker for caching (PWA) |
| - **Browser Support**: Chrome, Firefox, Safari, Edge (latest 2 versions) |
|
|
| #### **Phase 2: Mobile App (Future)** ⭐⭐ |
| - **Platforms**: Android (Kotlin/Java), iOS (Swift) |
| - **Approach**: React Native (cross-platform) or native |
| - **Offline Mode**: Full offline capability with sync when online |
| - **App Size**: <50MB (critical for African markets) |
|
|
| #### **Phase 3: USSD (Future)** ⭐ |
| - **Access**: `*388*AGL#` or similar shortcode |
| - **Carriers**: MTN, Glo, Airtel, 9mobile Nigeria |
| - **Session**: Menu-based navigation |
| - **Cost**: Zero-rated or minimal SMS charges |
|
|
| #### **Phase 4: SMS (Future)** ⭐ |
| - **Shortcode**: Dedicated number (e.g., 38838) |
| - **Format**: Text question → Receive answer via SMS |
| - **Languages**: All supported languages |
| - **Cost**: Premium SMS rate |
|
|
| --- |
|
|
| ## **⚡ Backend API Overview** |
|
|
| ### **Base URL** |
| ``` |
| https://YOUR_DEPLOYMENT_URL/ |
| ``` |
|
|
| ### **Authentication** |
| - **No authentication required** for public endpoints |
| - **Rate Limiting**: 20 requests/minute for `/ask`, 10 requests/minute for `/advise` |
| - **CORS**: Enabled for all origins (`*`) |
|
|
| ### **Core Endpoints** |
|
|
| | Endpoint | Method | Description | Response | |
| |----------|--------|-------------|----------| |
| | `/` | GET | Health check | System status | |
| | `/health` | GET | Detailed health check | Models, services status | |
| | `/ask` | POST | Text-based Q&A | Answer, language, confidence, intent | |
| | `/advise` | POST | Multimodal advisory (text + photo + GPS) | Answer, location data, model used | |
|
|
| ### **Weather Endpoints** |
|
|
| | Endpoint | Method | Description | Parameters | |
| |----------|--------|-------------|------------| |
| | `/weather/current` | GET | Current weather | `q`, `state`, `lat`, `lon`, `aqi` | |
| | `/weather/forecast` | GET | Multi-day forecast | `q`, `state`, `lat`, `lon`, `days`, `aqi`, `alerts` | |
| | `/weather-alerts` | GET | Weather alerts only | `q`, `state`, `lat`, `lon` | |
| | `/weather/history` | GET | Historical weather | `q`, `state`, `lat`, `lon`, `dt`, `end_dt` | |
| | `/weather/marine` | GET | Marine weather | `q`, `lat`, `lon`, `days`, `tides` | |
| | `/weather/future` | GET | Future date weather | `q`, `state`, `lat`, `lon`, `dt` | |
| | `/weather/timezone` | GET | Timezone info | `q`, `state`, `lat`, `lon` | |
| | `/weather/search` | GET | Location search | `q` | |
| | `/weather/ip` | GET | IP-based location | `ip` | |
|
|
| --- |
|
|
| ## **📱 Frontend Features & Requirements** |
|
|
| --- |
|
|
| ## **🏗️ Feature 1: Core Chat Interface** |
|
|
| ### **User Stories** |
| - As a farmer, I want to ask agricultural questions in my own language so I can get advice I understand |
| - As a farmer, I want to see my conversation history so I can continue previous discussions |
| - As a farmer, I want clear, actionable answers so I can make farming decisions |
|
|
| ### **Requirements** |
|
|
| #### **1.1 Chat Input** |
| - [ ] **Text Input**: Multiline text area for farmer questions |
| - [ ] **Voice Input**: Microphone button for voice-to-text (Web Speech API) |
| - [ ] **Language Detection**: Auto-detect input language (Hausa, Igbo, Yoruba, English, etc.) |
| - [ ] **Language Switcher**: Manual language selection dropdown |
| - [ ] **Send Button**: Submit query |
| - [ ] **Enter Key**: Submit on Enter key |
|
|
| #### **1.2 Chat Display** |
| - [ ] **Message Bubbles**: Farmer questions (right) vs Aglimate answers (left) |
| - [ ] **Timestamp**: Show time for each message |
| - [ ] **Language Tag**: Display detected language for each message |
| - [ ] **Confidence Indicator**: Show confidence score (High/Medium/Low) |
| - [ ] **Typing Indicator**: Show "Aglimate is thinking..." during API calls |
| - [ ] **Error Messages**: Clear error display with retry option |
|
|
| #### **1.3 Session Management** |
| - [ ] **New Session**: Start fresh conversation |
| - [ ] **Session Persistence**: Auto-reconnect to previous session if exists |
| - [ ] **Session List**: View list of recent sessions |
| - [ ] **Session Deletion**: Delete old sessions |
| - [ ] **Session Export**: Save/Share conversation as text |
|
|
| ### **API Integration** |
| ```javascript |
| // Example: Send chat message |
| const response = await fetch('/ask', { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ |
| query: userMessage, |
| session_id: currentSessionId |
| }) |
| }); |
| |
| // Response format |
| { |
| "query": "What is the best time to plant maize?", |
| "answer": "The best time to plant maize in Nigeria is...", |
| "session_id": "abc-123", |
| "detected_language": "English", |
| "confidence": 0.92, |
| "intent": "normal", |
| "cached": false |
| } |
| ``` |
|
|
| ### **UI Mockup** |
| ``` |
| +------------------------------------------+ |
| | [Aglimate] [New Chat] [⚙️ Settings] | |
| +------------------------------------------+ |
| | | |
| | +------------------+ | |
| | | Farmer: What | | |
| | | is the best | | |
| | | time to plant | | |
| | | maize? | | |
| | +------------------+ | |
| | | |
| | +------------------+ | |
| | | Aglimate: The | | |
| | | best time is | | |
| | | early May... | | |
| | | [Confidence: 🟢] | | |
| | +------------------+ | |
| | | |
| | +------------------+ | |
| | | 🎤 [Type or speak your question] | |
| | +------------------+ | |
| | | |
| | [📷] [🎤] [📤] | |
| +------------------------------------------+ |
| ``` |
|
|
| --- |
|
|
| ## **🌿 Feature 2: Climate-Resilient Advisory (Multimodal)** |
|
|
| ### **User Stories** |
| - As a farmer, I want to upload a photo of my sick crop so Aglimate can help identify the disease |
| - As a farmer, I want to share my GPS location so Aglimate can give weather-specific advice |
| - As a farmer, I want step-by-step guidance for my specific farming situation |
|
|
| ### **Requirements** |
|
|
| #### **2.1 Photo Upload** |
| - [ ] **Camera Access**: Take photo directly from app |
| - [ ] **Gallery Access**: Upload from device storage |
| - [ ] **Image Preview**: Show selected image before sending |
| - [ ] **Image Validation**: Check file size (<5MB), format (JPG, PNG, WEBP) |
| - [ ] **Progress Indicator**: Show upload progress |
|
|
| #### **2.2 GPS/Location** |
| - [ ] **GPS Access**: Request location permission |
| - [ ] **Manual Input**: Allow manual lat/long entry |
| - [ ] **Location Search**: Search by city/state in Nigeria |
| - [ ] **Location Display**: Show selected location on map (optional) |
|
|
| #### **2.3 Multimodal Form** |
| - [ ] **Combined Input**: Text + Photo + Location in one form |
| - [ ] **Field Validation**: Ensure at least text is provided |
| - [ ] **Submit Button**: Send all data to `/advise` endpoint |
|
|
| ### **API Integration** |
| ```javascript |
| // Example: Send multimodal advisory request |
| const formData = new FormData(); |
| formData.append('query', farmerDescription); |
| formData.append('session_id', currentSessionId); |
| if (latitude) formData.append('latitude', latitude); |
| if (longitude) formData.append('longitude', longitude); |
| if (photoFile) formData.append('photo', photoFile); |
| |
| const response = await fetch('/advise', { |
| method: 'POST', |
| body: formData |
| }); |
| |
| // Response format |
| { |
| "session_id": "abc-123", |
| "answer": "Based on your photo and location...", |
| "latitude": 6.5244, |
| "longitude": 3.3792, |
| "used_image": true, |
| "used_video": false, |
| "model_used": "Qwen/Qwen2-VL-2B-Instruct" |
| } |
| ``` |
|
|
| ### **UI Mockup** |
| ``` |
| +------------------------------------------+ |
| | [← Back] Climate Advisory | |
| +------------------------------------------+ |
| | | |
| | Describe your farming situation: | |
| | +------------------------------------+ | |
| | | | | |
| | | My cassava plants have yellow | | |
| | | leaves... | | |
| | +------------------------------------+ | |
| | | |
| | +------------+ | |
| | | | | |
| | | [📷] | Add photo of affected | |
| | | Image | plants/soil | |
| | | | | |
| | +------------+ | |
| | | |
| | +------------+ | |
| | | 📍 Use my | Or select location: | |
| | | location | [Dropdown ▼] | |
| | +------------+ | |
| | | |
| | [Submit Advisory Request] | |
| +------------------------------------------+ |
| ``` |
|
|
| --- |
|
|
| ## **🌦️ Feature 3: Weather Dashboard** |
|
|
| ### **User Stories** |
| - As a farmer, I want to see current weather for my location to plan farming activities |
| - As a farmer, I want to see weather forecasts to decide when to plant/harvest |
| - As a farmer, I want weather alerts to prepare for extreme conditions |
|
|
| ### **Requirements** |
|
|
| #### **3.1 Current Weather** |
| - [ ] **Location Selection**: Auto-detect or manual entry |
| - [ ] **Weather Display**: Temperature, humidity, wind, precipitation |
| - [ ] **Condition Icon**: Visual weather representation |
| - [ ] **AQI Display**: Air quality index (optional) |
| - [ ] **Last Updated**: Timestamp of data |
|
|
| #### **3.2 Forecast** |
| - [ ] **Daily Forecast**: 3-14 day outlook |
| - [ ] **Hourly Forecast**: 24-hour detailed forecast |
| - [ ] **Chart Visualization**: Temperature/rainfall graphs |
| - [ ] **Farming Insights**: "Good day for planting", "Risk of heavy rain" |
|
|
| #### **3.3 Alerts** |
| - [ ] **Alert List**: Active weather warnings |
| - [ ] **Severity Levels**: Color-coded (Red=Critical, Orange=Warning, Yellow=Caution) |
| - [ ] **Push Notifications**: Alert notifications (if permissions granted) |
| - [ ] **Action Recommendations**: What farmers should do |
|
|
| ### **API Integration** |
| ```javascript |
| // Current weather |
| const response = await fetch('/weather/current?q=Lagos,Nigeria&aqi=yes'); |
| |
| // Forecast |
| const response = await fetch('/weather/forecast?q=Lagos&days=7&alerts=yes'); |
| |
| // Alerts only |
| const response = await fetch('/weather-alerts?q=Lagos'); |
| ``` |
|
|
| ### **UI Mockup** |
| ``` |
| +------------------------------------------+ |
| | [Weather] [Forecast] [Alerts] | |
| +------------------------------------------+ |
| | | |
| | 📍 Lagos, Nigeria | |
| | Updated: Just now | |
| | | |
| | +--------+----------------------------+ | |
| | | ☀️ | 32°C Sunny | | |
| | | | Humidity: 65% | | |
| | | | Wind: 12 km/h | | |
| | +--------+----------------------------+ | |
| | | |
| | FORECAST | |
| | +----+----+----+----+----+ | |
| | |Mon |Tue |Wed |Thu |Fri | | |
| | |☀️33|🌧️29|☁️31|☀️34|🌧️30| | |
| | +----+----+----+----+----+ | |
| | | |
| | ⚠️ ALERTS | |
| | +------------------------------------+ | |
| | | Heavy rain warning - Thu | | |
| | | Protect crops, ensure drainage | | |
| | +------------------------------------+ | |
| +------------------------------------------+ |
| ``` |
|
|
| --- |
|
|
| ## **📊 Feature 4: Agricultural Knowledge Base** |
|
|
| ### **User Stories** |
| - As a farmer, I want to browse agricultural topics to learn best practices |
| - As a farmer, I want to search for specific information (diseases, crops, techniques) |
| - As a farmer, I want to save helpful articles for offline reading |
|
|
| ### **Requirements** |
|
|
| #### **4.1 Topic Browser** |
| - [ ] **Category Navigation**: Crops, Livestock, Soil, Weather, Pests/Diseases |
| - [ ] **Subcategories**: Maize, Cassava, Yam, etc. |
| - [ ] **Article Cards**: Title, excerpt, read time |
| - [ ] **Search Functionality**: Full-text search |
|
|
| #### **4.2 Article Viewer** |
| - [ ] **Rich Text Display**: Formatted articles with images |
| - [ ] **Language Toggle**: Switch between languages |
| - [ ] **Save for Offline**: Download articles for later reading |
| - [ ] **Share Article**: Share via WhatsApp, SMS, etc. |
|
|
| #### **4.3 RAG Integration** |
| - [ ] **Real-time Updates**: Show latest agricultural news |
| - [ ] **Source Attribution**: Show where information comes from |
| - [ ] **Date Display**: When article was published/updated |
|
|
| --- |
|
|
| ## **🎨 Feature 5: User Profile & Settings** |
|
|
| ### **User Stories** |
| - As a user, I want to set my preferences (language, location) so the app works better for me |
| - As a user, I want to view my usage history to track my interactions |
| - As a user, I want to provide feedback to improve the service |
|
|
| ### **Requirements** |
|
|
| #### **5.1 Profile Settings** |
| - [ ] **Language Preference**: Default language for responses |
| - [ ] **Default Location**: Home farm location |
| - [ ] **Notification Settings**: Enable/disable alerts |
| - [ ] **Theme**: Light/Dark mode, High contrast |
| - [ ] **Font Size**: Large text option |
|
|
| #### **5.2 Usage History** |
| - [ ] **Interaction Log**: List of all queries and responses |
| - [ ] **Filter by Date**: View history for specific time periods |
| - [ ] **Export History**: Download as CSV/text |
| - [ ] **Clear History**: Delete all saved data |
|
|
| #### **5.3 Feedback** |
| - [ ] **Rating System**: 1-5 stars for each response |
| - [ ] **Comment Box**: Text feedback on responses |
| - [ ] **Bug Report**: Submit error reports with screenshots |
| - [ ] **Feature Request**: Suggest new features |
|
|
| ### **UI Mockup** |
| ``` |
| +------------------------------------------+ |
| | [← Back] Settings | |
| +------------------------------------------+ |
| | | |
| | PROFILE | |
| | +------------------------------------+ | |
| | | Name: John Doe | | |
| | | Language: Igbo | | |
| | | Location: Enugu, Nigeria | | |
| | +------------------------------------+ | |
| | | |
| | PREFERENCES | |
| | +------------------------------------+ | |
| | | [✓] Weather Alerts | | |
| | | [✓] Large Text | | |
| | | [ ] Dark Mode | | |
| | +------------------------------------+ | |
| | | |
| | [Save Settings] | |
| | | |
| | [Rate This App] [Give Feedback] | |
| | | |
| | [Clear Cache] [Clear History] | |
| +------------------------------------------+ |
| ``` |
|
|
| --- |
|
|
| ## **🎯 Feature 6: Farmer Resources** |
|
|
| ### **User Stories** |
| - As a farmer, I want to find local agricultural extension officers to get professional help |
| - As a farmer, I want to access emergency contacts for urgent farming issues |
| - As a farmer, I want to see market prices for my crops |
|
|
| ### **Requirements** |
|
|
| #### **6.1 Expert Directory** |
| - [ ] **Extension Officer List**: Searchable directory by location |
| - [ ] **Specialization Filter**: Crop specialists, livestock experts, etc. |
| - [ ] **Contact Information**: Phone, email, office location |
| - [ ] **Map View**: Visualize experts on map |
|
|
| #### **6.2 Emergency Contacts** |
| - [ ] **Hotline Numbers**: Agricultural emergency contacts |
| - [ ] **Disease Outbreak Reporting**: Direct reporting channels |
| - [ ] **Disaster Assistance**: Flood, drought, pest outbreak support |
|
|
| #### **6.3 Market Information** |
| - [ ] **Crop Price Tracker**: Current market prices |
| - [ ] **Price Trends**: Historical price charts |
| - [ ] **Market Locations**: Nearby markets with contact info |
|
|
| --- |
|
|
| ## **🔌 Technical Requirements** |
|
|
| ### **Frontend Architecture** |
| ``` |
| ┌─────────────────────────────────────────────────────┐ |
| │ Aglimate Frontend │ |
| ├─────────────────────────────────────────────────────┤ |
| │ │ |
| │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ |
| │ │ React/Vue │ │ State │ │ API │ │ |
| │ │ Components │──▶│ Management │──▶│ Service │ │ |
| │ └──────────────┘ └──────────────┘ └──────────────┘ │ |
| │ │ │ │ │ |
| │ ▼ ▼ ▼ │ |
| │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ |
| │ │ UI │ │ Redux/ │ │ Fetch │ │ |
| │ │ Library │ │ Pinia │ │ Wrapper │ │ |
| │ └──────────────┘ └──────────────┘ └──────────────┘ │ |
| │ │ |
| └─────────────────────────────────────────────────────┘ |
| ``` |
|
|
| ### **Folder Structure** |
| ``` |
| frontend/ |
| ├── public/ |
| │ ├── index.html |
| │ ├── favicon.ico |
| │ └── manifest.json (PWA) |
| ├── src/ |
| │ ├── assets/ |
| │ │ ├── images/ |
| │ │ └── styles/ |
| │ ├── components/ |
| │ │ ├── Chat/ |
| │ │ │ ├── ChatInput.jsx |
| │ │ │ ├── ChatMessage.jsx |
| │ │ │ └── ChatContainer.jsx |
| │ │ ├── Weather/ |
| │ │ │ ├── WeatherCurrent.jsx |
| │ │ │ ├── WeatherForecast.jsx |
| │ │ │ └── WeatherAlerts.jsx |
| │ │ ├── Advisory/ |
| │ │ │ └── MultimodalForm.jsx |
| │ │ ├── Common/ |
| │ │ │ ├── LanguageSwitcher.jsx |
| │ │ │ ├── LoadingSpinner.jsx |
| │ │ │ └── ErrorBoundary.jsx |
| │ │ └── Layout/ |
| │ │ ├── Header.jsx |
| │ │ ├── Footer.jsx |
| │ │ └── Navbar.jsx |
| │ ├── pages/ |
| │ │ ├── Home.jsx |
| │ │ ├── Chat.jsx |
| │ │ ├── Advisory.jsx |
| │ │ ├── Weather.jsx |
| │ │ ├── KnowledgeBase.jsx |
| │ │ ├── Settings.jsx |
| │ │ └── Resources.jsx |
| │ ├── services/ |
| │ │ ├── api.js (API client) |
| │ │ ├── auth.js |
| │ │ ├── cache.js |
| │ │ └── weather.js |
| │ ├── store/ |
| │ │ ├── index.js |
| │ │ ├── slices/ |
| │ │ │ ├── chatSlice.js |
| │ │ │ ├── weatherSlice.js |
| │ │ │ └── userSlice.js |
| │ │ └── hooks.js |
| │ ├── hooks/ |
| │ │ ├── useChat.js |
| │ │ ├── useWeather.js |
| │ │ └── useResponsive.js |
| │ ├── utils/ |
| │ │ ├── helpers.js |
| │ │ ├── validation.js |
| │ │ └── constants.js |
| │ ├── App.jsx |
| │ ├── main.jsx |
| │ └── index.css |
| ├── .env |
| ├── package.json |
| └── README.md |
| ``` |
|
|
| ### **State Management** |
| ```javascript |
| // Example Redux slice for chat |
| const chatSlice = createSlice({ |
| name: 'chat', |
| initialState: { |
| sessions: [], |
| currentSession: null, |
| messages: [], |
| loading: false, |
| error: null |
| }, |
| reducers: { |
| addMessage: (state, action) => {}, |
| setLoading: (state, action) => {}, |
| setError: (state, action) => {}, |
| clearSession: (state, action) => {} |
| } |
| }); |
| ``` |
|
|
| ### **API Service Layer** |
| ```javascript |
| // services/api.js |
| class AglimateAPI { |
| static async ask(query, sessionId = null) { |
| const response = await fetch('/ask', { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ query, session_id: sessionId }) |
| }); |
| return response.json(); |
| } |
| |
| static async advise(data) { |
| const formData = new FormData(); |
| Object.entries(data).forEach(([key, value]) => { |
| if (value !== null && value !== undefined) { |
| formData.append(key, value); |
| } |
| }); |
| |
| const response = await fetch('/advise', { |
| method: 'POST', |
| body: formData |
| }); |
| return response.json(); |
| } |
| |
| static async getWeatherCurrent(params) { |
| const query = new URLSearchParams(params); |
| const response = await fetch(`/weather/current?${query}`); |
| return response.json(); |
| } |
| |
| static async healthCheck() { |
| const response = await fetch('/health'); |
| return response.json(); |
| } |
| } |
| ``` |
|
|
| --- |
|
|
| ## **📱 Responsive Design Requirements** |
|
|
| ### **Breakpoints** |
| ```css |
| /* Mobile First */ |
| :root { |
| --breakpoint-xs: 0px; |
| --breakpoint-sm: 576px; |
| --breakpoint-md: 768px; |
| --breakpoint-lg: 992px; |
| --breakpoint-xl: 1200px; |
| } |
| |
| /* Mobile (<576px) */ |
| @media (max-width: 575.98px) { |
| /* Single column layout */ |
| /* Full-width inputs */ |
| /* Bottom navigation bar */ |
| } |
| |
| /* Tablet (≥576px) */ |
| @media (min-width: 576px) { |
| /* Two-column layout for chat */ |
| /* Side navigation */ |
| } |
| |
| /* Desktop (≥768px) */ |
| @media (min-width: 768px) { |
| /* Full multi-column layout */ |
| /* Sidebar + main content */ |
| } |
| ``` |
|
|
| ### **Mobile-Specific Requirements** |
| - [ ] **Touch Targets**: Minimum 48x48px for all interactive elements |
| - [ ] **Font Size**: Minimum 16px for body text |
| - [ ] **Viewport**: Proper meta tags for mobile |
| - [ ] **Input Types**: Use `type="number"`, `type="email"` etc. for better mobile UX |
| - [ ] **Virtual Keyboard**: Handle keyboard appearance/disappearance |
| - [ ] **Scroll Behavior**: Smooth scrolling, no horizontal scroll |
|
|
| ### **Accessibility Requirements** |
| - [ ] **Color Contrast**: WCAG 2.1 AA compliance |
| - [ ] **Keyboard Navigation**: All functionality accessible via keyboard |
| - [ ] **Screen Reader Support**: ARIA labels, semantic HTML |
| - [ ] **Focus Indicators**: Visible focus states for all interactive elements |
| - [ ] **Alt Text**: All images have descriptive alt text |
| - [ ] **Error Messages**: Clear, accessible error messages |
|
|
| --- |
|
|
| ## **⚡ Performance Requirements** |
|
|
| ### **Loading Times** |
| | Metric | Target | Measurement | |
| |--------|--------|-------------| |
| | First Contentful Paint | <1.5s | Lighthouse | |
| | Time to Interactive | <2.5s | Lighthouse | |
| | Largest Contentful Paint | <2.5s | Lighthouse | |
| | API Response Display | <500ms | Custom | |
|
|
| ### **Optimizations** |
| - [ ] **Code Splitting**: Lazy load non-critical components |
| - [ ] **Image Optimization**: Compress images, use WebP format |
| - [ ] **Bundle Size**: Main JS bundle <1MB (uncompressed) |
| - [ ] **Tree Shaking**: Remove unused code |
| - [ ] **CDN**: Use CDN for static assets |
| - [ ] **Caching**: Implement service worker for offline caching |
|
|
| ### **Progressive Web App (PWA)** |
| ```json |
| { |
| "name": "Aglimate", |
| "short_name": "Aglimate", |
| "start_url": "/", |
| "display": "standalone", |
| "background_color": "#ffffff", |
| "theme_color": "#2E7D32", |
| "icons": [ |
| { |
| "src": "icon-192x192.png", |
| "sizes": "192x192", |
| "type": "image/png" |
| }, |
| { |
| "src": "icon-512x512.png", |
| "sizes": "512x512", |
| "type": "image/png" |
| } |
| ] |
| } |
| ``` |
|
|
| --- |
|
|
| ## **🌐 Offline Functionality** |
|
|
| ### **Requirements** |
| - [ ] **Service Worker**: Cache API responses for offline use |
| - [ ] **Local Storage**: Store recent conversations |
| - [ ] **Offline Detection**: Notify user when offline |
| - [ ] **Queue Requests**: Queue requests made while offline, sync when online |
| - [ ] **Cached Data**: Display cached weather/data when offline |
|
|
| ### **Implementation** |
| ```javascript |
| // service-worker.js |
| const CACHE_NAME = 'aglimate-v1'; |
| const ASSETS_TO_CACHE = [ |
| '/', |
| '/index.html', |
| '/static/css/main.css', |
| '/static/js/main.js' |
| ]; |
| |
| self.addEventListener('install', (event) => { |
| event.waitUntil( |
| caches.open(CACHE_NAME) |
| .then((cache) => cache.addAll(ASSETS_TO_CACHE)) |
| ); |
| }); |
| |
| self.addEventListener('fetch', (event) => { |
| event.respondWith( |
| caches.match(event.request) |
| .then((response) => response || fetch(event.request)) |
| ); |
| }); |
| ``` |
|
|
| --- |
|
|
| ## **🔒 Security Requirements** |
|
|
| ### **Data Protection** |
| - [ ] **HTTPS**: Enforce HTTPS in production |
| - [ ] **Input Sanitization**: Sanitize all user inputs |
| - [ ] **XSS Protection**: Prevent cross-site scripting |
| - [ ] **CSRF Protection**: Implement CSRF tokens for forms |
| - [ ] **Rate Limiting**: Respect backend rate limits |
| - [ ] **Error Handling**: Don't expose sensitive info in errors |
|
|
| ### **Privacy** |
| - [ ] **Data Minimization**: Collect only necessary data |
| - [ ] **User Consent**: Request permissions clearly |
| - [ ] **Location Data**: Explain why location is needed |
| - [ ] **Data Deletion**: Allow users to delete their data |
| - [ ] **Privacy Policy**: Display privacy policy |
|
|
| --- |
|
|
| ## **📊 Analytics & Monitoring** |
|
|
| ### **Frontend Tracking** |
| - [ ] **Page Views**: Track page navigation |
| - [ ] **Feature Usage**: Track which features are used |
| - [ ] **Language Stats**: Track language preferences |
| - [ ] **Error Tracking**: Log frontend errors to backend |
| - [ ] **Performance**: Track load times, API response times |
|
|
| ### **Implementation** |
| ```javascript |
| // Analytics service |
| class Analytics { |
| static trackEvent(category, action, label = null, value = null) { |
| // Send to backend or external service |
| fetch('/analytics', { |
| method: 'POST', |
| body: JSON.stringify({ category, action, label, value }), |
| headers: { 'Content-Type': 'application/json' } |
| }).catch(() => {}); |
| } |
| |
| static trackPageView(path) { |
| this.trackEvent('page', 'view', path); |
| } |
| |
| static trackError(error, context = {}) { |
| fetch('/error', { |
| method: 'POST', |
| body: JSON.stringify({ error: error.message, context }), |
| headers: { 'Content-Type': 'application/json' } |
| }).catch(() => {}); |
| } |
| } |
| ``` |
|
|
| --- |
|
|
| ## **🚀 Deployment & Hosting** |
|
|
| ### **Web Application** |
| - **Hosting**: Vercel, Netlify, or GitHub Pages |
| - **Custom Domain**: aglimate.ng or similar |
| - **SSL**: Automatic HTTPS |
| - **CI/CD**: GitHub Actions for automatic deployment |
|
|
| ### **Mobile Application** |
| - **Android**: Google Play Store |
| - **iOS**: Apple App Store |
| - **APK**: Direct download for users without app stores |
|
|
| ### **Environment Variables** |
| ```env |
| # Development |
| REACT_APP_API_URL=http://localhost:7860 |
| REACT_APP_ENV=development |
| |
| # Production |
| REACT_APP_API_URL=https://your-backend-url.com |
| REACT_APP_ENV=production |
| REACT_APP_SENTRY_DSN=your-sentry-dsn |
| ``` |
|
|
| --- |
|
|
| ## **📅 Implementation Timeline** |
|
|
| ### **Phase 1: MVP (4-6 weeks)** |
| | Week | Tasks | Priority | |
| |------|-------|----------| |
| | 1 | Setup project, design system, core components | ⭐⭐⭐ | |
| | 2 | Chat interface, API integration | ⭐⭐⭐ | |
| | 3 | Weather dashboard, responsive design | ⭐⭐⭐ | |
| | 4 | Multimodal advisory, testing | ⭐⭐ | |
| | 5 | Settings, user profile | ⭐⭐ | |
| | 6 | Polish, bug fixes, deployment | ⭐⭐ | |
|
|
| ### **Phase 2: Enhanced Features (2-4 weeks)** |
| | Week | Tasks | Priority | |
| |------|-------|----------| |
| | 7 | Knowledge base, article viewer | ⭐⭐ | |
| | 8 | Farmer resources, expert directory | ⭐ | |
| | 9 | Market information, price tracker | ⭐ | |
| | 10 | Performance optimization | ⭐ | |
|
|
| ### **Phase 3: Mobile & Advanced (4-6 weeks)** |
| | Week | Tasks | Priority | |
| |------|-------|----------| |
| | 11-12 | React Native mobile app | ⭐⭐ | |
| | 13-14 | USSD implementation | ⭐ | |
| | 15-16 | SMS gateway integration | ⭐ | |
|
|
| --- |
|
|
| ## **💰 Budget & Resources** |
|
|
| ### **Team Requirements** |
| | Role | Count | Duration | Cost | |
| |------|-------|----------|------| |
| | Frontend Developer | 1-2 | 3 months | $$ | |
| | UI/UX Designer | 1 | 1 month | $ | |
| | QA Tester | 1 | Part-time | $ | |
| | Project Manager | 1 | Part-time | $ | |
|
|
| ### **Technology Costs** |
| | Item | Cost | Notes | |
| |------|------|-------| |
| | Hosting | $0-20/month | Vercel free tier sufficient | |
| | Domain | $10-15/year | .ng domain recommended | |
| | Design Tools | $0-20/month | Figma free tier available | |
| | CI/CD | $0 | GitHub Actions free | |
|
|
| --- |
|
|
| ## **🎯 Success Metrics** |
|
|
| ### **User Metrics** |
| | Metric | Target | Timeframe | |
| |--------|--------|-----------| |
| | Daily Active Users | 1,000 | 3 months | |
| | Monthly Active Users | 10,000 | 3 months | |
| | Retention Rate (30-day) | 50% | 3 months | |
| | Average Session Duration | 5 minutes | 3 months | |
| | Languages Used | 5+ | 3 months | |
|
|
| ### **Technical Metrics** |
| | Metric | Target | Measurement | |
| |--------|--------|-------------| |
| | Lighthouse Score | 90+ | Google Lighthouse | |
| | API Response Time | <500ms | Custom monitoring | |
| | Uptime | 99.9% | Backend health checks | |
| | Error Rate | <1% | Custom monitoring | |
|
|
| ### **Business Metrics** |
| | Metric | Target | Timeframe | |
| |--------|--------|-----------| |
| | Farmer Satisfaction | 4.5/5 | Continuous | |
| | Reduction in Expert Consultations | 30% | 6 months | |
| | Crop Yield Improvement | 10% | 12 months | |
| | Food Security Impact | Measurable | 12 months | |
|
|
| --- |
|
|
| ## **📚 Branding Guidelines** |
|
|
| ### **Color Palette** |
| ``` |
| Primary: #2E7D32 (Green - Agriculture) |
| Secondary: #66BB6A (Light Green) |
| Accent: #FF8F00 (Orange - Nigeria) |
| Background: #FAFAFA (Off White) |
| Surface: #FFFFFF (White) |
| Text: #212121 (Dark Grey) |
| Error: #D32F2F (Red) |
| Warning: #FFA726 (Amber) |
| Info: #1976D2 (Blue) |
| Success: #388E3C (Dark Green) |
| ``` |
|
|
| ### **Typography** |
| ```css |
| /* Primary Font */ |
| font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif; |
| |
| /* Headings */ |
| h1, h2, h3, h4, h5, h6 { |
| font-family: 'Roboto Bold', sans-serif; |
| font-weight: 700; |
| } |
| |
| /* Body */ |
| body { |
| font-size: 16px; |
| line-height: 1.5; |
| } |
| |
| /* For Nigerian languages */ |
| font-family: 'Noto Sans', 'Roboto', sans-serif; |
| ``` |
|
|
| ### **Logo** |
| - **Icon**: Farm/agriculture related (corn, plant, sun) |
| - **Text**: "Aglimate" in bold, modern font |
| - **Tagline**: "Farmer-First Climate-Resilient Advisory" |
| - **Colors**: Green and orange |
|
|
| ### **Tone & Voice** |
| - **Friendly**: Approachable, not intimidating |
| - **Professional**: Expertise, but not jargon-heavy |
| - **Encouraging**: Supportive, positive reinforcement |
| - **Clear**: Simple language, easy to understand |
| - **Respectful**: Values farmer knowledge and experience |
|
|
| --- |
|
|
| ## **📝 Content Guidelines** |
|
|
| ### **Writing for Farmers** |
| 1. **Use Simple Language**: Avoid technical jargon |
| 2. **Short Sentences**: Easy to read and understand |
| 3. **Action-Oriented**: Focus on what farmers should DO |
| 4. **Local Examples**: Use Nigerian farming examples |
| 5. **Visual**: Use icons and images where possible |
| 6. **Multilingual**: Support all major Nigerian languages |
|
|
| ### **Example Messages** |
| ``` |
| ❌ "The optimal planting window for Zea mays is during the initial precipitation events of the rainy season." |
| |
| ✅ "The best time to plant maize is at the beginning of the rainy season, when the first rains start." |
| ``` |
|
|
| --- |
|
|
| ## **🔄 Integration with Backend** |
|
|
| ### **API Contract** |
| All frontend development must respect the existing backend API contract. Any changes to API requirements must be coordinated with the backend developer (Oluchukwu Prosper). |
|
|
| ### **Testing** |
| - [ ] Test all endpoints with mock data before integration |
| - [ ] Validate API responses match frontend expectations |
| - [ ] Handle API errors gracefully |
| - [ ] Implement loading states for all async operations |
| - [ ] Test with slow networks (throttle in dev tools) |
|
|
| --- |
|
|
| ## **📋 Acceptance Criteria** |
|
|
| ### **MVP Acceptance** |
| - [ ] Chat interface works for all supported languages |
| - [ ] Weather dashboard displays correctly |
| - [ ] Multimodal advisory form works |
| - [ ] Responsive on mobile and desktop |
| - [ ] All API endpoints integrated |
| - [ ] Error handling implemented |
| - [ ] Loading states visible |
| - [ ] Offline caching works |
| - [ ] Deployed and accessible |
|
|
| ### **Quality Acceptance** |
| - [ ] Lighthouse score > 90 |
| - [ ] No critical accessibility issues |
| - [ ] No console errors |
| - [ ] All interactive elements work |
| - [ ] Consistent UI across devices |
| - [ ] Fast load times |
| - [ ] Works on 3G network speeds |
|
|
| --- |
|
|
| ## **🏁 Next Steps** |
|
|
| ### **For Frontend Developer** |
| 1. **Review this PRD** carefully |
| 2. **Ask clarifying questions** to Oluchukwu Prosper |
| 3. **Create design mockups** for approval |
| 4. **Set up development environment** |
| 5. **Start with MVP features** (Chat + Weather) |
| 6. **Integrate with backend** early |
| 7. **Test on real devices** (especially low-end Android) |
|
|
| ### **For Backend Developer (Oluchukwu Prosper)** |
| 1. **Provide API documentation** |
| 2. **Set up staging environment** for frontend testing |
| 3. **Monitor backend logs** for frontend integration issues |
| 4. **Optimize backend** based on frontend usage patterns |
| 5. **Add new endpoints** as frontend requires |
|
|
| ### **For Project Manager** |
| 1. **Coordinate between frontend and backend** |
| 2. **Track progress** against timeline |
| 3. **Manage resources** and budget |
| 4. **Organize user testing** with farmers |
| 5. **Plan deployment** and marketing |
|
|
| --- |
|
|
| ## **📞 Contact Information** |
|
|
| | Role | Name | Contact | |
| |------|------|---------| |
| | Backend Developer | Oluchukwu Prosper | prosper@example.com | |
| | Frontend Lead | [TBD] | [TBD] | |
| | Project Manager | [TBD] | [TBD] | |
| | Technical Support | [TBD] | [TBD] | |
|
|
| --- |
|
|
| ## **📜 Appendix** |
|
|
| ### **Glossary** |
| | Term | Definition | |
| |------|------------| |
| | Smallholder Farmer | Farmer with small plot of land (typically <2 hectares) | |
| | Multimodal | Using multiple input types (text, image, voice, etc.) | |
| | RAG | Retrieval-Augmented Generation - AI with access to external knowledge | |
| | LLM | Large Language Model - AI that generates text | |
| | Qwen | Open-source large language model used by Aglimate | |
| | PWA | Progressive Web App - Web app that works like a native app | |
| | USSD | Unstructured Supplementary Service Data - Menu system for feature phones | |
|
|
| ### **References** |
| - [Aglimate Backend Documentation](SYSTEM_OVERVIEW.md) |
| - [FastAPI Documentation](https://fastapi.tiangolo.com/) |
| - [React Documentation](https://react.dev/) |
| - [Vue Documentation](https://vuejs.org/) |
| - [MDN Web Docs](https://developer.mozilla.org/) |
|
|
| --- |
|
|
| **Document Status**: ✅ Approved |
| **Next Review**: July 20, 2026 |
| **Version Control**: Git |
|
|
| --- |
|
|
| *"Empowering Nigerian farmers with AI-driven climate-smart advice."* |
| - **Oluchukwu Prosper, Developer** |
|
|
