🌿 Breathe ESG - Frontend Application

This is the frontend user interface for the Breathe ESG Carbon Credits Analysis Platform.
Built with React and Vite, it serves as a decoupled Single Page Application (SPA) that interacts seamlessly with the Django REST Framework backend.

The application provides a dashboard for tracking sustainability metrics, managing raw emission records, and uploading corporate data (Utility Bills, SAP Procurement, and Corporate Travel) for automated CO₂ calculation.

🚀 Tech Stack

• Framework: React
• Build Tool: Vite
• API Communication: Native fetch API (custom lightweight wrapper, no Axios required)
• Deployment: Render (Static Site Hosting)

🛠️ Local Development Setup

1. Clone the repository:

   git clone https://github.com/Sanjeevkumar-cs/Carbon-credits-analysis-frontend.git
   cd frontend

2. Install dependencies:

   npm install

3. Environment Variables: For local development, the app defaults to http://localhost:8000/api.
   You only need a .env file if testing against a remote backend.

   Create a .env file in the project root:

   VITE_API_URL=http://localhost:8000/api

4. Run the local development server:

   npm run dev

🔌 API Architecture

This project uses a custom lightweight API wrapper (api.js) built on top of the native browser fetch API.
It automatically handles:

• Base URL injection via environment variables
• Content-Type: application/json headers
• JSON parsing and error handling

Core Endpoints Integrated

Endpoint	Method	Description
/dashboard/stats/	GET	Retrieves high-level carbon metrics
/records/	GET	Fetches paginated emission activity records
/records/upload/	POST	Handles multipart CSV uploads (SAP, Travel, Utility)
/records/bulk_action/	POST	Submits batch approval/rejection workflows

☁️ Render Production Deployment

This application is configured for automated static deployment on Render.

1. Build & Publish Settings

• Build Command:

  npm install && npm run build

• Publish Directory:

  frontend/dist
  

2. Environment Variables

Point the production frontend to the live Django API:

Key	Value
VITE_API_URL	https://your-backend-url.onrender.com/api (Ensure /api is included and no trailing slash)

3. SPA Routing Rules (Critical)

Because this is a Single Page Application, Render must route all traffic through React’s index.html to prevent 404 Not Found errors on refresh.

Add this rule in Redirects/Rewrites:

Source	Destination	Action
/*	/index.html	Rewrite

⚠️ Developer Notes

• Avoid Axios: The project intentionally omits Axios to keep the bundle lightweight. Continue using the request() function in api.js.
• File Uploads: When modifying upload components, use the FormData object. The custom wrapper correctly handles multipart uploads without setting Content-Type manually.
• Performance: Vite’s HMR ensures instant updates during development.
• Security: CORS and environment variables are configured to protect API endpoints.

🧩 React + Vite Template Notes

This project builds upon the official React + Vite template with HMR and ESLint rules.

Available Plugins

• @vitejs/plugin-react — uses Oxc
• @vitejs/plugin-react-swc — uses SWC

React Compiler

The React Compiler is not enabled by default due to its impact on build performance.
To enable it, follow React Compiler Installation Guide.

ESLint Configuration

For production-grade applications, use TypeScript with type-aware lint rules.
Refer to the React + TypeScript Template and typescript-eslint documentation for integration.

✅ Summary

The Breathe ESG Frontend is a scalable, secure, and high-performance SPA built with React and Vite.
It connects seamlessly to the Django backend, enabling real-time sustainability tracking, CSV uploads, and emission data visualization — all deployed efficiently on Render.