Uma aplicação Web responsiva desenvolvida com create-react-app que consulte a API da empresa Goomer e exibe uma lista de restaurantes e o cardápio de cada um deles.
Features • Tecnologias • Arquitetura • Testes • Como usar • Desafios • Melhorias •
- Listar restaurantes.
- Buscar por um ou mais restaurantes.
- Exibir restaurantes abertos e fechados sem a necessidade de recarregar ou reabrir a página.
- Exibir o nome, a imagem, o endereço e o horário de funcionamento do restautante caso exitam.
- Listar cardárpio do restaurante.
- Buscar por um ou mais produtos do cardápio.
- Exibir o nome, a imagem, o valor e uma descrição do produto caso existam.
- Para os produtos com promoção ativa, deve ser exibibo o valor original e o valor promocional.
- As promoções ativas e o valor promocional devem ser atualizados na interface de acordo com o horário, sem a necessidade de recarregar ou reabrir a página.
- Quando o usuário clicar em um produto, abrir um modal exibindo suas informações e opções de adicionar e remover quantidades desse produto, exibir também o valor original e o valor total com base na quantidade selecionada.
- Testes unitários nas principais funções do projeto.
- Adicionado botão de voltar caso o usuário não esteja na Home.
As seguintes ferramentas foram usadas na construção do projeto:
src/
|-- assets/ # Contém todos os assets da aplicação.
|-- components/ # Contém os components reutilizáveis do projeto.
|-- function/ # funções globais, que podem ser reutilizadas.
|-- pages/ # Todas as páginas do projeto estão dentro dessa pasta.
|-- routes/ # Arquivos de roteamento.
|-- services/ # Arquivos de configurações de requisições a API.
|-- store/ # Arquivos dos estados globais da aplicação, onde estão todas as regras do Redux.
|-- styles/ # Contém todos os arquivos relacionados a padronização de estilos do projeto.Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js, yarn ou npm.
Além disto é bom ter um editor para trabalhar com o código como VSCode
git clone https://github.com/fernando-meira/goomer-frontend-challenge.gitcd goomer-frontend-challengeyarn
# ou npm installyarn startO servidor inciará na porta :3000 - acesse http://localhost:3000
yarn testSem dúvidas a feature mais complexa foi a de tratamento dos horários dos restaurantes e dos valores promocionais, as informações terem de ser atualizadas em tela sem o recarregamento também foi desafiador.
Para o gerenciamento de estados globais da aplicação utilizei o Redux, normalmente utilizo a Context API, mas queria me testar e apesar de não ter o domínio da ferramenta a implementação foi bem-sucedida.
Outro ponto foram os testes unitários, até esse projeto eu não tinha tido contato, apesar de não implementar nos componentes consegui nas principais funções.
Uma melhoria na aplicação seria a implementação dos testes unitários nos componentes utilizando Jest combinado com Testing Library para evitar erros que não foram previstos durante o desenvolvimento.
Outro ponto a ser revisto é o tratamento de erros, hoje está sendo feito através do throw new error, poderia ser adicionado um toast ou um alert para notificação ao usuário.
Relacionado a performance, poderiamos migrar o projeto de CRA para Next.js, com isso ganhariamos desempenho graças as páginas server side rendering e static site generator que a ferramenta oferece, e ainda teriamos um melhor gerenciamento de SEO.
Feito com muita dedicação, empenho e carinho! Agradeço de coração a Goomer pela oportunidade!
