Esta é a minha solução para o Teste técnico da seleção de estágio em Desenvolvimento de Software na Arise Technology.
Desenvolver um site responsivo de receitas que o usuário consiga buscar receitas por nome, primeira letra e ingredientes. As receitas devem ser obtidas da API TheMealDB.
Requisitos Obrigatórios:
- O site deve ser implementado em ReactJS;
- O código fonte deve ser disponibilizado no Github;
- O site deve ser hospedado em algum serviço de hosting como Github Pages, Netlify, Vercel, etc.
No terminal:
$ git clone https://github.com/igormath/arisetechnology-test.git
$ cd arisetechnology-test/
$ npm install
$ npm run dev
- Fluxo de desenvolvimento Mobile-First
- HTML5 semântico
- Tailwind CSS
- Flexbox e Grid
- React - Biblioteca JS
- Fetch API
- ViteJs
Neste projeto, utilizei o framework CSS Tailwind pela primeira vez. Minha maior dificuldade com essa ferramenta reside em relação às medidas utilizadas, especialmente para altura e largura, já que costumava utilizar VH e VW nos meus projetos. No entanto, a ótima documentação, muito bem organizada, e a modularização da estilização aplicada ajudaram bastante no processo de desenvolvimento.
Os diferentes endpoints da API também me permitiram fazer chamadas de diferentes formas, desde uma requisição no carregamento da página até a busca por nome da receita ou a seleção da primeira letra desta.
- Stackoverflow - Sempre ele. Tirei dúvidas desde HTML, Tailwind e React, tudo em um só lugar.
- W3Schools - Para mim a melhor fonte primária de informações sobre HTML, CSS e Javascript.
- React Router: O guia completo para navegação em aplicativos React - React router é uma biblioteca em constante evolução e esse vídeo me ajudou a entender as últimas novidades e implementar todas as rotas deste teste.
- How to Make Responsive Navbar With Hamburger Menu in ReactJS using Tailwind CSS | ReactJS Projects - Minha referência para montar o menu de sanduíches utilizando o Tailwind. Adaptei muitas coisas na minha implementação, desde medidas de padding e margin até a adição de semântica, mudando as tags HTML.
- Aprenda em 13:37: Tailwind CSS - Como este foi o meu primeiro projeto utilizando o Tailwind, utilizei esse vídeo para me inteirar, inicialmente, sobre o framework.
- Documentação Tailwind - Ótima para entender como o framework trata conceitos como responsividade.
- Biblioteca de Códigos ASCII - Ajudou-me com o match entre a letra selecionada e a requisição à API.