ESG Score UI

Modern React Application for ESG Score Calculation

A comprehensive web application that enables users to calculate and visualize their Environmental, Social, and Governance (ESG) scores with actionable insights and recommendations.

What is ESG Score UI?

🌱

Environmental

Track energy consumption and carbon footprint analysis to measure environmental impact and sustainability practices.

Social

Evaluate education and health community indicators to assess social responsibility and impact on stakeholders.

⚖️

Governance

Analyze tax compliance and corporate governance practices to ensure ethical business operations and transparency.

Key Features

📊

Interactive Dashboard

Comprehensive visualization with score indicators, detailed breakdowns, and actionable recommendations.

🔍

Score Calculation

Advanced algorithm that processes CPF/CNPJ documents and calculates ESG scores across five key categories.

📱

Responsive Design

Mobile-first approach ensuring optimal user experience across all devices and screen sizes.

🎯

User-Centric Flow

Intuitive step-by-step process with educational content to guide users through ESG assessment.

Technology Stack

Frontend Framework

  • React 17.0.2 - Modern UI library
  • TypeScript 4.6.3 - Type-safe development
  • Material-UI 5.x - Enterprise-grade components
  • Emotion - CSS-in-JS styling

State Management

  • React Context API - Global state management
  • Zustand - Lightweight state library
  • SWR - Data fetching and caching
  • Formik - Form state management

Data Visualization

  • Chart.js 3.x - Chart rendering
  • React ChartJS 2 - React wrapper
  • React Score Indicator - Custom components
  • Interactive Charts - Dynamic visualizations

Development Tools

  • Create React App - Build tooling
  • ESLint - Code linting
  • Prettier - Code formatting
  • Storybook - Component documentation

Project Architecture

Clean Architecture with Separation of Concerns


src/
├── App.tsx                 # Main app component
├── assets/                 # Static assets (images, icons, fonts)
├── common/                 # Shared utilities and configurations
├── components/             # Reusable UI components
├── containers/             # App-level containers
├── context/                # React Context providers
├── pages/                  # Main application pages
├── routes/                 # Application routing
├── services/               # API services and utilities
└── util/                   # Utility functions
		

Project Statistics

90%

Test Coverage

5

ESG Categories

19

Slides in Presentation

100%

TypeScript Coverage