Aplicativo de delivery de comida Rappi4, projeto Front End :)
| Marcelino Sandroni |
|---|
|
Foi elaborado o design do app de comida favorito do Brasil, agora com cara nova está delicinha de mais!
Este projeto está muito bem organizado em pastas para cada tipo de conteúdo, com cada item da categoria tendo uma pasta, onde se encontra a estrutura lógica no arquivo index.jsx, e as estilizações no arquivo de estilo modular scss.
Tem um service file com os métodos utilizados no app, de forma a aproveitar as chamadas, e ainda usando uma function base para reaproveitamento de código, elaborando 11 chamadas assíncronas da API em apenas 50 linhas bunitinhas.
Utilizei global states com react context api, de modo a reutilizar informações no app, o principal contexto é o cart, onde está definido dentro do contexto todas propriedades e operações relacionados ao carrinho, de modo a simplificar, organizar e facilitar o uso, tendo todas movimentações em um único objeto. Lindo de mais.
Usei também context api para thema do projeto, e auth provider, juntando tudo em um componente GlobalState para fornecer todos os estados globais de um mesmo componente pai para simplificar e deixar mais limpo o código.
hook para facilitar a navegação nas páginas, para fácil uso em qualquer local, como por exemplo go.home, go.cart, de forma simples sem precisar utilizar history toda hora, o hook export todas operações em formado de objeto, e há opeções de passar também estados entre as mudanças de rotas.
hook completinho para utilização em form, inspirado no react-hook-form, este é nossa lib melhor que o original, controla todos os dados e inputs do formulários, com o método register, indicando apenas o nome como argumento, além de opções para validação e mask, para controla automático da validação, com as propriedades error e success para controlar o estado de validação de cada item do form, e os métodos de verify para verificar campos em branco ou com erros de validação, e acionar o texto helper.
Best hook of the world, contruímos um hook completão de request, para uso no app de forma muito fácil e organizado, o hook recebe um serviço de api e retorna o estado com estes dados, além dos estados indicando se está carregando para fazer loadings, e o estado de erro para verificar os problemas nas requisições, além de várias opções que podem ser passadas, como selecionar uma propriedade no retorno a fim de facilitar o manuseio dos dados retornados, e opeções para não iniciar a chamada de imediato, ficando em espera para uso posterior com alguma interação com o usuário.
Verificar em todas as rotas se há autenticação do usuário, e redireciona para tela de login caso não tenha autenticação, este hook é usamos apenas no componente Layout, onde carrega todos os compoentens do projeto, facilitando o uso de forma simples e eficiente.
Fiz componentes reutilizáveis em todo o projeto, para escrever o mínimo de código possível e não precisar repetir código e estilização.
Fiz também uma biblioteca dos componentes para fim de controle e organização com o storybook, várias histórias de componentes durante a vida do app, para fácil manutenção e visualização.
Optamos por utilizar o sass, para facilitar o desenvolvimento, além de ser muito potento com vários recursos, ele faz exatamente a proposta do react, em separar tudo de forma modular e restrita, além de componentizar os próprios estilos com variable, mixins, sass components, functions e etc.
- React CRA
- SASS
- classNames
- React Router
- Storybook
yarn && yarn start
yarn storybook
- Barras de progresso para loading de rotas
- Efeitos de loading em retangulos estilo youtube e netflix para box e textos
- Usar typescript para melhor controle
- Converter app para NextJS para ter dados estáticos
- Mudar home para listar restaurantes e pratos indicados mesmo sem login
- Terminar desktop layout
- Contruir versão mobile com React Native
- Implementar opções dos itens para customização estilo Ifood
- Criar nova API mais completa e com mais dados
usamos o whimsical para elaborar o fluxograma de componentes do nosso app, ótima ferramenta, muito intuitiva para elaboração desses tipos de gŕaficos e fluxos.
Utilizamos a API feita em nodejs pelo tipo de instrutores do backend da Labenu, está documentado no postman docs
Recebemos o design prototype pronto da designer Camila Mizutani, elaborado no zeplin
Instruções da equipe gestora do curso para elaboração do projetinho