AtmosIQ – AI Powered Weather Analytics Platform

AtmosIQ is a modern, production-quality, full-stack weather intelligence and climate analytics platform. Inspired by the premium minimalism of Apple, Linear, and Vercel, AtmosIQ features full JWT authentication (with Google OAuth mock and Guest mode), interactive canvas particle weather backgrounds, dynamic Leaflet mapping overlays, zoomable Recharts trends, a Gemini-powered AI chatbot assistant, and custom report compiled downloads (PDF, Excel, CSV).

---

📱 User Interface Preview

Here is a quick look at the AtmosIQ dashboard, projections, analytics, interactive map overlays, and the AI assistant:

📱 Dashboard	📈 Meteorological Projections
📊 Meteorological Analytics	🗺️ Interactive Weather Map
📜 Historical Climatic Records	🤖 AI Atmospheric Assistant

---

Architecture Design

AtmosIQ uses a decoupled full-stack architecture built on clean, maintainable patterns:

                  ┌──────────────────────┐
                  │   Vite React Client  │ (HTML5 Canvas Background,
                  └──────────┬───────────┘  Recharts, Leaflet Maps)
                             │
                      HTTPS / REST / JWT
                             │
                  ┌──────────▼───────────┐
                  │    Python Flask API  │ (Routing Blueprints, Controllers)
                  └──────────┬───────────┘
                             │
         ┌───────────────────┼───────────────────┐
         │                   │                   │
┌────────▼────────┐ ┌────────▼────────┐ ┌────────▼────────┐
│  MongoDB Client │ │   OpenWeather   │ │   Google Gemini │
│ (History Logs)  │ │   Weather API   │ │     API SDK     │
└─────────────────┘ └─────────────────┘ └─────────────────┘

---

Tech Stack

Frontend

• React.js & Vite (Core engine)
• Tailwind CSS (Styling styling system)
• Framer Motion (Subtle micro-animations)
• Recharts (Interactive trend line/area charts)
• React Leaflet (Map coordinates layers)
• React Icons (Feather icon sets)

Backend

• Python Flask (Controllers, services, routes, middleware, models structure)
• PyMongo (MongoDB adapter)
• PyJWT & Bcrypt (Security hashing and session validations)
• ReportLab (Binary PDF creation)
• OpenPyXL (Binary Excel spreadsheets compilation)
• Google GenerativeAI SDK (Gemini 1.5 Flash assistant integrations)

---

Key Features

1. Animated Weather Backdrops: HTML5 canvas drawing engine that renders slanted rain, snow drift, wind flurries, cloud puffs, and storm flashes matching the selected city's weather.
2. Environmental Intelligence: Computes vector index ratings (Comfort Index, Running, Cycling, Photography, solar potential, driving visibility, laundry drying, and heat stress).
3. AI Chatbot & Automatic Summaries: Chat box powered by Gemini with preloaded templates, and auto-generated weekly forecasts and chemical pollutant breakdowns.
4. Interactive Overlays: Map controls showing street or dark base maps, and overlays (Temperature, Rain, Wind, Clouds) matching geocoded bounds.
5. Data Exporter: Download customized datasets of logged records into CSV files, styled Excel worksheets, or PDF files.
6. Admin Dashboard: System logs checks, active API key status flags, users count, and CPU/Memory usage indicators.

---

Folder Directory Structure

AtmosIQ/
├── backend/
│   ├── config/          # Loads environmental variables (.env)
│   ├── database/        # MongoClient ping connection 
│   ├── models/          # MongoDB wrappers (User, Weather, AQI, Favorites, Reports)
│   ├── middleware/      # JWT filter and Global error captures
│   ├── utils/           # Math formulas for environmental index scores
│   ├── services/        # Weather, AQI, Gemini, report compilers, analytics
│   ├── controllers/     # Controller modules mapping actions
│   ├── routes/          # Blueprint routes mapping URLs
│   ├── .env             # Backend variables
│   └── app.py           # API Bootstrapper
├── client/
│   ├── public/          # PWA sw.js and manifest.json
│   ├── src/
│   │   ├── context/     # AuthContext, ThemeContext, SettingsContext
│   │   ├── components/  # WeatherBg canvas, Card panels, Skeleton lines
│   │   ├── layouts/     # DashboardLayout shell with search bar
│   │   ├── pages/       # Landing, Login, Dashboard, Forecast, Analytics, Map, AI
│   │   ├── services/    # api.js client, weatherService, aiService, reports
│   │   ├── hooks/       # useNotification local alerts
│   │   ├── main.jsx     # PWA sw hook registrations
│   │   └── App.jsx      # Base router
│   ├── .env             # Client variables
│   ├── tailwind.config.js
│   └── postcss.config.js
└── README.md

---

Setup & Installation

Prerequisite Services

• Python 3.8+
• Node.js 18+
• MongoDB instance (Listening on default port 27017)

1. Install Backend

Navigate to the root and install backend python requirements:

python -m pip install pymongo python-dotenv PyJWT bcrypt openpyxl pandas reportlab flask-cors google-generativeai

Configure backend/.env:

PORT=5000
MONGO_URI=mongodb://localhost:27017/atmosiq
JWT_SECRET=atmosiq_secret_key_2026_jwt_token_auth
OPENWEATHER_API_KEY=your_openweather_api_key
GEMINI_API_KEY=your_gemini_api_key
FLASK_ENV=development

Note: If API Keys are left blank, AtmosIQ activates Fail-Safe simulation mode generating stable, scientifically aligned weather charts and chatbot summaries.

Boot the Flask API:

python -m backend.app

2. Install Client

Navigate into client/ folder and install dependencies:

cd client
npm install

Configure client/.env:

VITE_API_URL=http://localhost:5000/api

Start the Vite development web server:

npm run dev

---

Future Scope

• Live weather notifications push triggers.
• Weather timeline historical maps replay.
• Machine Learning (scikit-learn) weather predictions models.

License

MIT License. Created by Google Deepmind Advanced Agentic Coding team.