CRA Template Basic

Tabela de Conteudos

• Sobre o projeto
• Caracteristicas
• Inicialização
  • Requisitos
  • Clonagem do Projeto
  • Comandos de inicialização
• Estrutura das pastas
• Rotas

Sobre o projeto

Este desafio trate-se de uma das etapas no processo seletivo para a Concrete Solutions. Esta aplicação tem como objetivo buscar usuário do Github, e listar seus repositórios públicos. Feito usando React, este projeto traz consigo o uso de libs importantes para construção de uma aplicação segura. A aplicacao pode ser vista pelo endereco: Desafio git

Caracteristicas

• React
• Lotties
• Testes automatizado com Jest
• Organização e padronização de códigos com ESLint
• Criação e utilização de variaveis de ambiente com o dotEnv
• Offline First
• Responsividade

Inicialização

Requisitos

• Node
• Yarn ou NPM

Clonagem do Projeto

Para clonar este desadio em seu reositorio local, você ira precisar do Git, uma vez instalado corretamente você pode executar o comando:

$ git clone https://github.com/iranjunior/desafio-frontend.git

ou caso você tenha uma chave ssh configurada:

$ git clone [email protected]:iranjunior/desafio-frontend.git

por fim execute o comando para entrar na pasta que foi criada e instalar as dependencias do projeto

$ cd concrete-desafio-frontend
$ yarn

Comandos de inicialização

Para iniciar a aplicação basta executar o comando: yarn start ou npm run startmas existe alguns comandos que podem lhe ajudar a realizar tarefas especificas como testes com a sua respectiva cobertura, cobertura dos testes e build da aplicação Uma lista completa sobre os comandos de inicialização pode ser vista abaixo:

Comandos | Tarefa a ser realizada ------------- | ------------- yarn start | Inicializa o serviço em ambiente de desenvolvimento, com o modo live reload funcionando. O que facilita na atualização de componentes alterados em desenvolvimento yarn test | Realiza todos os testes relacionados aos arquivos alterados yarn test:coverage | Realiza todos os testes e mostra os arquivos cobridos pelo teste yarn lint | Executa o ESLint nos arquivos da aplicação yarn build | Realiza o build da aplicação para execução em produção

Estrutura das pastas

├─── public/
   └───...
├─── src/
   ├─── assets/
     └───...
   ├─── components/
     └───...
   ├─── constants/
     └───...
   ├─── pages/
      └───...
   ├─── reducers/
      └───...
   ├─── routes/
      └───...
   ├─── services/
       └───...
   ├─── store/
       └───...
...

Rotas

A aplicação tem apenas duas rotas disponíveis na aplicação. Uma hora de apresentação, onde é possível buscar o usuário do Github. E outra rota com informações do usuário buscado

Tabela de rotas

As rotas da aplicação estão listadas na tabela abaixo:

Rota | Descrição -------------------- | -------------- GET / | Está é a rota raiz de apresentação da aplicação. Onde é possível buscar um usuário. GET /results/: username | Está é a rota que apresenta informações sobre o usuário buscado. Como parâmetro para a rota lhe é passado o username do usuário que será listado suas informações