This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.
A React + Vite application that displays transformer data with search, filtering, and interactive charts. Toggle visibility of transformers and visualize voltage readings over time.
- Prerequisites
- Libraries
- Setup Steps
- Running the Application
- Building for Production
- Linting
- Project Structure
- Usage
- Troubleshooting
- License
- Node.js v14 or higher installed: Download here
- npm (comes with Node.js) or yarn installed:
- Install Yarn (optional)
This project leverages several key libraries and tools:
-
React
A popular JavaScript library for building user interfaces with components and hooks. -
Vite
A fast frontend build tool and development server that supports modern JavaScript features and offers lightning-fast hot module replacement (HMR). -
Chart.js
A flexible and simple JavaScript charting library used to render interactive line charts for transformer voltage readings. -
react-chartjs-2
React wrapper for Chart.js that provides React components to easily integrate Chart.js charts within React applications. -
@tanstack/react-query
Powerful data fetching and state management library for React, used to fetch and cache transformer data efficiently. -
Zod
A TypeScript-first schema validation library used for validating and parsing data structures (optional, depending on your use in hooks). -
ESLint
A pluggable linting utility for JavaScript and TypeScript to enforce consistent code style and catch potential issues. -
TypeScript
A strongly-typed superset of JavaScript that adds static typing, enhancing code quality and developer experience.
Each of these libraries contributes to building a robust, maintainable, and performant React application for monitoring transformer data visually.
Follow these steps to get the project up and running on your local machine:
Open your terminal and run:
git clone https://github.com/yourusername/transformeddashboard.git
cd transformeddashboard
### 2. Install Dependencies
Using npm:
```bash
npm install
## 🐳 Docker Build & Run
To build and run the app in a Docker container:
### Build the Docker image:
```bash
docker build -t transformerdashboard .
docker run -p 8080:80 transformerdashboard
Then open your browser at:
👉 http://localhost:8080