Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/geovaneborba/ignite-pizzashop-web
https://github.com/geovaneborba/ignite-pizzashop-web
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/geovaneborba/ignite-pizzashop-web
- Owner: geovaneborba
- Created: 2024-04-26T21:08:19.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-04-29T21:23:07.000Z (8 months ago)
- Last Synced: 2024-04-29T23:01:27.638Z (8 months ago)
- Language: TypeScript
- Size: 289 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Sobre |
Aprendizado |
Tecnologias |
Pré requisitos |
Começando |
Autor
## :dart: Sobre
Um dashboard para gestão de estabelecimentos e controle de pedidos inspirado no estilo do iFood. Esse projeto tem como foco exercitar a comunicação da aplicação front-end com API (back-end) via requisições HTTP.
O projeto contém as seguintes funcionalidades:
- Cadastro de estabelecimento;
- Login de estabelecimento (magic link);
- Cadastro como cliente;
- Gestão de pedidos;
- Paginação da lista de pedidos;
- Filtros da lista de pedidos;
- Gestão do perfil do estabelecimento;
- Métricas p/ dashboard
- Média de receita total mês
- Média de pedidos por mês;
- Média de pedidos por dia;
- Média de cancelamento de pedidos por mês;
- Gráfico de receitas nos últimos 7 dias;
- Gráfico de produtos populares;
## :books: Aprendizado
Com a construção desta aplicação eu pude aprimorar ainda mais meus conhecimentos em:
- Autenticação JWT
- Caching e revalidação
- Conexão com back-end (API)
- Testes unitários
- Testes end-to-end
- Interface Otimista
- Mocking da API para facilitar o desenvolvimento e testes da aplicação
## :rocket: Tecnologias
As seguintes tecnologias foram usadas na construção do projeto:
- React
- React Router DOM
- Tailwind
- shadcn/ui
- React Query
- Radix
- Recharts
## :warning: Pré-requisitos
Antes de começar, você precisa ter o [Git](https://git-scm.com) e o [Node](https://nodejs.org/en/) instalados em sua maquina. E também você irá precisar de um PostgreSQL rodando em sua máquina
## :checkered_flag: Começando
O projeto pode ser inicializado utilizando os mocks de dados simulados ou caso queira e possível consumir os dados reais através da API.
### Utilizando Mocks
```bash
# Clone o repositório
$ git clone https://github.com/geovaneborba/ignite-pizzashop-web.git
# Entre na pasta
$ cd ignite-pizzashop-web
# Instale as dependências
$ npm install
# Para iniciar o projeto com a api mocked
$ npm run dev:mock
# O app vai inicializar e será informado no terminal o endereço e porta onde estará rodando a aplicação.
```
### Utilizando API
```bash
# Clone os repositórios abaixo
$ git clone https://github.com/geovaneborba/ignite-pizzashop-web.git
$ git clone https://github.com/geovaneborba/ignite-pizzashop-api.git
# Entre na pasta e instale as dependências
$ cd ignite-pizzashop-api && npm install
# Abra o arquivo .env.local e insira as configurações necessárias, como credenciais do banco de dados e chaves JWT
# Execute as migrações do banco de dados
$ npm run migrate
# Preencha o banco de dados com dados de amostra
$ npm run seed
# Inicie o servidor da API
$ npm run dev
# Em outra janela do terminal, entre na pasta do projeto web, instale as dependências e inicie o projeto
$ cd ../pizzashop-web && npm install
$ npm run dev
# O aplicativo será iniciado e você receberá informações no terminal sobre o endereço e a porta onde ele estará disponível
```
Feito com ❤️ por Geovane Borba