Next.js EV Charging Simulation

Live Demo: https://nextjs-ev-charging-simulation.vercel.app/

This project is a simulation platform for EV (Electric Vehicle) charging stations. It enables shopowners to simulate charging station usage and visualize peak power loads, energy consumption, and charging events.

Project Description

The Next.js EV Charging Simulation tool is designed to help businesses plan the installation and management of EV charging points. It allows users to configure simulation parameters and view pre-computed results in a responsive and user-friendly interface.

Features

• Input Customization: Users can adjust parameters like the number of charge points, arrival probability multiplier, car consumption, and charging power.
• Data Visualization: Pre-computed data is displayed in charts and heatmaps for insights into charging station usage.
• Responsive UI: Built with TailwindCSS for seamless use across devices.
• Form Validation: Inputs are validated using Zod for robust error handling.

Notable Libraries and Technologies

• NextJS: React framework with server-side rendering and dynamic routing.
• TypeScript: Ensures code reliability with static typing.
• TailwindCSS: Provides utility-first CSS for rapid styling.
• Zod: Simplifies form validation with TypeScript-first schema definitions.
• Recharts: Enables interactive and visually appealing charts.
• React Hook Form: Simplifies form handling with integrated validation.
• Sentry: Monitors and reports errors and performance issues.

Table of Contents

• Installation
• Usage
• Scripts
• Dependencies
• Dev Dependencies
• Author
• License

Installation

1. Clone the repository:

   git clone https://github.com/oleksii-suprun-github/nextjs-ev-charging-simulation.git
   

2. Navigate to the project directory:

   cd nextjs-ev-charging-simulation
   

3. Install the dependencies:

   yarn install
   

Usage

• Start the development server:

  yarn dev
  

• Build the project for production:

  yarn build
  

• Start the production server:

  yarn start
  

Scripts

• dev: Starts the NextJS development server.
• build: Builds the application for production.
• start: Starts the production server.
• lint: Lints the project using ESLint.
• format: Formats the code using Prettier.
• test: Runs tests with Vitest.
• test:commit: Runs tests in non-interactive mode with Vitest.
• test:coverage: Generates a test coverage report.
• prepare: Prepares Husky Git hooks.

Dependencies

• @hookform/resolvers: ^3.9.0
• @next/third-parties: 15.1.4
• @sentry/nextjs: ^8.48.0
• @tailwindcss/typography: ^0.5.15
• clsx: ^2.1.1
• husky: ^9.1.7
• next: ^15.1.4
• react: ^19.0.0
• react-dom: ^19.0.0
• react-hook-form: ^7.53.0
• recharts: ^2.15.0
• vite-tsconfig-paths: ^5.1.4
• zod: ^3.23.8

Dev Dependencies

• @commitlint/cli: ^19.6.1
• @commitlint/config-conventional: ^19.6.0
• @testing-library/dom: ^10.3.1
• @testing-library/react: ^16.0.0
• @types/node: ^22
• @types/react: ^19
• @types/react-dom: ^19
• @types/react-syntax-highlighter: ^15.5.13
• @types/testing-library__jest-dom: ^6.0.0
• @vitejs/plugin-react: ^4.3.2
• @vitest/coverage-v8: ^2.1.1
• @vitest/ui: ^2.0.2
• eslint: ^9
• eslint-config-airbnb-typescript: ^17.0.0
• eslint-config-next: ^15.1.4
• eslint-config-node: ^4.1.0
• eslint-config-prettier: ^9.0.0
• eslint-import-resolver-typescript: ^3.7.0
• eslint-plugin-deprecation: ^3.0.0
• eslint-plugin-import: ^2.28.0
• eslint-plugin-jest-dom: ^5.5.0
• eslint-plugin-jsx-a11y: ^6.10.0
• eslint-plugin-node: ^11.1.0
• eslint-plugin-package-json: ^0.19.0
• eslint-plugin-prettier: ^5.2.0
• eslint-plugin-react: ^7.37.0
• eslint-plugin-testing-library: ^7.1.1
• jsdom: ^24.1.0
• postcss: ^8
• prettier: ^3.3.3
• prettier-plugin-tailwindcss: ^0.6.8
• react-icons: ^5.3.0
• tailwindcss: ^3.4.1
• typescript: ^5
• vitest: ^2.1.0

Author

Oleksii Suprun
Email: oleksii.suprun.email@gmail.com

License

This project is licensed under the Apache-2.0 License. See the LICENSE file for details.