EcoWatch-MVP is a web-based application designed to help users optimize their electricity usage and costs. The app allows users to set a target monthly electricity bill, input a list of household appliances with energy consumption data, and receive AI-driven recommendations for energy optimization. It also includes a dark mode toggle for user convenience.
- Input a target monthly electricity bill
- Add household appliances with energy consumption data
- Use a "Demo Data" button to populate sample data
- Receive simulated AI-driven recommendations for energy optimization
- Toggle between light and dark mode
Technical documentation for EcoWatch-MVP is organized into two main categories:
-
Guides and Overviews (Manual Documentation): These documents provide high-level explanations, architectural details, and guides for developers. They are located in the
docs/guides/directory:- Architecture Overview: High-level architecture and data flow.
- JavaScript Modules: Details on JavaScript modules and their interactions.
- UI Structure: UI layout, DOM structure, and CSS usage.
- Extension Guide: Guide for extending and modifying the app.
- API Details: API integration details.
- Cloudflare Pages Functions: Implementation details for secure API access.
- Module Relationships Diagram: Visual representation of module interactions.
- Execution Diagrams: Diagrams illustrating key execution flows.
-
API Documentation (Auto-generated from Code): Detailed documentation for all JavaScript modules, functions, and their parameters is auto-generated from JSDoc comments in the source code.
- To generate/update API documentation: Run the command
npm run generate-docsfrom the project root. This will populate thedocs/jsdoc/directory. - To view API documentation: After generation, open the
docs/jsdoc/index.htmlfile in your web browser.
- To generate/update API documentation: Run the command
This project uses Tailwind CSS for styling, ensuring a responsive and modern design. The JavaScript codebase follows a modular structure, with key logic organized within the js/ directory. The app also includes a functional dark mode toggle for enhanced user experience.
Start with the documents in docs/guides/ for a big-picture overview. For detailed information on specific functions or modules, generate and consult the JSDoc API documentation.
The project uses .env and .env.example files to store API keys and other configuration details. Ensure you copy .env.example to .env and populate it with the required values before running the application.
# Start local development server
npm run dev
# Start local development with Cloudflare Pages Functions
npm run dev:cfThis project is configured for deployment to Cloudflare Pages with secure API key management:
- API keys are stored as encrypted Environment Variables in the Cloudflare Pages dashboard
- Cloudflare Pages Functions are used to securely proxy API requests without exposing keys to clients
- The
wrangler.tomlfile contains the necessary configuration for Pages Functions
# Deploy to Cloudflare Pages
npm run deploy:cfAlternatively, you can deploy directly through the Cloudflare dashboard.
- Cloudflare Pages Functions implementation for secure API access
- Environment Variables configuration for secure API key management
- Debug logging and secret bindings for Gemini API key configuration
- Observability logs in wrangler configuration
- Gemini API integration by updating to stable v1 endpoint
- Stabilized Gemini API integration by confirming
gemini-2.0-flashas the primary working model and establishing a fallback strategy (gemini-1.5-pro,gemini-pro). - Improved API key retrieval logic and error handling
- Corrected secrets syntax in wrangler.toml
- Refactored frontend code to use Pages Functions instead of direct API calls
- Updated Cloudflare Pages configuration with revised binding syntax
- Simplified wrangler.toml configuration and updated build output settings
- Moved and updated Cloudflare Pages Functions documentation
- Initial project setup with Vite, TailwindCSS, and PostCSS
- Comprehensive documentation structure with architecture diagrams
- JSDocs task, config and documentation comments
- Example .env file for configuration
- Energy chart view with day/week/month options and persistent app state
- Solar contribution display and integration with bill overview
- Tariff editor section and energy budget management UI
- Custom styles for headings, paragraphs, and recommendations display
- Usage mode toggle for appliances with continuous operation option
- AI recommendations with keyword highlighting
- Sticky bill overview section with custom scrollbar styles
- Configured Vite for broader network access and flexible port usage
- Updated .gitignore to exclude generated JSDocs
- Refactored application structure for better modularity
- Enhanced energy usage calculations for monthly data
- Optimized AI data handling and recommendation generation
- Updated chart view button styles for clarity and consistency
- Improved heading color in prose class for better readability
- Reorganized documentation files into docs/guides directory
- Used relative paths for CSS and JS resources