Carbon emissions tracker built with React, NodeJS and Carbon Interface API, using Material-UI and ApexCharts to power the user experience and data visualization.
CarboX is a single interface app that allows the user to collect electricity usage by location, and estimates its carbon emissions over time.
It was created upon 2 main features: the Electricity Form and the Carbon Timeline.
The live version is available at: https://carbox.netlify.app/
This project was created using CRA. To run the code, first install all the dependencies needed with:
npm install
After the installation, create a .env file with your Carbon Interface API
key, following the example provided in the .env.sample.
Then, you will be able to start the project executing the command:
npm start
To run the server and/or client sides separately, you can also use:
npm start:server and/or npm start:app
It will open http://localhost:3000 (default), so you can view the project in the browser.
The project was architectured in the following way:
The /server includes the server-side codebase. A basic server.ts was created with Express, so that the project can be scaled up at some point.
The /src contains all the client-side codebase.
.
├── components
│ ├── carbon
│ │ ├── CarbonEstimates.tsx
│ │ └── CarbonTimeline.tsx
│ ├── common
│ │ ├── Footer.tsx
│ │ └── NavBar.tsx
│ ├── electricity
│ │ └── ElectricityForm.tsx
│ └── Dashboard.tsx
├── constants
│ ├── locations.ts
│ └── units.ts
├── hooks
│ └── useInputState.tsx
├── styles
│ ├── CarbonEstimatesStyles.tsx
│ ├── DashboardStyles.tsx
│ ├── ElectricityFormStyles.tsx
│ ├── FooterStyles.tsx
│ ├── GlobalStyles.tsx
│ └── NavBarStyles.tsx
├── types
│ └── responseTypes.ts
├── utils
│ ├── apiCall.ts
│ ├── apiService.ts
│ └── domains.ts
├── _app.tsx
└── index.tsx
This folder includes all the components used to build the project, dumb and smart ones.
While the dumb components used were clustered at the /common folder, smart components were
arranged according to their features under /carbon and electricity.
These folders contain all the functions and types used to fetch data from the Carbon Interface API.
These folders include the customized hooks and constants used to build this project.
Since the components were styled using Material-UI’s styling solution and best practises, their files were clustered here. This way, the components’ logic and styles are cleanly separate.
Pull requests are welcome. For major changes, open an issue first to discuss what you would like to change. Please make sure to include or update tests as appropriate.
Copyright © 2021 Vasco Oliveira