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
1.2 Chat Display
1.3 Session Management
API Integration
const response = await fetch('/ask', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
query: userMessage,
session_id: currentSessionId
})
});
{
"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
2.2 GPS/Location
2.3 Multimodal Form
API Integration
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
});
{
"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
3.2 Forecast
3.3 Alerts
API Integration
const response = await fetch('/weather/current?q=Lagos,Nigeria&aqi=yes');
const response = await fetch('/weather/forecast?q=Lagos&days=7&alerts=yes');
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
4.2 Article Viewer
4.3 RAG Integration
🎨 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
5.2 Usage History
5.3 Feedback
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
6.2 Emergency Contacts
6.3 Market Information
🔌 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
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
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
:root {
--breakpoint-xs: 0px;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
}
@media (max-width: 575.98px) {
}
@media (min-width: 576px) {
}
@media (min-width: 768px) {
}
Mobile-Specific Requirements
Accessibility Requirements
⚡ 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
Progressive Web App (PWA)
{
"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
Implementation
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
Privacy
📊 Analytics & Monitoring
Frontend Tracking
Implementation
class Analytics {
static trackEvent(category, action, label = null, value = null) {
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
# 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
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
h1, h2, h3, h4, h5, h6 {
font-family: 'Roboto Bold', sans-serif;
font-weight: 700;
}
body {
font-size: 16px;
line-height: 1.5;
}
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
- Use Simple Language: Avoid technical jargon
- Short Sentences: Easy to read and understand
- Action-Oriented: Focus on what farmers should DO
- Local Examples: Use Nigerian farming examples
- Visual: Use icons and images where possible
- 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
📋 Acceptance Criteria
MVP Acceptance
Quality Acceptance
🏁 Next Steps
For Frontend Developer
- Review this PRD carefully
- Ask clarifying questions to Oluchukwu Prosper
- Create design mockups for approval
- Set up development environment
- Start with MVP features (Chat + Weather)
- Integrate with backend early
- Test on real devices (especially low-end Android)
For Backend Developer (Oluchukwu Prosper)
- Provide API documentation
- Set up staging environment for frontend testing
- Monitor backend logs for frontend integration issues
- Optimize backend based on frontend usage patterns
- Add new endpoints as frontend requires
For Project Manager
- Coordinate between frontend and backend
- Track progress against timeline
- Manage resources and budget
- Organize user testing with farmers
- 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
Document Status: ✅ Approved
Next Review: July 20, 2026
Version Control: Git
"Empowering Nigerian farmers with AI-driven climate-smart advice."
- Oluchukwu Prosper, Developer
