WorkWatt Frontend

A React TypeScript web application for monitoring power usage and managing users.

Description

WorkWatt Frontend is a web interface for WorkWatt - a system designed to track computer power usage across an organization. It provides real-time monitoring, usage analytics, and user management.

Features

• User authentication and role-based access control
• Real-time active user monitoring via WebSockets
• Power usage visualization with charts
• User registration via confirmation on email and management
• Responsive Material UI interface

Prerequisites

• Node.js (v16+)
• npm or yarn

Installation

1. Clone the repository
2. Navigate to the project directory
3. Install dependencies
4. npm install
5. npm run dev

Project Structure

/src - Source code
/api - API configuration and interceptors
/components - Reusable UI components
/pages - Page components
/App.tsx - Main application component
/main.tsx - Entry point

Key Components

LoginForm - User authentication
RegisterForm - New user registration
SingleUserChart - Power usage visualization
ActiveUsers - Real-time user activity monitoring
Navbar - Navigation component

Technologies

React 19
TypeScript
Material UI 7
Vite
Axios
STOMP WebSockets
React Router
React Hook Form

Backend Integration

The application connects to a backend server at http://localhost:8080 with the following endpoints:
Authentication: /api/v1/auth/authenticate
User registration: /api/v1/user/password/set
Usage history: /api/v1/usage/history
Active users WebSocket: /api/v1/usage/active

Related Projects

wortwatt-desktop: Desktop client for tracking computer power usage