Solar Analytics Dashboard is a modern web application that helps you monitor real-time solar power generation, track earnings, and visualize energy data with interactive charts. Built with React, Vite, and Supabase, it offers intelligent caching, billing period tracking, and admin management—all in a sleek dark/light theme UI.
Solar Analytics Dashboard was born out of the need to efficiently monitor solar panel performance and earnings. This modern energy tracker eliminates spreadsheet chaos with a comprehensive, real-time dashboard. Built for homeowners and businesses wanting clarity in their solar investment, it transforms raw inverter data into actionable insights—with elegant theming and performance optimization.
"Why guess your solar performance when Solar Analytics Dashboard tracks, visualizes, and optimizes it for you?"
| Category | Tech Used |
|---|---|
| Framework | React 19.1.1 |
| Build Tool | Vite 7.1.7 |
| Language | JavaScript (ES6+) |
| UI Library | Chakra UI 3.29.0 |
| Styling | Custom CSS with CSS Variables |
| Backend | Supabase |
| Charts | Recharts 3.3.0 |
| Routing | React Router DOM 7.9.1 |
| API Integration | Solis Cloud API |
| State Management | React Context API |
| Caching | SWR (Stale-While-Revalidate) |
| Icons | Lucide React 0.545.0 |
- 🔐 Admin Authentication with Google OAuth
- 📊 Real-time Dashboard for solar monitoring
- ⚡ Live Power Tracking with 5-minute updates
- 💰 Earnings Calculator with CEB billing integration
- 📈 Interactive Charts (Bar, Line, Area)
- 🌍 Environmental Impact metrics (CO2 savings)
- 🎯 Daily Target Tracker with progress visualization
- 🚀 Advanced Caching with SWR strategy
- 🎨 Dark/Light Theme with persistence
- 📅 Billing Period Alignment for accurate tracking
- 🛡️ Error Resilience with circuit breaker pattern
- 💾 Dual-layer Cache (Memory + LocalStorage)
- ⚙️ Admin Panel for CEB data management
- 📱 Responsive Design for all devices
.
├── src/
│ ├── components/ # Reusable React components
│ ├── contexts/ # Context providers (Auth, Data, Theme)
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utilities and services
│ ├── pages/ # Route components
│ └── assets/ # Static assets
├── api/ # Serverless API functions
├── docs/ # Documentation hub
├── public/ # Public static files
├── scripts/ # Utility scripts
├── package.json # Project metadata and scripts
└── vite.config.js # Vite configuration
npm run dev— Start dev servernpm run build— Create production buildnpm run preview— Preview production buildnpm run lint— Check for code issues
| Page | Description |
|---|---|
/ |
Main dashboard / Landing |
/dashboard |
Private dashboard with full analytics |
/settings |
System configuration and preferences |
/admin |
Admin authentication |
/admin/dashboard |
Admin panel for CEB data management |
User → Dashboard → DataContext (SWR) → Cache Check
↓
Cache Hit? → Return Instantly
↓
Background Fetch → Supabase/Solis API
↓
Update State → Cache → UI Refresh
API Error → Classify (auth/rate-limit/server/transient)
↓
Retryable? → Yes → Schedule Retry (exponential backoff)
↓ ↓
No Max Retries? → Circuit Breaker (30m pause)
↓ ↓
Show Error Badge ErrorBanner (>5min outage)
- Node.js 18+
- npm or pnpm
- Supabase account
- Solis Cloud API credentials
Create a .env file:
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
VITE_SOLIS_API_KEY=your_solis_api_key
VITE_SOLIS_API_SECRET=your_solis_secret
VITE_SOLIS_BASE_URL=https://www.soliscloud.com:13333# Clone repository
git clone <repository-url>
cd Solar-Analytics-Dashboard
# Install dependencies
npm install
# or
pnpm install
# Start development server
npm run devRun these SQL commands in Supabase:
-- Billing period settings
INSERT INTO system_settings (setting_name, setting_value)
VALUES
('last_billing_date', '2025-11-05'),
('billing_cycle_days', '30'),
('rate_per_kwh', '37')
ON CONFLICT (setting_name) DO UPDATE
SET setting_value = EXCLUDED.setting_value;
-- Create tables if not exists
CREATE TABLE IF NOT EXISTS inverter_data_daily_summary (
id SERIAL PRIMARY KEY,
summary_date DATE NOT NULL,
total_generation_kwh NUMERIC(10, 3),
created_at TIMESTAMP DEFAULT NOW()
);
CREATE TABLE IF NOT EXISTS ceb_data (
id SERIAL PRIMARY KEY,
month_year VARCHAR(20),
earnings NUMERIC(10, 2),
created_at TIMESTAMP DEFAULT NOW()
);
-- Create RPC function for monthly comparison
CREATE OR REPLACE FUNCTION get_monthly_comparison()
RETURNS TABLE (
month_label TEXT,
period_label TEXT,
inverter_kwh NUMERIC,
ceb_kwh NUMERIC
) AS $$
BEGIN
-- Your RPC logic here
END;
$$ LANGUAGE plpgsql;- Frontend: Deployed on Vercel at solaredge.anujajay.com
- Backend: Powered by Supabase + Solis Cloud API
- Admin Security: Google OAuth + Database role verification
| Metric | Target | Status |
|---|---|---|
| First Load | < 3s | ✅ |
| Cached Load | < 1s | ✅ |
| Time to Interactive | < 3s | ✅ |
| Bundle Size | < 500KB | ✅ |
| Cache Hit Rate | > 80% | ✅ |
Optimizations:
- Lazy loading for chart components
- Code splitting by route
- SWR caching strategy
- Memoized calculations
- Debounced API calls
For comprehensive guides and development documentation, visit the Documentation Hub
- Testing Guide - Test procedures and checklists
- Deployment Checklist - Production deployment
- Caching Guide - Cache strategy
- Admin Improvements - Future enhancements
- Changelog - Version history
Solar Analytics Dashboard is open to contributions! Feel free to fork, open issues, or submit pull requests. Ideas and suggestions are always welcome. 🛠️
This project is licensed under the MIT License — see the LICENSE file for more info.
-
Developed by Anuja Jayasinghe 🌐 anujajay.com
Crafted with ☀️ to bring clarity to solar energy monitoring and maximize your renewable investment.
Maintainer: Anuja Jayasinghe
- Created: November 17, 2025 - Initial v2.0.0 documentation
- Updated: November 19, 2025 - Corrected dependency versions (React 19.1.1, Vite 7.1.7, Chakra UI 3.29.0, Recharts 3.3.0), added Chakra UI to tech stack, added maintainer log
Last Updated: November 19, 2025
Version: 2.0.0
Status: Production Ready ✅