Português 🇧🇷
English 🇺🇸
Sobre • Funcionalidades • Layout • Como executar • Tecnologias • Autor • Referências
O objetivo por trás desse projeto é fornecer aos usuários uma ferramenta simples e fácil de usar para estimar a pegada de carbono de suas atividades diárias. Seja indo para o trabalho, fazendo compras, ou até mesmo passando o tempo no hotel, este aplicativo calculará as emissões de carbono estimadas associadas a essas atividades.
Atualmente, o aplicativo está em desenvolvimento e novos recursos serão adicionados no futuro para aprimorar ainda mais a experiência do usuário e adicionar mais atividades à lista.
Ao fornecer essas informações aos usuários, eles podem tomar decisões mais informadas sobre seus hábitos diários e potencialmente reduzir sua pegada de carbono. Sinta-se livre para baixar, modificar e dar feedback!
Os usuários tem acesso ao aplicativo web ( responsividade móvel e dekstop ), onde podem:
- estimar a pegada de carbono de uma determinada categoria para o seu país (localização obtida via IP)
- alterar o país em um seletor de países
- filtrar por ano e região as categorias que mais emitem CO2
- alternar entre os temas claro/escuro
Este projeto conta com uma versão de demonstração hospedada na Vercel. Clique aqui e confira.
O layout da aplicação está disponível no Figma:
Este projeto requer dependências de terceiros para funcionar, confira abaixo os passos para executar localmente.
Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js, e também um gerenciador de pacotes como npm ou yarn. Além disto é bom ter um editor para trabalhar com o código, como VSCode
Para poder funcionar, este projeto é alimentado pela base de dados do Climatiq. A Climatiq oferece uma API REST que traz dados e informações relacionadas a fatores climáticos e ambientais, como temperatura, umidade, emissões de carbono em escala local e global.
Para obter uma chave gratuita siga as intruções oficiais aqui (conteúdo em inglês).
# Clone este repositório
$ git clone git@github.com:f7lipe/frontend-test-two
# Acesse a pasta do projeto no seu terminal/cmd
$ cd f7lipe/frontend-test-two
# Instale as dependências
$ npm install // yarn install
# crie uma variável de ambiente
$ touch .env.local
# no arquivo .env.local criado adicione uma variável API_BASE_URL e API_KEY como mostrado no arquivo .env.example localizado na pasta raíz deste diretório
$ nano .env
API_BASE_URL = "https://beta3.api.climatiq.io"
API_KEY = "COLE AQUI SUA CHAVE DE API DO CLIMATIQ.IO"
# salve a alteração
# Execute a aplicação em modo de desenvolvimento
$ npm run dev // yarn run dev
# A aplicação será aberta na porta:3000 - acesse http://localhost:3000
As seguintes ferramentas foram usadas na construção do projeto:
Website (Next.JS) + (JavaScript)
Veja o arquivo package.json
- Protótipo: Figma → Protótipo (Estimator)
- Editor: Visual Studio Code → Extensions: vscode-styled-components
- Markdown: StackEdit, Markdown Emoji
- Teste de API: Thunder Client
- Fontes: 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
Este projeto é parte de um desafio técnico feito para a Orma Carbon.
Feito com ❤️ por Filipe Correia 👋🏽 Entre em contato!