O objetivo do projeto é criar um app de receitas onde é possível ver, filtrar, favoritar e compartilhar receitas. O layout vai ter como foco inical dispositivos móveis, sendo posteriormente adaptado para desktop.
- Filtrar receitas por categorias;
- Acessar os detalhes de cada receita, com ingredientes e instruções;
- Favoritar, desfavoritar e compartilhar receitas;
- Acessar o perfil do usuário com as receitas favoritas;
⚠️ Clique na seta para ver a lista de cada etapa.
Tela de Login
- Desenvolver a tela de formulário com input de nome, e-mail, senha e botão de login.
- O botão do formulário só deve ser habilitado após um nome de usuário e uma senha com 6 caracteres ou mais serem preenchidos.
- Após a submissão do formulário, salvar no localStorage o nome do usuário na chave
user. - Redirecionar o usuário para a tela principal de receitas após a submissão e validação com sucesso do login.
Tela principal de receitas
- Implementar o header contendo os ícones de menu.
- Redirecionar o usuário para a tela de perfil ao clicar no botão de perfil.
- Implementar os botões de categoria para serem utilizados como filtro.
- Implementar o filtro das receitas por meio da API ao clicar no filtro de categoria.
- Implementar o filtro como um toggle, o qual se for selecionado novamente, o app deve retornar as receitas sem nenhum filtro.
- Redirecionar o usuário ao clicar no card da receita, para a tela de detalhes, que deve mudar a rota e conter o id da receita na URL.
- Realizar uma request para a API passando o id da receita que deve estar disponível nos parâmetros da URL.
Tela de perfil do usuário
- Possuir o nome do usuário digitado no login.
- Implementar 2 botões: um de "Voltar" e um de "Sair".
- Ao clicar no botão de "Voltar", a rota deve mudar para a tela de início.
- Ao clicar no botão de "Sair", o localStorage deve ser limpo e a rota deve mudar para a tela de login.
- Mostrar "Receitas favoritas" e os cards de cada receita, com o botão de "favorito" preenchido e um botão de compartilhar.
- O botão de compartilhar deve copiar a URL da tela de detalhes da receita para o clipboard.
- O botão de "desfavoritar" deve remover a receita da lista de receitas favoritas do localStorage e da tela.
- Ao clicar no card da receita, a rota deve mudar para a tela de detalhes daquela receita.
Tela de detalhes da receita
- Desenvolver a tela de modo que contenha a imagem da receita, o título, uma lista de ingredientes seguidos pelas quantidades, instruções de preparo, um botão de favoritar e um botão de compartilhar.
- O botão de favoritar deve ser preenchido quando clicado e a receita ser adicionada à lista de receitas favoritas do localStorage e deve aparecer no perfil do usuário em "Receitas favoritas".
- O botão de compartilhar deve copiar a URL da tela de detalhes da receita para o clipboard.
Para rodar o repositório é necessário clonar o mesmo e dar o seguinte comando para iniciar o projeto:
- Clone o repositório:
git clone https://github.com/thaina-lopes/prato-verde.git- Entre no arquivo do projeto
cd prato-verde- Instale as dependências
npm install- Inicialize o projeto
npm start
 |