WattHouse

Welcome to the WattHouse repository

---

About the Project

Important

WattHouse is a web application focused on home energy consumption monitoring, helping users track appliances, estimate costs, and improve energy efficiency.

The project combines a React + Vite frontend with Firebase services (Authentication, Firestore, Storage, and Analytics). The main objective is to provide a practical dashboard for managing household devices and understanding monthly energy impact.

What Can WattHouse Do?

• Device Management: Create, list, update, and delete household devices.

• Consumption Overview: Calculate estimated daily and monthly usage based on device power and usage time.

• Cost Estimation: Estimate energy costs using configurable kWh pricing.

• Authenticated Experience: Sign up, sign in, reset password, and manage authenticated user data.

• Personalized Tips: Show energy-saving recommendations according to registered devices.

• Responsive Interface: Access dashboard pages for overview, devices, profile, and reports in development.

Under the Hood (Main Technologies)

• React 18: Frontend UI and routing.
• Vite 5: Build tooling and development server.
• TypeScript: Static typing for maintainability.
• Firebase Auth: Authentication and identity management.
• Cloud Firestore: Device and user data storage.
• Firebase Storage: Storage support.
• Tailwind CSS: Utility-first styling.
• shadcn/ui: Reusable component primitives.
• Recharts: Consumption charts and data visualization.

Getting Started

Prerequisites

• Node.js (recommended: version 18+)
• npm (comes with Node.js)
• A Firebase project configured for Web apps

1. Clone the repository

git clone https://github.com/YagoBorba/WattHouse.git
cd WattHouse

2. Install dependencies

npm install

3. Configure environment variables

Create a .env file in the project root with:

VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id

4. Start development server

npm run dev

Application URL (development):

• http://localhost:5173

5. Build for production

npm run build

6. Preview production build

npm run preview

Docker

Build and run with Docker Compose:

docker compose up --build

Default container URL:

• http://localhost:8080

Available Scripts

At repository root (package.json):

• npm run dev - starts Vite in development mode.
• npm run build - builds the production bundle.
• npm run build:dev - builds in development mode.
• npm run lint - runs ESLint checks.
• npm run preview - previews the production build locally.

Data Model (Firestore)

Main collections used by the app:

• users - user profile data.
• devices - user devices and consumption-related fields.

Project Structure

src/
    components/
        auth/
        charts/
        ui/
    contexts/
    hooks/
    lib/
    pages/
    services/
    types/

Security Notes

• Use environment variables for Firebase configuration.
• Do not share private credentials or service account keys.
• Review Firestore and Storage rules before production deployment.

Contributing

Contributions are welcome.

1. Fork the repository.
2. Create your feature branch.
3. Commit your changes.
4. Push your branch.
5. Open a Pull Request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contact

• Email: yagoaborba@hotmail.com
• LinkedIn: https://www.linkedin.com/in/yagoborba/

---

Back to Top