NigerAgriConnect - MVP

This is a Next.js application built with Firebase, aiming to connect Nigerien farmers with experts, resources, and markets. This README provides instructions for setting up, running, and deploying the Minimum Viable Product (MVP).

Features (MVP)

• Authentication: User registration, login, password reset using Firebase Auth.
• Weather: Display weather information for selected Niger regions (requires setup).
• Expert Advice: Browse and view agricultural advice articles (data stored in Firestore).
• Marketplace: Browse and view agricultural products (data stored in Firestore).
• User Profile: View basic user profile information.
• Settings: Basic placeholder settings page.
• Admin Dashboard: Basic dashboard to view users and content (requires admin role setup).

Prerequisites

• Node.js (v18 or later recommended)
• npm or yarn
• Firebase Account
• Google Cloud Account (for Google Maps API Key)
• OpenWeatherMap Account (for Weather API Key - Optional, uses mock data otherwise)

Setup Instructions

1. Clone the Repository:

   git clone <your-repository-url>
   cd niger-agri-connect

2. Install Dependencies:

   npm install
   # or
   yarn install

3. Firebase Project Setup:

   • Go to the Firebase Console.
   • Create a new Firebase project or use an existing one.
   • Navigate to Project Settings > General.
   • Under "Your apps", click the Web icon (</>) to add a web app.
   • Register the app (give it a nickname, e.g., "NigerAgriConnect Web"). Do not enable Firebase Hosting at this stage if you plan to deploy via Vercel or another method first.
   • Copy the firebaseConfig object provided. You'll need these values for your environment variables.
   • Enable Authentication:
     • Go to Build > Authentication > Sign-in method.
     • Enable the Email/Password provider.
   • Enable Firestore Database:
     • Go to Build > Firestore Database.
     • Click Create database.
     • Start in Production mode.
     • Choose a Firestore location (e.g., eur3 for Europe).
     • Go to the Rules tab and update the security rules. For development, you can use permissive rules, but secure these properly for production.

       rules_version = '2';
       service cloud.firestore {
         match /databases/{database}/documents {
           // Allow read access to public data like advice and products
           match /advice/{adviceId} {
             allow read: if true;
             // Allow write only for authenticated users (adjust for admin later)
             allow write: if request.auth != null;
           }
           match /products/{productId} {
             allow read: if true;
             // Allow write only for authenticated users (adjust for admin later)
             allow write: if request.auth != null;
           }
           // Allow users to read/write their own profile data
           match /users/{userId} {
              allow read, write: if request.auth != null && request.auth.uid == userId;
           }
            // Allow admins to read all user data (implement admin check)
            match /users/{userId} {
             allow read: if request.auth != null && get(/databases/$(database)/documents/users/$(request.auth.uid)).data.role == 'admin';
            }
            // Secure other collections as needed
         }
       }
       

       Note: Implementing a proper admin role check usually involves Firebase Functions setting custom claims or checking a role field in the user's document as shown above. The rule provided assumes a role field exists in the /users/{userId} document.

4. Google Maps API Key:

   • Go to the Google Cloud Console.
   • Create a new project or select an existing one.
   • Go to APIs & Services > Credentials.
   • Click Create Credentials > API key.
   • Copy the generated API key.
   • Important: Restrict the API key to prevent unauthorized use. Add Application restrictions (HTTP referrers - your website domain) and API restrictions (Select "Maps JavaScript API").
   • Ensure the Maps JavaScript API is enabled in your Google Cloud project (APIs & Services > Library).

5. OpenWeatherMap API Key (Optional):

   • Go to OpenWeatherMap.
   • Sign up for an account (the free tier is usually sufficient).
   • Navigate to your account settings > API keys tab.
   • Generate or copy an existing API key.

6. Environment Variables:

   • Create a file named .env.local in the root of the project.
   • Add the following variables, replacing the placeholder values with your actual keys/credentials from the steps above:

   # Firebase Configuration (from Firebase Console)
   NEXT_PUBLIC_FIREBASE_API_KEY=YOUR_FIREBASE_API_KEY
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=YOUR_FIREBASE_AUTH_DOMAIN
   NEXT_PUBLIC_FIREBASE_PROJECT_ID=YOUR_FIREBASE_PROJECT_ID
   NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=YOUR_FIREBASE_STORAGE_BUCKET
   NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=YOUR_FIREBASE_MESSAGING_SENDER_ID
   NEXT_PUBLIC_FIREBASE_APP_ID=YOUR_FIREBASE_APP_ID
   
   # Google Maps API Key (from Google Cloud Console)
   NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=YOUR_GOOGLE_MAPS_API_KEY
   
   # OpenWeatherMap API Key (Optional - from OpenWeatherMap)
   NEXT_PUBLIC_OPENWEATHERMAP_API_KEY=YOUR_OPENWEATHERMAP_API_KEY
   
   # Genkit/Google AI (if using GenAI features - requires separate setup)
   # GOOGLE_GENAI_API_KEY=YOUR_GOOGLE_AI_API_KEY

