Skip to content

Latest commit

 

History

History
187 lines (125 loc) · 7.12 KB

README.md

File metadata and controls

187 lines (125 loc) · 7.12 KB
Raw

Motors Shop - Compra, Venda e Leição de Veículos e Motos

Sumário

1. Resumo

Resumo

Voltar ao topo

Essa aplicação foi desenvolvida para o Projeto Final realizado nas sprints 4-8 do módulo 6 para a Kenzie Academy Brasil no intuito de revisar, treinar e validar os conhecimentos adquiridos ao longo do curso, que serão usados no mercado de trabalho.

O objetivo dessa aplicação é servir como um frontend para o projeto fullstack, chamado Motors Shop, parecido com uma "Olx de veículos".

Frontend

Backend

Principais tecnologias usadas nesse projeto:

Base URL do deploy: colocar o link do vercel aqui

1. Time de desenvolvimento

Voltar ao topo

2. Preparativos

Voltar ao topo

2.1. Instalando Dependências

Clone o projeto em sua máquina local e instale por meio do yarn ou npm:

yarn install
npm install

2.2. Executar a aplicação localmente

Para executar o projeto em sua máquina local utilize o comando start do yarn ou npm:

yarn start
npm start

OBS: Não se esqueça de executar a aplicação de backend para que tudo funcione corretamente, use esse link para ter acesso a ela: https://github.com/brunotiberio/s3-fullstack-teste-backend-brunotiberio

3. Documentação da API da aplicação

Voltar ao topo

É possível acessar à documentação completa da API utilizada nessa aplicação.

Nessa mesma documentação é possível adquirir informações sobre os requests, chaves necessárias do request e informações de algumas rotas.

Conheça a API: https://motors-doc-api.vercel.app/

4. Histórico de desenvolvimento

Voltar ao topo

4.1. Objetivo

O Objetivo principal dessa aplicação é a validação dos conhecimentos do time nos seguintes tópicos:

  • JavaScript;
  • React;
  • TypeScript;
  • Componentização;
  • CSS;

4.2. Decisões de desenvolvimento

4.2.1. Ordem de desenvolvimento

  1. Inicialmente, decidimos por começar pela análise do Figma proposto, com isso, pudemos observar e pesquisar quais eram as tecnologias, frameworks e libs que poderiam ser usadas no desenvolvimento.
  2. Fizemos o estudo das tecnologias que fossem necessárias.
  3. Iniciamos o desenvolvimento por duas frentes (backend e frontend) em concomitante. No frontend iniciamos com a criação da arquitetura e componentização
  4. Por fim, fizemos os demais fix necessários do código e a documentação da API

4.2.2. Componentes

Foram criados, no total, 16 componentes, divididos em categorias:

  • Header: cabeçalho da aplicação, onde é recebido o H1;
  • Cards: onde são exibidos os cards relacionados aos anúncios, separados por Carro, Moto e Leilão;
  • Footer: componente responsável pelo rodapé da aplicação;
  • Inputs: que são relacionados aos inputs que vão a alguns dos modais utilizados na aplicação
  • Modais: total de 9 itens, responsável por todos os modais da aplicação

4.2.3. Page

Ao total, foram criadas 7 páginas para a construção da aplicação, sendo a Home, a que possui o componente vários componentes já criados.

  • Home: página inicial da aplicação, onde são exibidos todos os veículos anunciados
  • Dashborard: página dedicada a visualização de um anúncio
  • Login e Register: responsável pelas requisições supracitadas
  • Profile: mostra os dados do perfil do usuário e os anuncios ele (caso possua)
  • Forgot e Recovery: local onde é feita a recuperação de senha do usuário

4.2.4. Rotas e Consumo da API

4.2.4.1. Rotas

Para o desenvolvimento dessa aplicação, foram necessárias 8 rotas, sendo uma especial para o modal.

  • /login -> aciona o Login
  • / -> aciona a Home
  • /dashboard -> aciona a Dashboard
  • /profile -> aciona a ProfileView
  • /forgot-password -> aciona a ForgotPassword
  • /reset-password -> RecoveryPassword
  • /register -> RegisterPage
  • Especial: componente modal que analisa o state e entrega o modal adequado para cada solicitação

4.2.4.2. Consumo da API

A configuração da API ocorre em "services", utilizando a tecnologia "Axios". Foram divididas em dois "creates", sendo um para rotas públicas e outro para rotas privadas (que busca a informação no localstorage)

Para os dados trafegarem pelos componentes, decidimos usar o contextAPI do próprio React, por ser mais simples de se configurar e escalar a aplicação, a ferramenta permite a criação de um estado com as respostas da API, dessa forma, conseguimos enviar os dados gerados por ela, para o componente, tratando os possíveis erros de entrada do usuário e de resposta da API e gerando os resultados esperados.

4.2.5. Estilização

Utilizamos como ferramenta de estilização o Tailwind, por se tratar de uma ferramenta completa. Dessa forma, criamos um reset global e as variáveis globais para facilitar a estilização e pudemos criar componentes estilizados.

5. Agradecimentos

Voltar ao topo

Queremos agradecer pela oportunidade de fazer esse projeto e pela dedicação do PO Marcelo Cabral por nos auxiliar do início ao fim.

Shalom!

Voltar ao topo