gorestaurant-v2.0: A TypeScript repository from die-goncalves

Sobre • Tecnologias • Funcionalidades • Instalação • Layout • Visão do projeto • Agradecimento • Licença • Autor

Sobre

GoRestaurant é um serviço de entrega de alimentos online

Este projeto foi desenvolvido com a finalidade de aprimorar minhas habilidades no desenvolvimento frontend, apliquei a maioria dos conhecimentos adquiridos durante minha participação no bootcamp Ignite da RocketSeat. Um dos projetos realizados no bootcamp se chamava GoRestaurant que pode ser visto aqui e em busca de um upgrade me deparei com os sites Deliveroo, Ubereats e Swiggy que são serviços de entrega de alimentos online e possuem entre si semelhanças, então baseando-se neles resolvi transformar o projeto em um serviço de entrega de alimentos online.

No projeto o usuário poderá fazer uma conta, indicar seu endereço de entrega, escolher um restaurante próximo dele, pedir os alimentos que quiser, efetuar a compra dos pedidos, avaliar os alimentos e acompanhar o status do pagamento.

As imagens das comidas e dos restaurantes podem ser encontradas em Unsplash e Pexels. As imagens que estão presentes nos créditos para referenciar Deliveroo, Ubereats e Swiggy podem ser encontradas em seus websites.

Tecnologias

Veja o arquivo package.json

Sobre as tecnologias

Listagem das principais tecnologias e porque foram utilizadas

O que foi trabalhado com o Next.js no projeto?
- As duas formas de pré-renderização de páginas, Static Generation e Server-side Rendering,
- Páginas com rotas dinâmicas,
- API Routes,
- Importação dinâmica de componentes,
- next/link para ter o funcionamento de single page application(SPA),
- next/image para obter maior performance na manipulação de imagens,
- next/router para fazer os redirecionamentos entre as páginas e auxiliar na construção de link ativo em um componente de navegação.
Utilização do React Hook Form para a contrução dos formulários de entrar e cadastrar, além de utilizar o yup para valiadação dos dados e zxcvbn para estimar a força da senha.
Utilização do Supabase para trabalhar com banco de dados e autenticação/autorização.
O emprego do Chakra ui no projeto facilita o processo de desenvolvimento de interfaces.
Utilização do Stripe que permite lidar com pagamentos e acompanhar o status do fluxo de um pagamento usando webhooks.
Dos recursos do Mapbox, utilizar a biblioteca Mapbox GL JS para exibir mapas Mapbox no navegador e adicionar interatividade do usuário, converter coordenadas geográficas em características do local, como endereço e região, com Mapbox Geocoding API e calcular tempo e distância entre dois pontos no mapa com Mapbox Directions API .
Com o React Query foi possível deixar a listagem de restaurantes mais performática.
Utilização do Embla Carousel para fazer o slide de imagens
Utilização do React Hot Toast para emitir notificações de sucesso/erro/informativo.
Utilização do Nookies para manipular tanto do lado do cliente e do servidor os cookies criados para armazenar itens no carrinho e taxa de envio dependendo da localização do usuário. O cookie HttpOnly sb:token gerado ao fazer a autenticação do usuário são inacessíveis para esta biblioteca e para a API JavaScript Document.cookie, é possível excluí-lo usando supabase auth signOut.
Com o TypeScript podemos escrever códigos mais corretos e organizados.

Funcionalidades

Página inicial
- O usuário poderá se cadastrar, excluir sua conta e iniciar/encerrar sessão na aplicação;
- Autocomplete ao digitar endereço;
- Obtenção do endereço, região, coordenadas e geohash no clique do usuário no mapa;
- Utilização de geohash ao redirecionar a localização obtida em uma página para outra;
  - Obtenção das informações de localização a partir do geohash.
- Visualização de todos os restaurantes em um mapa;
  - O clique em um restaurante no mapa mostra um pop-up com todas as informações relevantes do restaurante.
- Ao usuário que já realizou compras permitir a visualização dos endereços de entrega que já utilizou, esses endereços serão links que ao serem clicados ocorre o redirecionamento para a página de restaurantes de acordo com a região daquele endereço.
Página dos restaurantes
- Criação de sidebar onde o usuário poderá ordenar e filtrar os restaurantes, optar se quer entrega ou retirada e permitir a troca de localização;
  - A filtragem ocorre sobre o preço de entrega se o usuário optou por entrega, e categorias de comida.
  - A ordenação ocorre de modo decrescente por avaliação geral de cada restaurante ou por tempo de entrega.
- Listagem de todos os restaurantes baseados na filtragem e na região do endereço de entrega;
- Cada filtro escolhido será mostrado acima da lista de restaurantes permitindo ao usuário um melhor gerenciamento da filtragem;
- Cada card de restaurante conterá seu nome, sua imagem, algumas das categorias de comidas, sua avaliação geral, tempo de entrega ou retirada, e preço de entrega.
Página de um restaurante específico
- Navegação entre página inicial e página de listagem de retaurantes com base na região do especificado;
- Visualização do nome, imagem, descrição, telefone e algumas categorias de suas comidas disponíveis do restaurante;
- Horário de funcionamento e status de aberto/fechado;
  - O restaurante com status fechado estará lógicamente impossibilitado de receber pedidos.
