A simple project built with React to visualize charts related to the UK's energy mix. It displays data such as energy types and their contribution percentages. The design includes a default dark mode with a toggle for light mode.
You can test it here! https://energy-dashboard-sermedina.netlify.app/
- Interactive charts to visualize the energy mix.
- Charts generated using ApexCharts.
- Dynamic data fetched from https://api.carbonintensity.org.uk/generation.
- Toggle between dark mode and light mode.
- Themes synchronized with
localStorageto persist the interface state.
- React: Main framework for building the UI.
- TypeScript: Used to ensure static typing and greater robustness in the code.
- Tailwind CSS: Framework for fast and customizable styling.
- ApexCharts: Library for interactive charts.
- React Testing Library: Unit and functional testing.
- Jest: Framework used for unit and integral tests.
Follow the steps below to clone and run the project locally.
git clone https://github.com/yourusername/avify-takehome.git
cd avify-takehome
- Install Dependencies Ensure you have Node.js installed, then run:
npm install- Run in Development Mode
npm startThe project will be available at http://localhost:3000.
🧪 Run Tests This project includes unit tests to ensure the functionality of the charts and theme toggle. To execute them:
npm test🌟 Main Features
Chart Types: Includes area, bar, line and donut charts for better data representation.
Dynamic Data: Data is fetched from API https://api.carbonintensity.org.uk/generation and rendered in real-time.
Theme Toggle
Default Dark Mode.
A toggle button to switch between light and dark modes.
Theme persistence using localStorage.
The energy charts includes:
Types of energy such as solar, wind, and gas.
Contribution percentage for each type.