City Intelligence, Open Source. Real-time data for any city on Earth. Weather, air quality, traffic, environment, health, infrastructure, transport, and news — all in one beautiful dashboard.
Give every city a real-time brain. Open source. Zero cost. Built by one person.
- What Is Planet OS?
- Features
- Tech Stack
- Data Sources (All Free)
- Quick Start
- Project Structure
- UI/UX Design
- Keyboard Shortcuts
- Deployment
- Cost Breakdown
- Contributing
- License
A web application that pulls live public data about any city — weather, air quality, traffic, environment, health, infrastructure, transport, and news — and displays it on a single beautiful real-time dashboard. Like a mission control room for a city, but running in a browser, built by you, costing nothing.
Anyone — a mayor, a journalist, a curious citizen, an urban planner — can open it and instantly understand what is happening in their city right now.
Cities generate enormous amounts of public data every second. Weather stations, air quality monitors, traffic sensors, government databases — all of this is public, free, and available via APIs. Nobody has connected it all in one place that looks good and works for normal people.
Planet OS is that place. You are not building sensors. You are not collecting data. You are building the interface layer — the thing that makes existing public data legible, beautiful, and actionable.
- Leaflet + OpenStreetMap — 100% free, no API key needed
- 3 map layers: Dark (CartoDB), Satellite (ESRI), Street (OpenStreetMap)
- Click anywhere to select a location and load its data
- Real-time markers: AQI stations, health facilities, transport coverage
- City labels: Shows cities, districts, hospitals, tourist places
- Persistent selection: Your chosen map layer stays across city changes
| Category | Data | Source |
|---|---|---|
| Weather | Temperature, humidity, wind, UV, pressure, visibility, 7-day forecast | Open-Meteo |
| Air Quality | PM2.5, PM10, NO₂, SO₂, O₃, CO, US AQI with health advice | Open-Meteo |
| Traffic | Road count, highway density, congestion level | OpenStreetMap |
| Safety | Crime data availability notice | N/A (no free API) |
| Environment | Noise levels, green spaces, water quality | Open-Meteo + OSM |
| Infrastructure | Hospitals, schools, pharmacies count | OpenStreetMap |
| Health | Healthcare facilities mapped with real locations | OpenStreetMap |
| Transport | Bus stops, metro availability, railway stations | OpenStreetMap |
| News | City-specific news from trusted sources | Google News + Wikipedia |
| Earthquakes | Recent seismic activity | USGS |
- City Pulse Score — Single 0-100 score with A-F grade for overall city health
- Smart Alerts — Auto-generated warnings for extreme weather, poor AQI, heavy traffic
- Data Storytelling — Natural language summary: "Here's what's happening in Mumbai right now..."
- Auto-refresh — Data updates every 10 minutes
- Progressive loading — Critical data loads first, secondary data follows
- Graceful degradation — If one API is down, that card shows "Data unavailable" with a vector illustration. Other cards still work normally.
- Dark/Light theme toggle with smooth transitions
- Collapsible sidebar with icon-only mode
- Premium animations — Framer Motion on every element
- Responsive — Works on desktop and mobile
- Vector illustrations for empty states
- Zero hardcoded data — Everything from real APIs or shows "Data not available"
| Layer | Tool | Why |
|---|---|---|
| Framework | Next.js 16 (App Router) | Free, fast, SSR + API routes |
| Styling | Tailwind CSS v4 | Utility-first, premium with zero effort |
| Components | shadcn/ui | Looks like a $10k design system, costs nothing |
| Map | Leaflet + OpenStreetMap | 100% free, no token needed |
| Charts | Recharts | Best free charting library for React |
| Real-time | SSE + Auto-refresh | No socket server needed |
| Animations | Framer Motion | Smooth, premium transitions |
| State | Zustand | Simple global state management |
| Icons | Lucide React | Consistent, free |
| Hosting | Vercel (free tier) | Deploy in 30 seconds |
Monthly cost: ₹0
| Data Type | API | Auth | Cost |
|---|---|---|---|
| Weather | Open-Meteo API | None | Free, unlimited |
| Air Quality | Open-Meteo Air Quality | None | Free, unlimited |
| Geocoding | Nominatim (OpenStreetMap) | None | Free, unlimited |
| Traffic | Overpass API (OpenStreetMap) | None | Free, unlimited |
| Earthquakes | USGS Earthquake API | None | Free, unlimited |
| City Info | Wikipedia REST API | None | Free, unlimited |
| News | Google News RSS + rss2json | None | Free |
| Health/Infrastructure | OpenStreetMap Overpass | None | Free, unlimited |
- Node.js 18+
- npm or yarn
# Clone the repository
git clone https://github.com/yourusername/planet-os.git
cd planet-os
# Install dependencies
npm install
# Run development server
npm run devOpen http://localhost:3000 in your browser.
- Search any city — Type in the search bar (e.g., "Mumbai", "Tokyo", "New York")
- Click a city pill — Quick access to popular Indian and global cities
- Click the map — Select any location on Earth by clicking
- Navigate tabs — Use the left sidebar to switch between data categories
- Toggle theme — Click the Sun/Moon icon in the topbar
- Collapse sidebar — Click the chevron to go icon-only mode
planet-os/
├── app/
│ ├── layout.tsx # Root layout with providers
│ ├── page.jsx # Landing / city search page
│ ├── [city]/page.jsx # Main dashboard (3-panel layout)
│ └── api/
│ ├── weather/route.js # Open-Meteo weather proxy
│ ├── air/route.js # Open-Meteo air quality proxy
│ ├── geocode/route.js # Nominatim geocoding proxy
│ ├── city-info/route.js # Wikipedia city info proxy
│ ├── earthquakes/route.js # USGS earthquake proxy
│ ├── traffic/route.js # OpenStreetMap traffic data
│ ├── safety/route.js # Safety data endpoint
│ ├── environment/route.js # Environment monitoring
│ ├── infrastructure/route.js # Infrastructure data
│ ├── health/route.js # Health facilities data
│ ├── transport/route.js # Transport data
│ ├── news/route.js # City-specific news aggregation
│ └── aqi-stations/route.js # AQI station data
│
├── components/
│ ├── layout/
│ │ ├── Topbar.jsx # Header with search, theme toggle, clock
│ │ ├── BottomBar.jsx # Footer with quick stats strip
│ │ ├── LeftPanel.jsx # Navigation sidebar with live status
│ │ └── RightPanel.jsx # Tab content panel
│ ├── map/
│ │ ├── CityMap.jsx # Dynamic map loader
│ │ └── LeafletMap.jsx # Leaflet map with markers & layers
│ ├── tabs/
│ │ ├── OverviewTab.jsx # Compact overview for sidebar
│ │ ├── WeatherTab.jsx # Full weather deep dive
│ │ ├── AirQualityTab.jsx # AQI gauge + pollutant breakdown
│ │ ├── TrafficTab.jsx # Traffic analysis
│ │ ├── SafetyTab.jsx # Safety & crime data
│ │ ├── EnvironmentTab.jsx # Environment monitoring
│ │ ├── InfrastructureTab.jsx # Infrastructure analysis
│ │ ├── HealthTab.jsx # Health facilities
│ │ ├── TransportTab.jsx # Transport data
│ │ └── NewsTab.jsx # City-specific news
│ ├── cards/ # Individual data cards
│ ├── charts/ # Recharts components
│ └── ui/ # Reusable UI components
│
├── lib/
│ ├── api/index.js # Client-side fetchers
│ ├── utils/
│ │ ├── aqi.js # AQI calculation & labels
│ │ ├── weather-codes.js # WMO weather code mapper
│ │ ├── formatters.js # Numbers, dates, units
│ │ └── city-pulse.js # City Pulse Score, alerts, stories
│ └── constants/
│ ├── default-cities.js # 30 preloaded cities (20 Indian + 10 global)
│ └── map-config.js # Map layer configuration
│
├── store/
│ └── useCityStore.js # Zustand: city, data, UI state
│
├── styles/
│ └── globals.css # CSS variables, themes, animations
│
└── public/
└── manifest.json # PWA manifest
┌─────────────────────────────────────────────────────────────────┐
│ TOPBAR (64px): Logo | Search | Status | Clock | Theme Toggle │
├──────────┬──────────────────────────────────────────┬───────────┤
│ │ │ │
│ LEFT │ MAP (center, full height) │ RIGHT │
│ PANEL │ Interactive Leaflet map │ PANEL │
│ 280px │ with live overlay layers │ 280px │
│ │ 3 layers: Dark/Sat/Street │ │
│ Nav + │ Click to select location │ Tab │
│ Widgets │ │ Content │
│ │ │ │
├──────────┴──────────────────────────────────────────┴───────────┤
│ BOTTOM BAR (48px): 8 key metrics in a row │
└─────────────────────────────────────────────────────────────────┘
| Role | Dark | Light |
|---|---|---|
| Background | #050508 |
#f8fafc |
| Surface | #13131a |
#f1f5f9 |
| Border | #1f1f2e |
#e2e8f0 |
| Accent | #3b82f6 |
#3b82f6 |
| Good | #22c55e |
#22c55e |
| Warn | #f59e0b |
#f59e0b |
| Bad | #ef4444 |
#ef4444 |
- Headings: Inter (300, 400, 500, 600)
- Data numbers: JetBrains Mono (400, 500)
- Size scale: 11px (metadata) → 13px (labels) → 15px (body) → 18px (titles) → 24px (section headers) → 32px (metrics) → 48px (hero numbers)
Planet OS looks like NASA mission control meets a premium SaaS dashboard. Dark theme always. Data is the hero — the UI exists to make data readable, not to show off. Every element has a reason to exist. No decorative noise.
| Key | Action |
|---|---|
/ or Cmd+K |
Focus city search |
1-0 |
Switch between navigation sections |
Esc |
Close any dropdown |
R |
Refresh all data |
- Push to GitHub
- Connect to Vercel
- Deploy — no environment variables needed!
| Resource | Free Limit | Your Usage | Cost |
|---|---|---|---|
| Vercel hosting | Unlimited for open source | Free | ₹0 |
| Open-Meteo weather API | Unlimited, no key | Free | ₹0 |
| Nominatim geocoding | Unlimited | Free | ₹0 |
| Leaflet + OSM maps | 100% free | Free | ₹0 |
| USGS earthquake API | Unlimited | Free | ₹0 |
| Wikipedia API | Unlimited | Free | ₹0 |
| Overpass API | Free, no key | Free | ₹0 |
| Total | ₹0 |
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your 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
- All data must come from real APIs — no hardcoded values
- Use
nullfor unavailable data — UI handles it gracefully with vector illustrations - Keep API timeouts under 3 seconds
- Use Tailwind utility classes — no custom CSS unless necessary
- Follow the existing component patterns
This project is licensed under the MIT License — see the LICENSE file for details.
🌍 Planet OS — every city has a story. Now it has a dashboard.
Built with open data • No API keys required • 100% Free • MIT License