A modern, AI-powered sustainable agriculture dashboard designed to help smallholder farmers optimize crop yields, manage water resources, and make data-driven farming decisions. Built with Next.js, Supabase, and Tailwind CSS.
- Real-time Weather Monitoring - Track temperature, humidity, and wind conditions
- Plant Growth Tracking - Monitor crop development through different growth stages
- Production Analytics - Compare current vs. previous year production with interactive charts
- Quick Stats - View total yield, water savings, active farms, and soil health at a glance
- Recent Activity Feed - Stay updated with latest farming activities and events
- Yield Trend Predictions - AI-powered forecasting for crop yields
- Water Usage Optimization - Track and optimize irrigation efficiency
- Soil Health Analysis - Comprehensive radar charts for NPK levels and pH monitoring
- Crop Distribution - Visual breakdown of crop types across your farms
- AI-Powered Insights - Personalized recommendations based on weather, soil, and crop data
- Farming Action Tasks - Prioritized to-do list for optimal farm management
- Predictive Growth Analytics - Track expected vs. actual crop development
- Impact Simulator - Visualize the effects of different farming decisions
- Planting Calendar - Track planting dates and crop lifecycles
- Irrigation Schedules - Automated watering reminders and optimization
- Harvest Planning - Forecast harvest dates and quantities
- Transaction History - Track all income and expenses
- Payment Methods - Manage multiple payment options
- Financial Analytics - Monitor revenue trends and profitability
- Profile Management - Update farm and personal information
- Notification Preferences - Customize alerts and reminders
- Appearance Settings - Light/dark mode and language options
- Security Controls - Two-factor authentication and password management
- Framework: Next.js 15 (App Router)
- Database: Supabase (PostgreSQL)
- Styling: Tailwind CSS v4
- UI Components: shadcn/ui
- Charts: Recharts
- Icons: Lucide React
- TypeScript: Type-safe development
Before you begin, ensure you have:
- Node.js 18+ installed
- A Supabase account and project
- Git for version control
```bash git clone cd harvest-dashboard ```
```bash npm install ```
Create a .env.local file in the root directory with your Supabase credentials:
```env NEXT_PUBLIC_SUPABASE_URL=your_supabase_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key SUPABASE_SERVICE_ROLE_KEY=your_service_role_key ```
These variables are automatically provided when you connect Supabase integration in v0.
Run the SQL scripts to create tables and seed initial data:
Option A: Using v0 (Recommended)
- Click "Run Script" for
scripts/001_create_tables.sql - Click "Run Script" for
scripts/002_seed_data.sql
Option B: Using Supabase Dashboard
- Go to your Supabase project dashboard
- Navigate to SQL Editor
- Copy and run
scripts/001_create_tables.sql - Copy and run
scripts/002_seed_data.sql
```bash npm run dev ```
Open http://localhost:3000 in your browser to see the dashboard.
``` harvest-dashboard/ ├── app/ │ ├── analytics/ # Analytics page with charts │ ├── harvest/ # AI recommendations and optimization │ ├── schedules/ # Planting and irrigation schedules │ ├── payments/ # Financial tracking │ ├── settings/ # User settings and preferences │ ├── layout.tsx # Root layout with sidebar │ ├── page.tsx # Dashboard home page │ └── globals.css # Global styles and theme ├── components/ │ ├── analytics/ # Analytics-specific components │ ├── harvest/ # Harvest optimization components │ ├── sidebar.tsx # Navigation sidebar │ ├── weather-card.tsx # Weather display │ ├── production-chart.tsx # Production comparison chart │ └── ... # Other reusable components ├── lib/ │ └── supabase/ │ ├── client.ts # Browser Supabase client │ └── server.ts # Server Supabase client ├── scripts/ │ ├── 001_create_tables.sql # Database schema │ └── 002_seed_data.sql # Sample data └── public/ # Static assets ```
The application uses the following main tables:
- farms - Farm information and metadata
- crops - Crop tracking and growth stages
- weather_data - Historical weather records
- soil_readings - Soil health measurements (NPK, pH, moisture)
- recommendations - AI-generated farming recommendations
- activities - Recent farming activities and events
- production_data - Monthly production tracking
- schedules - Planting and irrigation schedules
- transactions - Financial records
All tables include Row Level Security (RLS) policies for data protection.
The dashboard uses a nature-inspired color palette:
- Primary: Forest Green (
#1a4d2e) - Accent: Lime Yellow (
#d4ff00) - Neutrals: Warm grays and off-whites
- Typography: Geist Sans (body), Geist Mono (code)
- Create new components in the
components/directory - Add new pages in the
app/directory - Update database schema in new SQL migration files
- Follow the existing patterns for Supabase data fetching
- Use TypeScript for type safety
- Follow React Server Components patterns
- Use Tailwind CSS utility classes
- Keep components small and focused
- Use semantic HTML elements
The dashboard is fully responsive and optimized for:
- Desktop (1920px+)
- Laptop (1024px - 1919px)
- Tablet (768px - 1023px)
- Mobile (320px - 767px)
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Design inspiration from modern agricultural platforms
- Built with v0 by Vercel
- Icons by Lucide
- UI components from shadcn/ui
For support, please send an email to ezraktoo09@gmail.com.
Built with 💚 for sustainable agriculture and smallholder farmers worldwide.