GreenMentor - Frontend Assignment

Introduction

This repository contains the code for a frontend assignment aimed at creating a single-page app for a GreenMentor Assignment. The project is designed to replicate the UI provided in the Figma design and implement various functionalities outlined in the problem statement.

Figma Design

Figma Design Link

Features

1. Sidebar:

   • Four options and one button.
   • Clicking on the first option (Energy) should open collapsible multiple options.

2. Date Filters:

   • Filtering out data for selected dates.

3. Charts and Tables:

   • Populate charts and tables using the provided dataset.
   • Legends can be switched off/on in all charts.
   • The pie chart should adjust back to 100% based on the new distribution when any legend is switched off.

4. Supplier Table:

   • YOY increase/decrease highlighted with colors (red for positive, green for negative) and the appropriate arrow type.

5. Responsiveness:

   • Application should be responsive for multiple screen sizes.

6. Bonus:

   • Bonus points for replicating the frame as it is in the Figma design.

Tech Stack

• HTML
• CSS
• JavaScript
• React.js
• Chakra UI
• ReactChart2.js
• chart.js

Getting Started

1. Clone the Repository:

bash git clone https://github.com/lovkumar120169/greenmentor_assignment.git

2. Navigate to the Project Directory:

bash cd greenmentor-assignment

3. Install Dependencies:

bash npm install

4. Run the Application:

bash npm start

Open your browser and visit http://localhost:3000 to view the application.

Screenshots/GIFs

Large Screen View

Medium Screen View

Small Screen View

Demo

Check out the live demo on Netlify.