Rappi4 project

Aplicativo de delivery de comida Rappi4, projeto final Front End :)

Integrantes do grupo de desenvolvimento

Marcelino Sandroni	Luana Farias da Silva	Marcos Maia

Veja aovivo

rappi4.surge.sh

Sobre

Elaboramos 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.

Temos 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.

Utilizamos 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.

Usamos 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.

Fizemos vários hooks customizados para este projeto, como:

useGo

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 gora, 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.

useForm

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.

useRequest

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.

useProtectedPage

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.

Componentes

Fizemos 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. Fizemos 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.

SASS Style

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.

Dependências

• React CRA
• SASS
• classNames
• React Router
• Storybook

Como rodar?

yarn && yarn start

Biblioteca de componente

yarn storybook

Implementações a serem feitas:

• 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

Imagens

DARK MODE

LIGHT MODE (Default)

Fluxograma

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.

Components Fluxogram

API

Utilizamos a API feita em nodejs pelo tipo de instrutores do backend da Labenu, está documentado no postman docs

API Documentation

DESIGN

Recebemos o design prototype pronto da designer Camila Mizutani, elaborado no zeplin

Design prototype

NOTION

Instruções da equipe gestora do curso para elaboração do projetinho

Instruction da chefia