Este projeto faz parte do curso de formação desenvolvedor em web full stack da Trybe. e foi o projeto final do bloco de front-end. E foi realizado em grupo.
O grupo foi composto por:
Para replicar o projeto, atente-se a cada passo descrito a seguir. Se tiver qualquer dúvida, nos envie por email erikadeo.lima@hotmail.com! #vqv 🚀
Aqui, você vai encontrar os detalhes de como estruturar o desenvolvimento do seu projeto a partir deste repositório, utilizando uma branch específica e um Pull Request para colocar seus códigos.
Este projeto faz parte da formação da Trybe, ao clona-lo você concorda em referenciar seus autores e a escola
👨💻 O que deverá ser desenvolvido
Foi desenvolvido um app de receitas, utilizando o que há de mais moderno dentro do ecossistema React: Hooks e Context API!
Nele foi possível: ver, buscar, filtrar, favoritar e acompanhar o progresso de preparação de receitas e drinks!
O layout tem como foco dispositivos móveis, dessa forma todos os protótipos foram desenvolvidos em telas menores.
📝 Habilidades
Nesse projeto, fomos capazes de:
- Utilizar Redux para gerenciar estado
- Utilizar a biblioteca React-Redux
- Utilizar a Context API do React para gerenciar estado
- Utilizar o React Hook useState
- Utilizar o React Hook useContext
- Utilizar o React Hook useEffect
- Criar Hooks customizados
- Clone o repositório
- Use o comando:
git clone. - Entre na pasta do repositório que você acabou de clonar:
cd recipes-app
- Vá para a branch do seu grupo:
git checkout -b XXXXXXX && git pull, ondeXXé o nome da sua branch.
- Instale as dependências e inicialize o projeto
- Instale as dependências:
npm install
- Inicialize o projeto:
npm start(uma nova página deve abrir no seu navegador com um texto simples)
🎛 Linter e Stylelint
Usaremos o ESLint para fazer a análise estática do seu código.
Para garantir a qualidade do seu código de forma a tê-lo mais legível, de mais fácil manutenção e seguindo as boas práticas de desenvolvimento, nós utilizamos neste projeto o linter ESLint. Para rodar o linter localmente no seu projeto, execute o comando abaixo:
npm run lint
npm run lint:styles