Skip to content

FRONTEND_WITH_MOCK_API.md

Latest commit

 

History

History
153 lines (114 loc) · 4.87 KB

FRONTEND_WITH_MOCK_API.md

File metadata and controls

153 lines (114 loc) · 4.87 KB

AirAlert Pro Frontend with Mock API

This document explains how to run the AirAlert Pro frontend application with mock data, making it completely self-contained and deployable without a backend.

Overview

The frontend application has been enhanced to work with a mock API that provides realistic demo data. This allows the application to:

  1. Run completely standalone without any backend
  2. Display realistic air quality data for demonstration
  3. Maintain all functionality including the Gemini AI chatbot
  4. Be easily deployed to hosting platforms like Vercel

Key Features

  • No Backend Required: All data is generated by the mock API
  • Realistic Demo Data: Air quality values, forecasts, and trends that look real
  • Full Functionality: All pages and features work with mock data
  • Gemini AI Chatbot: Works with your provided API key
  • Easy Deployment: Can be deployed to Vercel with a single click

How It Works

1. Mock Data Generation

The application includes a comprehensive mock data generator that creates realistic air quality data for Goa, India, including:

  • Current air quality measurements
  • 24-hour forecasts
  • Historical trends
  • Health recommendations
  • Pollutant breakdowns
  • Alerts and emergency notifications

2. API Service Wrapper

The API service automatically switches between real and mock APIs based on configuration:

  • When VITE_API_URL contains "mock-api", mock data is used
  • When running in development mode, mock data is used by default
  • All API endpoints are supported with realistic mock responses

3. Vercel Integration

When deployed to Vercel, API requests are automatically routed to the mock API handler.

Setup Instructions

1. Environment Configuration

The .env file is already configured for mock data:

VITE_API_URL=http://localhost:5173/mock-api
VITE_GEMINI_API_KEY=AIzaSyBtgRmkYVpxsCuSpYdYbHJATwAy82Yt1Ds

2. Install Dependencies

cd frontend
npm install

3. Run Development Server

npm run dev

The application will be available at http://localhost:5173 with mock data.

4. Build for Production

npm run build

The built files will be in the dist directory.

Deployment to Vercel

One-Click Deploy

Deploy with Vercel

Manual Deployment

  1. Push your code to a GitHub repository
  2. Create a new project on Vercel
  3. Connect your repository
  4. Set environment variables:
    • VITE_GEMINI_API_KEY: Your Gemini API key
  5. Deploy!

The application will automatically use the mock API when deployed to Vercel.

Customization

Modifying Mock Data

To customize the mock data:

  1. Edit src/services/mockApi.js
  2. Adjust value ranges in the generation functions
  3. Modify locations in the locations array
  4. Change AQI categories or calculation methods

Adding New Endpoints

To add new mock endpoints:

  1. Add a new method to the MockApiService class
  2. Add the endpoint to the Vercel handler in mock-api-handler.js
  3. Add the method to the airQualityAPI object in api.js

Testing

Verify Mock Data

Run the test script to verify mock data generation:

cd frontend
node test-mock-api.js

Test API Endpoints

When running the development server, you can test API endpoints directly:

  • http://localhost:5173/mock-api/current
  • http://localhost:5173/mock-api/forecast
  • http://localhost:5173/mock-api/locations

Gemini AI Chatbot

The chatbot functionality works with your Gemini API key:

  • All air quality data is contextualized in chat responses
  • Health recommendations are based on current mock data
  • The chatbot provides realistic responses about air quality

Troubleshooting

Common Issues

  1. Blank Pages:

    • Check browser console for errors
    • Verify all dependencies are installed

  2. API Errors:

    • Ensure VITE_API_URL is correctly configured
    • Check that the mock API handler is working

  3. Chatbot Not Responding:

    • Verify VITE_GEMINI_API_KEY is set correctly
    • Check browser console for Gemini API errors

Getting Help

  1. Check the browser console for detailed error messages
  2. Refer to MOCK_API.md for detailed documentation
  3. Review the mock data generation in src/services/mockApi.js

Benefits

  1. Zero Backend Dependency: Run the complete application with just static files
  2. Easy Deployment: Deploy to any static hosting platform
  3. Realistic Demo: Impress users with realistic data without real APIs
  4. Development Friendly: Work offline without internet connectivity
  5. Cost Effective: No backend hosting costs for demos and showcases

The AirAlert Pro frontend with mock API provides a complete, professional demonstration of the application without requiring any backend infrastructure.