Energy-Meter-

Modern, responsive Smart Energy Meter Dashboard (ESP32 + Blynk) built with React + Vite + Tailwind + Recharts.

Setup

1. Install deps:

npm install

2. Add your Blynk token in .env:

VITE_BLYNK_TOKEN=your_blynk_token_here

3. Run locally:

npm run dev

Deploy (Vercel)

• Import the repo in Vercel
• Set environment variable VITE_BLYNK_TOKEN
• Build command: npm run build
• Output: dist

Deploy (Netlify)

• Build command: npm run build
• Publish directory: dist
• Environment variables:
  • BLYNK_TOKEN (recommended) or VITE_BLYNK_TOKEN
  • GEMINI_API_KEY (for AI predictive maintenance)

This repo includes:

• netlify/functions/blynk.js (serverless API)
• netlify.toml redirect so the app can call /api/blynk

If /api/blynk returns 500 on Netlify

1. Open Netlify → Site → Site configuration → Environment variables.
2. Add BLYNK_TOKEN (recommended) with your Blynk auth token value.
3. Scope: Production (and Deploy previews if you use them).
4. Trigger redeploy (Deploys → Trigger deploy → Clear cache and deploy site).

Without this, the serverless function has no token and returns HTTP 500.

Workaround (already in code): Add VITE_BLYNK_TOKEN in Netlify build environment variables and redeploy. In production, the app will then call Blynk directly (and skip /api/blynk) so you avoid broken-function 500 noise in the console. Prefer BLYNK_TOKEN on the function for production if you do not want the token in the client bundle.

AI Predictive Maintenance (Gemini)

This repo includes netlify/functions/predict.js, which calls the Gemini API server-side (your API key is never exposed to the browser).

• Add to .env for local dev:

GEMINI_API_KEY=your_gemini_api_key_here

• In Netlify: Site configuration → Environment variables → add GEMINI_API_KEY → redeploy.

If the function fails, the UI will show “AI unavailable” and the rest of the dashboard keeps working.

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Oxc
• @vitejs/plugin-react-swc uses SWC

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.