SmartWatt Frontend is a Next.js application for household energy estimation workflows, including guided data input, appliance-level analytics, and historical dashboard views.
- Multi-step assessment flow for household and appliance details.
- Quick and detailed analysis modes.
- Interactive charts for consumption distribution and trends.
- Assessment history with dashboard-level exploration.
- Authentication and persistence integration with Supabase.
- PDF report generation and what-if simulation display.
| Assessment Flow | Dashboard |
|---|---|
 |
 |
If images are not visible yet, add files in docs/screenshots/ from the repository root.
- Next.js 16
- React 19
- TypeScript 5
- Tailwind CSS 4
- Recharts and Plotly
- Axios
- Supabase JavaScript client
src/app/: route-based pages including main flow, authentication, and dashboard.src/components/: reusable UI and feature components.src/hooks/: analysis and simulation orchestration hooks.src/lib/: API modules, transformations, utilities, and types.src/config/: appliance and usage form metadata.
- Move to the frontend directory.
cd Frontend- Install dependencies.
npm install- Configure environment variables.
copy .env.example .env.local- Start the development server.
npm run dev- Open http://localhost:3000.
npm run build
npm run start- The interface supports quick and detailed assessment modes.
- Data-entry steps are designed for predictable user progression.
- Result visualizations are optimized for desktop and mobile layouts.
At minimum, configure the backend API URL:
NEXT_PUBLIC_BACKEND_URL
Additional Supabase variables can be configured based on deployment setup.
Licensed under the MIT License. See LICENSE.