/paybook

Um app para gerenciar pagamentos a receber

Primary LanguageTypeScript

🚀 Sobre este projeto

Este é um app que tem como objetivo auxiliar um prestador de serviços ou vendedor no controle das dívidas dos clientes, mostrando as parcelas já pagas, as parcelas a pagar, bem como o total a receber.

Live Preview

🧠 Contexto

  • Érica é uma dentista que atende seus pacientes apenas com atendimento particular.
  • O pagamento do tratamento do paciente pode ser parcelado.
  • A cada tratamento, ela anota num caderninho quanto e quando cada paciente deve pagar.
  • Para saber quanto vai receber num determinado período, Érica precisa somar cada valor na calculadora.

O desafio foi implementar uma tela na nuvem com as seguintes funcionalidades:

  • Inserção de novos registros, com:
    • nome do paciente
    • quanto o paciente deve pagar
    • quando o paciente deve pagar
  • Total a receber dentro de um determinado período

💡 O que foi entregue

Desenvolvi uma tela responsiva na nuvem (ver deploy mais recente) com as seguintes funcionalidades:

  • Tela de Login, o que possibilita múltiplos usuários
  • Inserção de um valor total a ser divido, e o número de parcelas, sendo criadas automaticamente as entradas por cliente, com:
    • Nome do cliente
      • Se o cliente não existir na base de dados será criado
    • Quanto o cliente deve pagar
      • Se a divisão do valor total pelas parcelas não for exata, o valor restante será atribuído à última parcela
    • Quando o cliente deve pagar
      • Se a data da parcela cair em um final de semana, a parcela é criada com a data sendo a próxima segunda-feira
  • Total a receber dentro de um determinado período

Além dos itens requeridos, incluí as seguintes funcionalidades:

  • Total a receber de todos os clientes
  • Listagem de dívidas por cliente
  • Detalhamento da dívida de cada cliente

🧰 Tecnologias e ferramentas

Para este projeto foram utilizados:

📋 Instruções

Clone o projeto:

git clone git@github.com:israelss/paybook.git

Após clonar o projeto, instale as dependências:

npm install
# ou
yarn

Preencha o arquivo .env com as variáveis necessárias:

DATABASE_URL=postgresql://USER:PASSWORD@HOST:PORT/DATABASE1?schema=public
# Caso utilize o Postgres do Heroku em vez do Supabase, insira também a variável SHADOW_DATABASE_URL:
SHADOW_DATABASE_URL=postgresql://USER:PASSWORD@HOST:PORT/DATABASE2?schema=public

⚠️ Atenção ⚠️:

Para utilizar as migrações do Prisma no Heroku é necessário utilizar dois bancos atrelados ao mesmo app.

O primeiro banco atrelado ao app é atribuído automaticamente à variável DATABASE_URL.

O segundo será atribuído a uma variável aleatória.

É necessário substituir SHADOW_DATABASE_URL com a variável definida automaticamente no Heroku para o segundo banco ou criar uma nova variável no Heroku (SHADOW_DATABASE_URL) que aponte para o segundo banco criado.

Crie e popule o banco de dados (ambiente de produção):

npm run db:migrate
# ou
yarn db:migrate

Caso necessite recriar o banco

Execute o comando:

npm run db:reset
# ou
yarn db:reset

⚙️ Rodando o projeto

Modo de Desenvolvimento

Inicie o servidor de desenvolvimento:

npm run dev
# ou
yarn dev

Crie e popule o banco de dados (_ambiente de desenvolvimento):

npm run db:migrate:dev
# ou
yarn db:migrate:dev

Caso necessite recriar o banco

Execute o comando:

npm run db:reset:dev
# ou
yarn db:reset:dev

Abra http://localhost:3000. Edite os arquivos para ver as mudanças automaticamente refletidas no navegador.

Modo de Produção

Compile o projeto:

npm run build
# ou
yarn build

Inicie o servidor compilado localmente:

npm run start
# ou
yarn start

🧪 Testando o projeto

1️⃣ Testes unitários

Execute o comando:

npm run test:unit
#ou
yarn test:unit

📊 Cobertura

Para ver a cobertura de código execute o comando:

npm run test:unit:coverage
#ou
yarn test:unit:coverage

↔️ Testes e2e

Execute os comandos:

npm run test:e2e
#ou
yarn test:e2e

Quando terminar de rodar os testes, você pode parar e remover o container de teste com o comando:

npm run docker:down
#ou
yarn docker:down

⏭️ Próximos passos

Com mais tempo eu teria implementado as seguintes funcionalidades, e é o que pretendo fazer em breve:

  • Mais testes unitários
  • Mais testes e2e
  • Filtragem de clientes:
    • buscando pelo nome
    • buscando pela data da dívida a vencer
    • buscando pelo valor total a ser pago
  • Ordenação de clientes:
    • pelo nome (A-Z | Z-A)
    • pela data da dívida a vencer (próxima | distante)
    • pelo valor total a ser pago (maior | menor)
  • Filtragem de dívidas (no detalhamento):
    • buscando pela data da dívida a vencer
    • buscando pela data de pagamento (apenas dívidas já pagas)
    • buscando pelo status (pago | em aberto)
  • Ordenação de dívidas (no detalhamento):
    • por data da dívida a vencer (próxima | distante)
    • por data de pagamento (próxima -> pagas primeiro | distante -> em aberto primeiro)
    • por status (pago | em aberto)

Questões estéticas:

  • Um ícone para o site/app
  • Cores melhores
  • Atualmente não é possível realizar o scroll das seções, com o método scrollIntoView, simultâneamente e de forma suave quando, utilizando o Chrome (ou qualquer navegador que utilize o Chromium como base). Isso é um bug do Chromium, mas existem alternativas, como o método scrollTo, porém é necessário mais tempo para implementar essa solução.