- Permitir a troca de localização do usuário apenas para a região do restaurante;
- Mostrar localização do restaurante em um mapa não interagível;
- Mostrar todas as comidas disponíveis, dividas por seção e com navegação entre as seções;
- Adicionar/Remover comidas ao carrinho
- No carrinho, permitir também adicionar/remover as comidas além de permitir a criação de uma sessão de checkout para realizar o pagamento.
- A sessão de checkout será uma sessão do Stripe. Ao realizar o pagamento o usuário é redirecionado para a página inicial.
Páginas do painel de controle
- Apenas usuários assinados podem acessar essas páginas.
  - Página de configurações que permite a exclusão de conta;
  - Página de avaliações que permite a avaliação de comidas quando um pagamento foi concluído;
  - Página de pagamentos que permite visualizar o status de todos os pagamentos realizados.
Página sobre o projeto e os créditos
- Todos usuários podem ver, sendo assinado ou não.
- Breve descrição sobre o projeto e os créditos para os autores dos ícones utilizados e para os websites utilizados para a construção deste.

Instalação

Pré-requisitos
- É necessário possuir o Git instalado e configurado no computador.
- É necessário ter um gerenciador de pacotes seja o NPM ou Yarn.
- É necessário ter uma conta no mapbox.
- É necessário ter uma conta no stripe.
- É necessário ter uma conta no supabase.
Próximo passo

Faça um clone deste repositório:

$ git clone https://github.com/die-goncalves/gorestaurant-v2.0.git

Instale as depêndencias:

# Entre no diretório do repositório clonado
$ cd gorestaurant-v2.0
# Instale as dependências do projeto.
$ yarn #ou $ npm install

Crie na raiz do projeto o arquivo .env.local.
```
# .env.local
# STRIPE
 STRIPE_WEBHOOK_SECRET=
 STRIPE_API_KEY=
 NEXT_PUBLIC_STRIPE_PUBLIC_KEY=
 STRIPE_SUCCESS_URL=
 STRIPE_CANCEL_URL=
 # MAPBOX
 NEXT_PUBLIC_MAPBOX_TOKEN=
 # SUPABASE
 NEXT_PUBLIC_SUPABASE_URL=
 NEXT_PUBLIC_SUPABASE_ANON_KEY=
 NEXT_PUBLIC_SUPABASE_SERVICE_ROLE_SECRET_KEY=
```
Stripe
- Crie uma conta Stripe se não tiver;
- Crie uma empresa;
- Utilize no modo teste;
- Adicione as seguintes comidas deste arquivo, clicando no link de navegação Produtos. Em detalhes do produto coloque apenas o nome, em detalhes do preço coloque o preço e clique em uma única vez
  - Copie o id do produto e do preço de cada comida adicionada.
- Obtenção das chaves 1 - Ir no link de navegação Desenvolvedores -> ir na opção Chaves da API na sidebar: NEXT_PUBLIC_STRIPE_PUBLIC_KEY - Chave publicável STRIPE_API_KEY - Chave secreta 2 - Como estamos em modo de desenvolvimento usaremos a Stripe CLI para ouvir eventos do fluxo de pagamentos. Siga este tutorial para encaminhar os eventos para sua aplicação. Você receberá a chave STRIPE_WEBHOOK_SECRET quando executar stripe listen --forward-to localhost:3000/stripe_webhooks. 3 - Estas variáveis você define: STRIPE_SUCCESS_URL é a rota da página que o usuário é redirecionado ao realizar uma compra. E STRIPE_CANCEL_URL é a rota da página que o usuário é redirecionado ao cancelar uma compra.
Mapbox
- Crie uma conta Mapbox se não tiver;
- Obtenção da chave:
  - Vá em account e você verá o token, copie em NEXT_PUBLIC_MAPBOX_TOKEN
Supabase
- Crie uma conta Supabase se não tiver;
- Crie um projeto;
- Copie o conteúdo deste arquivo Criação de tabelas, vá até SQL Editor na sidebar, clique em New query e agora cole e execute. Agora você tem todas as tabelas;
- Para preencher os dados disponibilizei este arquivo onde temos todas as inserções necessárias, mas você terá que fazer o seguinte: para cada comida em insert into foods coloque o id do produto e do preço copiado anteriormente no lugar onde está escrito id_produto e id_preco. Agora vá até SQL Editor na sidebar, clique em New query, cole e execute. Pronto! Agora cada comida adicionada no Stripe possui referência no banco de dados.
- Obtenção das chaves:
  - Para preencher as chaves do supabase siga este guia.
Banco de dados

Diagrama entidade relacionamento

Execute a aplicação

# Em um terminal
$ yarn dev #ou $ npm run dev
# A aplicação inciará na porta:3000 - acesse <http://localhost:3000>

# Em outro terminal
$ stripe listen --forward-to localhost:3000/stripe_webhooks
# Lembrando que a chave STRIPE_WEBHOOK_SECRET tem que ser a mesma que aparece ao executar este comando.