A URL deste repositório deverá ser entregue na plataforma de alunos da Cubos Academy na página da parte de FRONTEND do desafio.

A versão final do código de cada sprint deverá estar na branch principal do repositório e sim, a cada semana acumulará as alterações das sprints, portanto a segunda sobrescrevendo a primeira e assim por diante.


No fork de vocês, favor alterar este README para adicionar os links correspondentes para os seguintes itens:

Repositório de Backend:

Repositório de Frontend:

URL da aplicação funcionando:


E os itens abaixo, que deverão ser preenchidos apenas após a finalização de todas as sprints do projeto:

Pull Request (PR) de Backend:

Pull Request (PR) de Frontend:

Estes Pull Requests (PRs) deverão ser criados a partir da branch principal do fork correspondente de vocês daquela stack tendo como destino o repositório base da stack do desafio.

Ou seja, o Pull Request de FRONTEND deverá ser criado a partir do fork de vocês desse repositório aqui, com destino a este repositório aqui.

E portanto o Pull Request de BACKEND deverá ser criado a partir do fork de vocês do repositório base de BACKEND desse desafio, com destino ao repositório base de BACKEND desse desafio.

Figma Desafio M05 - Sprint 1


1ª Sprint
[Usuário] Cadastro do usuário

Na posição de usuário do sistema, desejo cadastrar meus dados, afim de ter acesso ao sistema.


  • Critérios de aceite
    • O cadastro deverá funcionar em formulário web que funcione em um navegador padrão
    • Para acessar este formulário de cadastro não deverá ser exigida autenticação
    • Os dados do cadastro deverão ser persistidos de maneira que possam ser consultados em qualquer momento no futuro até que sejam excluídos.
    • O usuário poderá visualizar sua senha enquanto a escreve (Ex: Material UI Input Adornment https://mui.com/material-ui/react-text-field/
    • A senha do usuário deverá ser persistida utilizando algum algoritmo de criptografia confiável

  • Campos necessários para o cadastro inicial (obrigatórios):

    • Nome do usuário (obrigatório)
    • Email (obrigatório)
    • Senha (obrigatório)
  • Deverão ser informadas mensagens de erro em casos de:

    • Campos obrigatórios em branco
    • E-mail informado já existir cadastrado
    • Após realizado o cadastro com sucesso o usuário deverá receber uma mensagem de confirmação e um botão para ser redirecionado para a página de Login.
[Usuário] Login do usuário

Na posição de usuário do sistema, devo ser capaz de realizar login no Dashboard, afim de acessar o sistema.


  • Critérios de aceite

    • O login do usuário deverá ser realizado em formulário web funcionando em navegador padrão
  • Campos obrigatórios:

    • E-mail
    • Senha
    • Deverá ser possível informar os dados de acesso (e-mail e senha) e então clicar em botão para realização do login
  • Deverão ser informadas mensagens de erro em casos de:

    • Campos obrigatórios em branco
    • E-mail não existe no cadastro
    • Senha incorreta para o e-mail
    • Criação de token de autenticação após validação dos dados (credenciais) de acesso (e-mail e senha).
  • Após realização de login com sucesso, deverá ser retornado ao navegador o token de autenticação de forma que possa ser utilizado em outras funcionalidades que exigem autenticação. O usuário deverá ser redirecionado para a home do sistema

[Dashboard] Home e Menu

Na posição de usuário do sistema, desejo visualizar uma tela inicial, afim de poder navegar pelo sistema através do menu.


  • Critérios de aceite

    • A página deverá funcionar em um navegador web padrão.
    • Apenas usuários autenticados deverão conseguir acessar esta página
  • Esta tela deverá ter uma imagem padrão de usuário e o primeiro nome do usuário no canto superior direito, que ao clicar, abrirá um menu com dois botões:

    • O primeiro é o "Editar", que abrirá um modal de atualização do cadastro do usuário logado.
    • O segundo é o botão "Sair", que irá deslogar o usuário do sistema
  • Deverá existir um menu lateral que permitirá o usuário navegar pelos módulos do sistema, contendo os links:

    • Home
    • Clientes
    • Cobranças
  • Esta tela deverá ter 8 cards com as seguintes informações:

    Resumo do Valor Total das Cobranças

    • Pagas

    • Vencidas

    • Previstas

    • Cobranças Vencidas

    • Cobranças Previstas

    • Cobranças Pagas

    • Clientes Inadimplentes

    • Clientes Em dia

[Usuário] Edição do usuário logado

Na posição de usuário dos sistema, desejo editar meus dados de usuário, quando logado no sistema.

  • Critérios de aceite

    • Através de um clique no perfil da Dashboard serão abertos dois botões:
      • Editar
      • Sair
    • Ao clicar em "Editar" o formulário de edição dos dados do usuário deverá ser aberto.
    • A edição deverá funcionar em formulário web que funcione em um navegador padrão
    • Ao abrir o formulário, os dados do usuário logado deverão ser carregados nos respectivos campos
    • Para acessar este formulário de cadastro será exigido autenticação.
  • Os dados da atualização deverão ser persistidos de maneira que possam ser consultados em qualquer momento no futuro até que sejam excluídos.

  • O usuário poderá ou não visualizar sua senha enquanto a escreve (Ex: Material UI Input Adornment)

    • Caso seja informado uma nova senha do usuário, a mesma deverá ser persistida utilizando algum algoritmo de criptografia confiável

    • O usuário poderá atualizar os respectivos dados a seguir :

      • Nome do usuário (obrigatório)
      • E-mail (obrigatório)
      • Senha (obrigatório - apenas se for alterar a senha)
      • CPF
      • Telefone
  • Deverão ser informadas mensagens de erro em casos de:

    • Campos obrigatórios passados em branco
    • E-mail informado for diferente do usuário logado e já existir cadastrado para outro usuário
  • Após realizado a atualização com sucesso o usuário deverá receber uma mensagem de confirmação

[Cliente] Cadastro do cliente

Na posição de usuário do sistema, desejo cadastrar clientes, afim de acessar suas informações no futuro.

  • Critérios de aceite

    • O cadastro deverá funcionar em formulário web que funcione em um navegador padrão

    • Para acessar este formulário de cadastro deverá ser exigida autenticação

    • Os dados do cadastro deverão ser persistidos de maneira que possam ser consultados em qualquer momento no futuro até que sejam excluídos.

    • Campos necessários para o cadastro (* obrigatórios):

      • Nome do usuário (*)
      • Email (*)
      • Cpf (*)
      • Telefone (*)
      • Cep
      • Logradouro
      • Complemento
      • Bairro
      • Cidade
      • Estado
    • Opcionalmente, poderá ter a busca do endereço ao digitar o CEP utilizando a api do ViaCEP

    • Deverão ser informadas mensagens de erro em casos de:

      • Campos obrigatórios em branco
      • E-mail informado já existir cadastrado
      • Após realizado o cadastro com sucesso o usuário deverá receber uma mensagem de confirmação.
[Dashboard] Configuração do Deploy

Na posição de usuário do sistema, devo ser capaz de acessar o sistema através da internet, afim de usar o sistema em qualquer dispositivo com acesso a internet.

  • Critérios de aceite

    • O frontend poderá ser hospedado na Netlify
    • O backend e banco de dados poderá ser hospedado na Heroku
    • O frontend hospedado deverá ser integrado ao backend também hospedado

ATENÇÃO É indispensável fazer deploy do projeto e disponibilizar a URL para o cliente realizar os testes. O não cumprimento desta etapa será considerada uma falha grave.


Figma Desafio M06 - Sprint 2


2ª Sprint
[Cliente] Listagem do cliente

Na posição de usuário do sistema, desejo visualizar uma listagem com todos os clientes cadastrados.

  • Critérios de aceite
  • A página deverá funcionar em um navegador web padrão.
  • Apenas usuários autenticados deverão conseguir acessar esta página
    • Ao clicar no item "clientes" do menu lateral deverá ser redirecionado para uma página com a listagem de todos os clientes cadastrados no sistema.
    • Deverá existir um botão "Adicionar Cliente", que ao clicado, será aberto um modal para cadastro de cliente.
    • Na listagem de clientes, cada item deverá mostrar:
    • O nome do cliente
    • O e-mail do cliente
    • O telefone do cliente
    • CPF
    • Status
      • Se houver alguma cobrança vencida (com status pendente e com data de vencimento anterior a data atual), deverá exibir "Inadimplente", caso contrário, deverá exibir "Em dia".
    • Botão de atalho, dentro da listagem, para "adicionar cobranças"
  • Cada nome do cliente na listagem deverá poder ser clicado de forma que ao fazê-lo, abra uma página com todos os detalhes do cliente
[Cliente] Detalhamento do cliente

Na posição de usuário do sistema, desejo visualizar todos os detalhes de um cliente cadastrado, a fim de consultar seus dados e suas respectivas cobranças.

  • Critérios de aceite:
    • A página deverá funcionar em um navegador web padrão.
    • Apenas usuários autenticados deverão conseguir acessar esta página
    • Ao clicar no nome do cliente na listagem deverá abrir uma nova página com todos os detalhes do cliente clicado
    • A página deverá mostrar 2 cards:
      • O primeiro com um botão para editar cliente (ao clicar no botão, deverá abrir um modal de edição do cliente e os campos do formulário preenchidos com seus respectivos dados) e os dados do cliente:
      • Um título com o nome do cliente
      • CPF
      • E-mail
      • Telefone
      • Endereço completo
      • O segundo com um botão para adicionar nova cobrança e a listagem de cobranças para o cliente em questão. Cada listagem deverá mostrar:
        • Identificador da Cobrança
        • Descrição
        • Data
        • Valor
        • Status
        • Descrição
[Cliente] Atualização do cliente

Na posição de usuário do sistema, desejo atualizar os dados de um cliente cadastrado.

  • Critérios de aceite:
    • O formulário deverá ser aberto através de um clique no ícone de editar no detalhe de clientes.
    • A atualização deverá funcionar em formulário web que funcione em um navegador padrão.
    • Ao abrir o formulário, os dados do cliente deverão ser carregados nos respectivos campos
    • Para acessar este formulário de cadastro será exigido autenticação
    • Os dados da atualização deverão ser persistidos de maneira que possam ser consultados em qualquer momento no futuro até que sejam excluídos.
    • Na atualização do cliente, poderá atualizar os respectivos dados a seguir (campos com * são obrigatórios):
      • Nome (*)
      • E-mail (*)
      • CPF (*)
      • Telefone (*)
      • CEP
      • Endereço
      • Complemento
      • Bairro
      • Cidade
      • Estado
    • Deverão ser informadas mensagens de erro em casos de:
      • Campos obrigatórios passados em branco
      • E-mail informado for diferente do cliente em questão e já existir cadastrado para outro cliente
      • CPF informado for diferente do cliente em questão e já existir cadastrado para outro cliente
    • Após realizado a atualização com sucesso o usuário deverá receber uma mensagem de confirmação
[Cobranças] Cadastro de cobranças

Na posição de usuário do sistema, desejo cadastrar cobranças para um cliente, afim de acessar suas informações no futuro.

  • Critérios de aceite
    • O cadastro deverá funcionar em formulário web que funcione em um navegador padrão
    • Para acessar este formulário de cadastro deverá ser exigida autenticação
    • Os dados do cadastro deverão ser persistidos de maneira que possam ser consultados em qualquer momento no futuro até que sejam excluídos.
    • O cadastro de cobrança deverá ser exibido em modal.
    • Para abrir este modal do cadastro de cobrança, o usuário deverá poder proceder de uma das duas formas:
      • Clique no ícone de cadastrar cobrança, da coluna "Criar Cobrança" da listagem de clientes.
      • Clique no botão "+ Nova Cobrança" da listagem de cobranças da tela de detalhamento do cliente.
    • Campos necessários para o cadastro (* obrigatórios):
      • Cliente (*)
        • Deverá ser um campo de texto somente leitura exibindo o nome do cliente para o qual se está cadastrando a cobrança.
      • Descrição (*)
      • Status (*)
      • Deverá existir duas opções: "pago" e "pendente"
      • Valor (*)
      • Vencimento (*)
    • Deverão ser informadas mensagens de erro em casos de:
      • Campos obrigatórios em branco
    • Após realizado o cadastro com sucesso o usuário deverá receber uma mensagem de confirmação.
[Cobranças] Listagem de cobranças

Na posição de usuário do sistema, desejo visualizar uma listagem com todos as cobranças cadastradas.

  • Critérios de aceite:
    • A página deverá funcionar em um navegador web padrão.
    • Apenas usuários autenticados deverão conseguir acessar esta página
    • Ao clicar no item "cobranças" do menu lateral, deverá ser redirecionado para uma página com a listagem de todas as cobranças cadastradas no sistema.
    • Na listagem de cobranças, cada item deverá mostrar:
      • O identificador da cobrança
      • O nome do cliente
      • Descrição
      • Valor
      • Vencimento
      • Status
      • Pendente
      • Pago
      • Vencido (Caso o status seja pendente e a data de vencimento for anterior a data atual)


Figma Desafio M05 - Sprint 3

3ª Sprint
[Cobranças] Edição de cobranças

Na posição de usuário do sistema, desejo atualizar os dados de uma cobrança cadastrada.

  • Critérios de aceite:
    • Ao clicar no botão "editar" na tabela da listagem de cobranças ou na listagem de cobranças da página de detalhe do cliente, abrirá um modal para edição da cobrança.
    • A atualização deverá funcionar em formulário web que funcione em um navegador padrão
    • Ao abrir o formulário, os dados da cobrança deverão ser carregados nos respectivos campos
    • Para acessar este formulário de cadastro será exigido autenticação.
    • Os dados da atualização deverão ser persistidos de maneira que possam ser consultados em qualquer momento no futuro até que sejam excluídos.
    • Na atualização da cobrança, poderá atualizar os respectivos dados (campos com * são obrigatórios):
      • Descrição (*)
      • Status (*)
      • Valor (*)
      • Vencimento (*)
    • Deverão ser informadas mensagens de erro em casos de:
      • Campos obrigatórios passados em branco
    • Após realizado a atualização com sucesso o usuário deverá receber uma mensagem de confirmação
[Cobranças] Exclusão de cobranças

Na posição de usuário do sistema, desejo excluir uma cobrança cadastrada.

  • Critérios de aceite:
    • Na tabela da página de "listagem de cobranças" ou na tabela da página de "detalhes do cliente" existe um botão "excluir" que ao clicar, irá abrir um modal para confirmação da exclusão.
    • Só poderá excluir a cobrança, se:
      • A cobrança estiver com status pendente
      • A data de vencimento for igual ou posterior a data atual
    • Cobranças com status "pagas", não poderão ser apagadas
    • Após realizada a exclusão com sucesso o usuário deverá receber uma mensagem de confirmação e a cobrança excluída deverá ser removida da listagem.
[Cobranças] Detalhe da cobrança

Na posição de usuário do sistema, desejo atualizar os dados de uma cobrança cadastrada.

  • Critérios de aceite:
    • Ao clicar na linha referente a cobrança da tabela da listagem de cobranças ou na listagem de cobranças da página de detalhe do cliente, abrirá um modal com os detalhes das cobranças.
    • Deve aparecer todos os campos da cobrança cadastrada
    • O modal deve ter um botão de fechar o detalhe da cobrança
[Cobranças/Clientes] Busca e ordenação

Na posição de usuário do sistema, desejo buscar cobranças e clientes a partir de suas respectivas listagens.

  • Critérios de aceite:
    • Na listagem de cobranças deverá possibilitar a ordenação dos registros pelo nome do cliente ou ID da Cobrança
    • Na listagem de cobranças deverá existir um campo de busca onde permitirá buscar cobranças pelos seguintes campos:
      • Nome do cliente
      • Id da cobrança
    • Nas listagens de clientes deverá possibilitar a ordenação dos registros pelo nome
    • Nas listagens de clientes deverá existir um campo de busca onde permitirá buscar clientes pelos seguintes campos:
      • Nome do cliente
      • CPF do cliente
      • E-mail do cliente
    • Em caso de não retornar nenhum resultado uma mensagem adequada deverá ser exibida.
[Cobranças/Clientes] Botão "ver todos" - Home

Na posição de usuário do sistema, desejo visualizar um relatório personalizado de cobranças e clientes.

  • Critérios de aceite:
    • A página deverá funcionar em um navegador web padrão.
    • Apenas usuários autenticados deverão conseguir acessar esta página
    • Em cada elemento dos cards "Total Vencidas", "Total Pagas" e "Total Prevista", deverá ter o somatório das contas de acordo com a sua categoria
    • Em cada elemento dos cards da home, deverá exibir a contagem de cobranças e clientes de acordo com seus respectivos status
    • Ao clicar no nome "Ver Todos" no card de "clientes inadimplentes” ou “clientes em dia", deverá ser redirecionado para a página clientes com a listagem dos clientes filtrados, por cada categoria.
    • Ao clicar no nome "Ver Todos" no card de "cobranças vencidas" ou cobranças previstas" ou "cobranças pagas", deverá ser redirecionado para a página cobranças com a listagem de todas as cobranças já filtrada por cada categoria.