7. Populate Initial Data (Optional):

   • You might want to manually add some initial advice articles or product listings to your Firestore database via the Firebase Console to test the application.
   • Create collections named advice and products.
   • Add documents with fields matching the structures in src/types/index.d.ts (e.g., for advice: title, author, date, summary, imageUrl, imageHint, likes, content).

Running the Application Locally

1. Start the Development Server:

   npm run dev
   # or
   yarn dev

   The application will typically be available at http://localhost:9002.

2. (Optional) Run Genkit Development Server (If using GenAI features): If you have GenAI flows defined, run the Genkit server in a separate terminal:

   npm run genkit:dev

Building for Production

npm run build
# or
yarn build

This command compiles the Next.js application for production deployment.

Deployment

You can deploy this Next.js application to various platforms like Vercel (recommended for Next.js) or Firebase Hosting.

Deploying to Vercel

1. Push your code to a Git repository (GitHub, GitLab, Bitbucket).
2. Go to Vercel and sign up or log in.
3. Click Add New... > Project.
4. Import your Git repository.
5. Vercel should automatically detect it as a Next.js project.
6. Configure Environment Variables: Add all the variables from your .env.local file into the Vercel project settings.
7. Click Deploy.

Deploying to Firebase Hosting

1. Install Firebase CLI:

   npm install -g firebase-tools

2. Login to Firebase:

   firebase login

3. Initialize Firebase in your project:

   firebase init hosting

   • Select Use an existing project and choose your Firebase project.
   • Specify out as your public directory (this is the default Next.js static export build output directory, adjust if necessary - see note below).
   • Configure as a single-page app: Yes (usually recommended for Next.js with routing).
   • Set up automatic builds and deploys with GitHub: No (for manual deployment initially).

   Note on Next.js & Firebase Hosting: Firebase Hosting primarily serves static files. For full Next.js features (SSR, App Router Server Components, API Routes), you typically need Cloud Functions or Cloud Run integration.

   • Option A (Static Export): If your app doesn't heavily rely on server-side features, you can configure next.config.ts for static export (output: 'export') and deploy the out directory. This limits dynamic features.
   • Option B (Cloud Functions/Run Integration - More Complex): Set up Firebase Functions or Cloud Run to handle Next.js server-side rendering. This requires more configuration. Follow the official Firebase documentation for hosting Next.js applications. Vercel is generally simpler for full-featured Next.js apps.

4. Build the Application:

   npm run build
   # If using static export: configure next.config.ts first
   # If deploying dynamic Next.js: You might need a different build/deploy setup

5. Deploy to Firebase Hosting:

   firebase deploy --only hosting

Using the Application

• Register/Login: Create an account or log in using the forms.
• Browse: Navigate through Weather, Advice, and Marketplace using the sidebar.
• View Details: Click on advice cards or marketplace items to see more details.
• Profile/Settings: Access basic profile and settings pages when logged in.
• Admin: If your user is configured as an admin (requires manual setup in Firestore or via custom claims), access the Admin Dashboard.

Next Steps & Potential Improvements

• Data Fetching: Replace mock data with actual Firestore database calls.
• Error Handling: Implement more robust error handling across the application.
• Form Validations: Enhance form validations.
• Admin Functionality: Build out user/content management features in the admin dashboard.
• Expert/Seller Features: Allow experts to post advice and sellers to list products.
• User Roles & Permissions: Implement a proper role-based access control system.
• Search & Filtering: Improve search and filtering capabilities.
• Image Uploads: Integrate Firebase Storage for image uploads.
• Notifications: Add in-app or push notifications.
• GenAI Integration: Implement and refine Genkit flows for AI features.
• Testing: Add unit and integration tests.
• Security Rules: Harden Firestore security rules for production.
• Localization: Add support for local languages (Hausa, Zarma, etc.).