💼 | Minha solução para o desafio técnico da vaga Dev. Full Stack Jr na Clark Energia.

Acessar solução

Sumário

1. Desafio
2. Curiosidade
3. Estrutura do Projeto
4. Implementações
5. Instruções
   • Pré-requisitos
   • Rodando o Projeto Localmente
     • Backend (Clark-backend)
     • Frontend (Clark-researches)
6. Resultado
   • Frontend
   • Backend
7. Tecnologias
8. Referências
9. Licença
10. Contato

Desafio

O desafio propõe o desenvolvimento de uma solução full stack para atender aos requisitos da Clark Energia. A aplicação deve ser capaz de gerenciar informações de fornecedores por meio de uma API e proporcionar uma interface amigável para interação do usuário. Os principais requisitos incluem:

• O usuário deve informar seu consumo mensal de energia.
• Ao informar o consumo, o sistema deve mostrar quais fornecedores podem atender à necessidade do cliente.
• Cada fornecedor deve ter informações como nome, logo, estado de origem, custo por kWh, limite mínimo de kWh, número total de clientes e avaliação média dos clientes.
• Um fornecedor só pode atender um cliente se o consumo mensal deste for maior do que o limite mínimo de kWh do fornecedor.

Curiosidade

Desenvolvi a interface simulada do Marketplace utilizando o Figma, o que auxiliou na estruturação do Front-End inicialmente com valores aleatórios. Caso queira acessar o protótipo do figma : Figma - Prototipo do Desafio : Clarke Energia

Estrutura do Projeto

• clark-backend/: Pasta que contém o backend da aplicação, uma API desenvolvida usando Django com dados fictícios.
• clark-researches/: Pasta que contém o frontend do projeto, desenvolvido utilizando React.

Implementações

• Frontend em React.
• Backend em Python.
• Integração da aplicação com GraphQL.
• Testes automatizados no frontend usando Jest ou Cypress.
• Testes automatizados no backend.
• Configuração dos arquivos para execução da aplicação no Docker.

Instruções

Pré-requisitos

❗️ | Certifique-se de ter as seguintes ferramentas instaladas em sua máquina antes de prosseguir:

• Python: Linguagem de programação para o backend.
• Node.js: Plataforma JavaScript para o frontend.

Rodando o Projeto Localmente

Backend (Clark-backend)

1. Configuração do ambiente virtual:

# Navegue até o diretório do backend
$ cd clark-backend/myproject

# Crie um ambiente virtual (recomendado)
$ python -m venv myenv

# Ative o ambiente virtual
$ source myenv/bin/activate   # No Windows: .\myenv\Scripts\activate

2. Instalação de dependências:

# Instale as dependências do projeto
$ pip install -r requirements.txt

3. Execute o servidor Django:

# Inicie o servidor Django e deixe-o aberto no terminal
$ python manage.py runserver

# Acesse a visualização do Backend através da URL http://localhost:8000/

Frontend (Clark-researches)

1. Instalação de dependências:

# Em outro terminal, navegue até o diretório do frontend
$ cd clark-researches

# Instale as dependências do projeto
$ npm install

2. Execute o servidor de desenvolvimento:

# Inicie o servidor de desenvolvimento
$ npm start

# Acesse a visualização do FrontEnd através da URL http://localhost:3000/

Observação: Tanto o backend quanto o frontend devem estar em execução em terminais diferentes para funcionarem corretamente ao rodar o projeto localmente.

Resultado

Frontend

• Resultado das implementações no Frontend : Url : http://localhost:3000/

Pesquisa por kWh gastos ou nome da empresa:

Backend

• Resultado das implementações no Backend : Url : http://localhost:8000/ edite o conteudo através de http://localhost:8000/suppliers/

Página de adição e edição do JSON da aplicação com os campos ID, nome da empresa, logo, estado de origem, custo por kWh, limite mínimo de kWh, número total de clientes e avaliação média dos clientes:

Tecnologias

• VS Code: Ambiente de desenvolvimento integrado.
• Git Bash: GitBash para realizar commits.
• Figma: Ferramenta de prototipagem para desenvolver elementos da interface.
• Node.js: Plataforma para instalação de pacotes necessários para o frontend (React, Material UI, Bootstrap, etc.).
• Python: Python para importação de pacotes no backend.

Referências

• Markdown - Basic Syntax: Documentação sobre a sintaxe básica do Markdown.
• W3Schools: Documentação e tutoriais práticos.
• Figma Community: Inspiração na prototipação do projeto.
• Fóruns e blogs da internet, como Alura, Stack Overflow e Geeks for Geeks, para sanar dúvidas relacionadas à linguagem.

Licença

Este projeto é licenciado nos termos do arquivo LICENÇA. Consulte o arquivo para obter mais detalhes.

Contato

Desenvolvido com muito ☕ por Larissa Cristina Benedito