OptiH2 – Green Hydrogen Infrastructure Mapping

A full-stack web application for visualizing, analyzing, and optimizing India’s hydrogen infrastructure network using real-time and demo data.

---

✨ Features

• Interactive Map – Explore hydrogen infrastructure across India with layered views (plants, pipelines, renewables, demand centers).
• Real-Time Data – Integrates with external APIs (NASA POWER, World Bank, OpenStreetMap).
• Optimization Tools – AI-powered network optimization for planning and analysis.
• State-Level Insights – Filter and analyze infrastructure by Indian states.
• Seamless Data Integration – Shared real-data API powering both optimization and map views.
• Fallback System – Automatic switch to demo data when the backend server is unavailable.

---

🚀 Quick Start

Option 1: Frontend Only (Recommended for Development)

cd client
npm install
npm run dev

Runs the frontend with demo data (no backend required).

Option 2: Full Stack (Frontend + Backend)

# Install frontend dependencies
cd client
npm install

# Install backend dependencies
cd ../Server
npm install

# Start both servers
cd ../client
npm run dev:full

Option 3: Manual Start

# Terminal 1 - Frontend
cd client
npm run dev

# Terminal 2 - Backend
cd Server
npm run dev

---

🔗 API Integration

Both the Optimize Page and Map Page consume the shared endpoint: /api/real-data

• Optimize Page → Uses real data for AI-driven optimization.
• Map Page → Displays the same dataset geographically.
• Resilient Fallback → Switches to demo data if the backend is offline.

---

📊 Data Sources

• External APIs – NASA POWER, World Bank, OpenStreetMap.
• Backend API – Node.js server with additional datasets.
• Demo Data – Built-in samples for offline development.

---

🛠 Development

Frontend

• Location: client/
• Framework: Next.js 15 (TypeScript)
• Port: 3000

Backend

• Location: Server/
• Framework: Express.js + Socket.IO
• Port: 5000

Key Files

• client/hooks/useMapData.ts – Map data management
• client/app/api/real-data/route.ts – Shared API endpoint
• client/app/map/page.tsx – Map visualization
• client/app/optimize/page.tsx – Optimization interface

---

⚡ Troubleshooting

• Backend Not Running → App automatically falls back to demo data.
• API Errors → Check the browser console for detailed logs.
• Map Not Loading → Ensure internet access (for OpenStreetMap tiles).

---

🔑 Environment Variables

Create .env.local inside client/:

NEXT_PUBLIC_API_URL=http://localhost:5000/api

---

📜 License

This project is licensed under the MIT License.