007 Foods é uma aplicação web em React.js produzida em grupo, que acessa a base de dados de duas APIs de receitas, uma de comidas e outra de bebidas, criando uma interface de busca por receitas culinárias intuitiva e amigável, permitindo a visualização dos detalhes das receitas, o favoritamento e o compartilhamento com outras pessoas. Além disso, oferece um sistema de exploração, aonde é possível visualizar receitas por nacionalidade, por ingrediente e encontrar sugestões aleatórias de pratos e bebidas.
- Veja o post sobre a aplicação no LinkedIn aqui.
- Acesse o deploy da aplicação aqui.
Informações para utilizar a aplicação no deploy
- Para logar, o email deve estar no padrão
user@email.com, e a senha ter mais do que6 caracteres.
- Bem-vindo ao projeto 007 Foods
- Visualização
- Contexto
- Tecnologias e Ferramentas Utilizadas
- Instalação e Execução
- Notas
A aplicação foi desenvolvida com design responsivo e pensada para ser utilizada em dispositivos móveis. Sugerimos a vizualiação em resolução 360x640 pixels para a melhor experiência possível.
A aplicação 007 Foods é uma ferramenta que acessa as bases de dados de receitas de comidas e bebidas, permitindo ao usuário:
- Fazer login;
- Buscar por receitas por nome, ingrediente, primeira letra, tipo de drink ou refeição;
- Visualizar detalhes das receitas, com vídeo de execução, sugestões de acompanhamento e informações nutricionais;
- Favoritar ou compartilhar receitas;
- Acessar a seção de receitas prontas e favoritas após o login;
- Explorar as receitas por nacionalidade ou ingrediente, ou encontrar sugestões aleatórias de pratos e bebidas;
- Utilizar o Local Storage para manter informações das receitas favoritas, iniciadas e finalizadas.
Este projeto utiliza as seguintes tecnologias e ferramentas:
- React.js | Biblioteca para criar interfaces de usuário.
- Styled Components | Biblioteca para estilização do CSS.
- API de comidas | API utilizada para obter informações sobre receitas de comidas.
- API de bebidas | API utilizada para obter informações sobre receitas de bebidas.
- Context API | API utilizada para gerenciamento de estado.
- Trello | Ferramenta de gerenciamento de tarefas.
O React.js foi escolhido por ser uma das bibliotecas mais populares e amplamente utilizadas para criar interfaces de usuário. Além disso, o React.js é fácil de aprender e possui uma grande comunidade de desenvolvedores, o que torna mais fácil encontrar soluções para problemas comuns. O Styled Components foi escolhido porque permite que os desenvolvedores escrevam o CSS em formato de componente, o que torna o código mais legível e fácil de entender. As APIs de comidas e bebidas foram escolhidas por fornecerem informações detalhadas e variadas sobre receitas, o que enriquece a experiência do usuário na aplicação. A Context API foi utilizada para gerenciamento de estado, permitindo que informações importantes da aplicação sejam compartilhadas entre diferentes componentes, sem a necessidade de passá-las manualmente através de props. Isso torna o código mais limpo e fácil de entender. O Trello foi utilizado para gerenciamento de tarefas, seguindo metodologias ágeis durante o desenvolvimento.
git clone git@github.com:imsamuelcovalero/Project-Recipes-App.git
cd Project-Recipes-App
npm install
cd Project-Recipes-App
npm start
A aplicação foi desenvolvida utilizando o conceito de mobile first, ou seja, a interface foi projetada primeiramente para dispositivos móveis.
Este projeto utilizou a Especificação de Commits Convencionais, com alguns tipos da convenção Angular. Além disso, foi utilizado o pacote conventional-commit-cli para ajudar a seguir a convenção de commits. É importante utilizar a convenção de commits em projetos para manter o histórico de commits organizado e facilitar a leitura e o entendimento do que foi desenvolvido.
No desenvolvimento da aplicação foi realizado utilizando o Git para controle de versão e o GitHub como repositório remoto. Foram criadas branches para cada funcionalidade implementada e, posteriormente, mergeadas à branch principal.
Durante o desenvolvimento deste projeto, foram utilizadas metodologias ágeis, que são práticas que valorizam a interação e colaboração entre os membros de uma equipe de desenvolvimento, visando uma entrega mais rápida e eficiente do projeto. A utilização dessas práticas é especialmente importante em projetos em grupo, pois ajuda a manter a equipe alinhada e a evitar atrasos e retrabalhos desnecessários. Para saber mais sobre as metodologias ágeis, confira o Manifesto Ágil.
- O projeto foi desenvolvido seguindo os padrões de Clean Code especificados pelo Lint da Trybe.