simple-store-manager

Sistema de Gerenciamento de Estabelecimentos(SGES)

Projeto simples que utiliza React com TypeScript no frontend e NodeJS com o framework Fastify no backend.

Este é um monorepo feito com Lerna.

Funcionalidades

• Autenticação com JsonWebTokens
• Criptografia de senha
• API REST com comunicação com JSON e rotas protegidas
• CRUD de estabelecimentos
• Busca de estabelecimentos pelo endereço/local e por nome¹
• Favoritar estabelecimentos
• Layout simples e responsivo

¹ Por questões de praticidade, foi utilizado para busca por estabelecimentos o $text do MongoDB, que é performático mas fraco em obter os resultados da busca corretamente.

Requisitos

• Nodejs v13+
• MongoDB v3+

Instalação

cd simple-store-manager
npm i

Também é excecutado npx lerna bootstrap que baixa os pacotes do frontend e backend.

Execução

Desenvolvimento

Inicia o frontend e backend no localhost, portas 3000 e 8080 respectivamente.

Inicie individualmente com dois terminais:

 cd simple-store-manager/packages/client
 npm start

 cd simple-store-manager/packages/server
 npm start

Produção

Gera uma build de produção do frontend (npm run build -> react-scripts build) e copia os arquivos para a pasta ./public no servidor. O servidor serve de host do frontend.

 cd simple-store-manager
 npm run start-prod

Detalhes

Organização de pastas

./packages/client/src:

• ./api:

Arquivos para requisições do servidor, organizados por rotas.

• ./components:

Componentes de visualização (sem lógicas), genéricos e específicos, do app.

• ./contexts:

Contexts da aplicação.

• ./hooks:

Alguns hooks customizados do react.

• ./pages:

Componentes de páginas do app, contém lógicas, navegação, chamada para APIs e afins.

./packages/server:

• ./decorators:

Funções utilitárias para decorar/injetar na instância do servidor, tornando-as disponíveis em rotas e middlewares.

• ./hooks:

Funções para serem chamadas no ciclo de vida das requisições

• ./routes:

Rotas da API e seus respectivos handlers.

• ./index.js:

Entry file do servidor, setta configurações, inicializa plugins, decorators, hooks, rotas e então roda o servidor.

TODO

• Refresh do token ao expirar (para não ter que fazer login)
• Testes
• Modal de editar dados do usuário
• Mais campos para estabelecimentos (telefone, tipo...)
• Indicador de loading entre telas
• Docker?

Outras bibliotecas

Frontend

• Ant Design
• Axios
• React Router

Backend

• Fastify JWT
• bcrypt
• shx

Imagens