English 🇺🇸
Portguese 🇧🇷
About • Features • Layout • Running • Technologies • Author • References
The aim behind this project is to provide users with a simple and easy-to-use tool to estimate the carbon footprint on their daily activities. Whether it's commuting to work, shopping, or even hanging out at the hotel, this app will calculate the estimated carbon emissions associated with those activities.
The app is currently under development and new features will be added in the future to further enhance the user experience and add more activities to the list.
By providing this information to users, they can make more informed decisions about their daily habits and potentially reduce their carbon footprint. Feel free to clone this project, modify and give feedbacks.
Users have access to the web app (mobile and desktop responsiveness) where they can:
- estimate the carbon footprint of a given category for their country (location obtained via IP)
- change country in a country selector
- filter CO2 emissions by year and region
- switch between ligth/dark theme
This project has a demo version deployed at Vercel. Click here and check it out.
The application layout is available in Figma:
This project requires third-party dependencies to run, see below for steps to running locally.
Before you start, you will need to have the following tools installed on your machine: Git, Node.js, and also a package manager like [npm](https://www. npmjs.com/package/npm) or yarn. In addition it is good to have an editor to work with the code, such as VSCode
In order to work properly, this project is powered by the Climatiq database. Climatiq offers a REST API that brings data and information related to climate and environmental factors such as temperature, humidity, carbon emissions on a local and global scale.
To get a free API-key follow the official instructions here
# Clone this repo
$ git clone git@github.com:f7lipe/frontend-test-two
# Access the project folder in your terminal/cmd
$ cd f7lipe/frontend-test-two
# Install dependecies
$ npm install // yarn install
# Create a environment file
$ touch .env.local
# In the .env.local file created add a variable API_BASE_URL and API_KEY as shown in the .env.example file located in the root folder of this directory
$ nano .env
API_BASE_URL = "https://beta3.api.climatiq.io"
API_KEY = "PASTE HERE YOUR API KEY FROM CLIMATIQ.IO"
# Save
# Run the application in development mode
$ npm run dev // yarn run dev
# The application will open on port:3000 - go to http://localhost:3000
The following tools were used in building the project:
Website (Next.JS) + (JavaScript)
See package.json
- Prototype: Figma → Prototype (Estimator)
- Editor: Visual Studio Code → Extensions: vscode-styled-components
- Markdown: StackEdit, Markdown Emoji
- API Tests: Thunder Client
- Fonts: Roboto
Filipe Correia
- Climatiq API Reference
- Directory Structure Suggestion For Next.JS
- MDN Web Docs
- Next.JS Docs
- React Hook Forms Docs
- React Infinite Scroll
- Theming in Next.JS With Styled-components
This project is part of a technical challenge made for Orma Carbon.
Made with ❤️ by Filipe Correia 👋🏽 Contact us!