Este é um projeto de conclusão do módulo React I🔗 do curso Vem Ser Tech, um programa Ada Tech em parceria com o iFood. O projeto consiste em uma plataforma web onde os usuários podem visualizar uma lista de receitas culinárias. Ele foi desenvolvido como parte do curso de React I.
A aplicação "ReceitApp" oferece as seguintes funcionalidades:
-
Página Inicial (/):
- Exibe uma lista de receitas culinárias em cards.
- Cada card exibe a imagem da receita, título e breve descrição.
- Os dados das receitas são estáticos vindo do JSON fornecido.
-
Detalhes da Receita (/recipe/:id):
- Ao clicar em um card de receita, o usuário é redirecionado para esta página.
- Exibe detalhes completos da receita selecionada, incluindo ingredientes, instruções de preparo, tempo de preparo, etc.
- Utiliza o parâmetro de rota (:id) para identificar a receita selecionada.
-
Campo de Busca:
- Permite que os usuários pesquisem receitas por nome ou categoria.
- Implementar um formulário de busca e exibe os resultados abaixo, baseado se a as palavras buscadas aparece no titulo ou ingredientes da receita.
- Utilizar recurso de gerenciamento de estado para controlar o campo de busca e resultados.
-
Usa um arquivo JSON como dados para a aplicação
As seguintes ferramentas foram escolhidas para o desenvolvimento deste projeto:
- Linguagem de Programação: TypeScript foi escolhido como a linguagem principal.
- Biblioteca Front-End: React.js foi utilizada para a criação da interface do usuário.
- Estilização: styled-components foi utilizado para estilizar os componentes.
- Navegação: react-router-dom foi usado para a navegação entre páginas.
Durante o planejamento e execução deste projeto, as seguintes decisões foram adotadas:
- Arquitetura SPA: A aplicação foi desenvolvida como uma Single Page Application (SPA) para proporcionar uma experiência de usuário mais fluida.
- styled-components: A estilização com styled-components permite uma melhor organização e modularização do código CSS.
- Rotas com react-router-dom: O uso do react-router-dom simplifica a navegação entre as páginas da aplicação.
Para executar este projeto em seu computador local, siga estas etapas:
-
Clone este repositório:
git clone https://github.com/josephmatheus/vem-ser-tech-projeto-modulo05.git
-
Navegue para o diretório do projeto:
cd vem-ser-tech-projeto-modulo05
-
Instale as dependências do projeto:
npm install
-
Inicie o servidor de desenvolvimento:
npm run dev
-
Abra seu navegador e acesse http://localhost:5173 para visualizar a aplicação.
Este projeto está licenciado sob a MIT License.