Welcome to Power Tracker! This project is a high-performance dashboard application designed to fetch and display meter data from MQTT and InfluxDB in real time. With cutting-edge technologies and best practices, this app ensures scalability, responsiveness, and efficiency.
✅ Real-time Data Fetching – Uses MQTT for instant updates.
✅ Historical Data – Fetches and visualizes time-series data from InfluxDB.
✅ Live Mode Switch – Toggle between live data mode (MQTT) and historical mode (InfluxDB) dynamically.
✅ Responsive Design – Seamless experience across all devices.
✅ Dark Mode Support – Fully integrated dark mode for better usability.
✅ Dynamic Content – Next.js ensures smooth rendering.
✅ Optimized Performance – Tailwind CSS for lightweight styling.
✅ Secure Protocols – Implements WebSocket protocols for secure communication.
✅ UI Components – Built with shadcn/ui for modern, customizable UI elements.
✅ State Management – Utilizes TanStack React Query for advanced data fetching and caching.
✅ Comprehensive Data Visualization – Displays Voltage, Current, Power, Energy, and Electricity Cost Calculation with interactive charts.
✅ API Fetching – Uses Hono for efficient API requests and data management.
This project utilizes the following technologies to deliver a powerful user experience:
- MQTT – Efficient message queuing for real-time data exchange.
- InfluxDB – High-performance time-series database.
- Tailwind CSS – Utility-first framework for modern UI design.
- Next.js – React-based framework for SSR & SSG.
- SWR – React Hooks for data fetching, caching, and revalidation.
- ShadCN UI – Pre-built UI components for a sleek and accessible design.
- TanStack React Query – Powerful async state management and server state handling.
- Chart.js/Recharts – Used for rendering real-time and historical data visualization.
- Hono – Fast and lightweight web framework for handling API requests.
Clone the repository and install dependencies:
# Clone the repo
git clone https://github.com/Supavasinan/power-tracker
cd power-tracker
# Install dependencies
npm install
# Run the development server
npm run devThen, open http://localhost:3000 in your browser to see Power Tracker in action! 🚀
Explore the documentation for the key technologies used in this project:
- Next.js Documentation
- Tailwind CSS Documentation
- SWR Documentation
- MQTT Documentation
- InfluxDB Documentation
- ShadCN UI Documentation
- TanStack React Query Documentation
- Chart.js Documentation
- Recharts Documentation
- Hono Documentation
👨💻 Contributions & Feedback
We welcome your feedback, contributions, and feature suggestions! Feel free to fork the repo, create issues, or submit PRs. 💡
🚀 Happy Coding!