A production-focused, real-time dashboard for everything you care about.
CyberDash is my personal, all-in-one status screen. It's a single Next.js app that pulls data from my local hardware (an ESP8266) and a bunch of global APIs.
The best part? It's location-aware. If you allow location access, it automatically figures out your local currency and pulls relevant weather and country data, defaulting to Indonesian Rupiah (IDR) if not.
- 🌡️ Real-time Indoor Stats: Hooks directly into a Blynk-powered ESP8266 to stream your indoor temperature, humidity, pressure, and air quality.
- 🌦️ Hyper-Local Weather: Uses your browser's location to fetch detailed local weather from Open-Meteo. You get current conditions (like UV index and AQI), a 12-hour hourly view, and a full 7-day forecast.
- 🔍 Location Search: Manually search and select any location worldwide with auto-suggestions powered by Open-Meteo Geocoding API. Your selected location is saved locally.
- 💸 Location-Aware Finances: No more mental math. The dashboard automatically detects your local currency and shows:
- Currency: The latest USD-to-Your-Currency conversion rate.
- Crypto: The current Bitcoin price in both USD and your local currency.
- 🌍 Personalized Country Info: See your country's flag, population, and capital, pulled automatically based on your location.
- 🌍 World Population: Current world population estimates are available for viewing in real time, based on statistical calculations.
- 🟢 Dev Service Status: Quickly check if GitHub, Cloudflare, OpenAI, and Anthropic are operational before you start debugging.
- ⚙️ You're in Control: A slide-out settings panel lets you change the refresh rate for every single module. Set it to update every 10 seconds or only when you click. Your settings are saved locally.
- 📱 Responsive Layout: It's a clean, fixed sidebar on desktop that smartly collapses into the main feed on your phone.
- 🎨 UI Theme Refresh: Removed purple-heavy accents and replaced them with a neutral dark palette with teal/amber accents to reduce "vibe-coded" visuals and improve professionalism.
- 🖋️ Typography Update: Switched base font to Manrope for cleaner readability and stronger visual hierarchy.
- ⚡ Smoother Data Refresh: Reduced unnecessary loading flicker in Indoor and Outdoor sections after first fetch.
- 🌧️ Condition-Based Weather Motion: Added lightweight, weather-aware hero animation (sun, clouds, rain, storm, fog/snow) with denser rain particles and reduced-motion support.
- 🌦️ Richer Weather Variations: Outdoor animation now adapts to drizzle, windy, partly-cloudy, fog, snow, rain, and thunderstorm states with intensity tuned by precipitation and wind speed.
- 🎚️ Code-Specific Intensity Profiles: Open-Meteo weather codes now use separated animation profiles (e.g. light/moderate/violent showers, dense drizzle, freezing rain, thunderstorm with hail) for more accurate visual behavior.
- 📍 Manual GPS Detection Button: Added one-tap current-location detection in the Outdoor header (next to location search) so you can switch back to live GPS location without page refresh.
- 🛡️ API Resilience Upgrade: Added centralized timeout, retry, and upstream error normalization for both server route handlers and client fetch utilities.
- ⚙️ Settings Save/Cancel Flow: Settings panel now uses explicit Save and Cancel actions so interval changes are transactional and predictable.
- 🧭 Indoor Status Freshness Logic: Indoor online indicator now requires fresh sensor updates within configured refresh interval tolerance, not just raw device connection state.
- 🌍 Country Card Performance: Reduced world-population counter update frequency from 100ms to 1000ms to cut render churn.
- 💱 Smarter Manual Location Currency: Location search now enriches results with currency code by country for more accurate currency/crypto conversion display.
- ✅ Input Validation Hardening: Added stronger validation for
/api/outdoor,/api/country, and/api/geocodingquery parameters. - 📈 Population Model Tuning: World population estimator now uses a year-aware statistical window to reduce drift across calendar changes.
- 🔐 Config Safety: Added baseline security headers in Next.js config.
- 🧪 Build Quality Gate: Build now respects TypeScript and ESLint errors (no longer ignored during production builds).
This project is built with a modern, straightforward stack:
- Framework: Next.js 15.3.3
- Language: TypeScript
- Styling: Tailwind CSS
- UI: shadcn/ui & Radix UI
- State: React Context API (for Settings and Location)
- Icons: Lucide React
- Linting: ESLint (
next/core-web-vitals,next/typescript) - Backend: Next.js API Routes (Route Handlers)
- Deployment: Configured for Firebase App Hosting
Want to run your own? Here’s how.
You'll just need Node.js (v18.18.0 or later).
-
Clone it:
git clone https://github.com/Mysteriza/cyberdash-monitoring cd cyberdash -
Install deps:
npm install
-
Set up your keys:
Create a
.env.localfile in the root of the project. You'll need to get free API keys for these services:# 1. Blynk API # Auth token from your Blynk project (for indoor data) BLYNK_AUTH_TOKEN=YOUR_BLYNK_TOKEN # 2. CoinMarketCap API # API key from https://coinmarketcap.com/api/ COINMARKETCAP_API_KEY=YOUR_CMC_API_KEY # 3. ExchangeRate-API # API key from https://www.exchangerate-api.com/ EXCHANGERATE_APP_ID=YOUR_EXCHANGERATE_API_KEY
-
Run it:
npm run dev
It'll be running at http://localhost:9002.
To keep all the API keys safe and off the client, this project uses Next.js API Routes as a secure backend proxy. All data is fetched securely on the server.
/api/indoor: Grabs data from Blynk./api/outdoor: Hits Open-Meteo for weather./api/geocoding: Location search with auto-suggestions via Open-Meteo Geocoding API./api/country: Grabs info from RestCountries./api/currency: Hits ExchangeRate-API./api/coinmarketcap: Hits CoinMarketCap for the BTC price./api/status: Checks all thestatuspage.iopages.