ESG Score UI

A React-based web application for displaying and managing ESG (Environmental, Social, and Governance) scores.

Core Technologies

Framework & Language

  • React (v17.0.2)
  • TypeScript

UI & Styling

  • Material-UI (MUI)
  • Emotion

State & Data

  • Zustand
  • SWR

Forms & Validation

  • Formik & Yup

Tools & Testing

  • Chart.js
  • Jest & React Testing Library
  • Create React App

Project Structure

A standard React application structure is used to organize the codebase:

/
├── public/
└── src/
    ├── assets/
    ├── common/
    ├── components/
    ├���─ containers/
    ├── context/
    ├── pages/
    ├── routes/
    ├── services/
    └── util/

Key Features

Pages and Routing

The application includes several pages, with routing managed by React Router:

  • Home (`/`): Landing page.
  • Loading Score (`/loadingscore`): Score calculation page.
  • Dashboard (`/dashboard`): Displays the ESG score.
  • Credit Form (`/creditform`): For submitting credit information.
  • Not Found (`*`): 404 error page.

State Management

State management is handled by a combination of tools:

  • Zustand: For global application state.
  • SWR: For efficient data fetching and caching.

UI Components

Material-UI (MUI) is used for the main UI components, and reusable custom components are stored in `src/components`.

Getting Started

To get the project up and running locally, follow these steps:

1. Install dependencies:

yarn install

2. Start the development server:

yarn start