Esse projeto é uma plataforma fullstack para transferência de uma moeda digital sem valor real, que permite o cadastro usando usuário e senha, transferências entre usuários e inspeção do seu histórico de transações.
- 📱 Layout responsivo
- 🗝️ Sessões de usuário que ficam salvas por 24h
- 🔄 Sincronização periódica do histórico de transações
- 🎛️ Controle quais transações são exibidas e a sua ordem
- ⛔ Controle de erros e telas explicando o que pode ter ocorrido
- 🍂 Animações e transições agradáveis
Dado que o objetivo do desafio era criar uma aplicação fullstack com um backend em Node, optei pelo Vite no frontend em vez de algo como Next.js ou Remix, já que esses frameworks rodam em um servidor que também funciona como um "backend".
Como a maior parte dos estados críticos da aplicação são assíncronos e dependentes do banco de dados, optei pelo Tanstack-Query (antes conhecido como React-Query),
um pacote já bem consolidado e conhecido responsável pelo gerenciamento assíncrono de estados, em vez de algo como Redux ou Zustand/Jotai.
O resto dos estados locais da aplicação foram gerenciados com o hook useState nativo.
O rascunho do layout da aplicação foi feito no Figma, com uma identidade colorida e inspirada no brutalismo na web.
O WindiCSS foi o método escolhido para estilização da aplicação. Se trata de um fork do TailwindCSS com algumas funções a mais, como agrupamento de estados e modificadores.
O próprio Tailwind, por sua vez, é uma biblioteca de estilização que aplica regras de css a partir de classes de utilidade, exigindo assim conhecimento prévio de css mas facilitando
a modificação e iteração dos estilos.
Para animar as trocas de rota do React Router, utilizei a biblioteca Framer Motion, que foi usada também para coordenar animações de elementos dentro da UI.
- 🔒 Autenticação de usuário com JWT
- 📋 Validação e sanitização de inputs
- 📨 Criação de contas e transações atômicas
- 📜 Logger personalizado que registra requisições e erros
- 📊 Prisma Studio configurado no ambiente Docker
ORM moderna feita para o Typescript, com controle de migrações, transações atômicas nativas e o Prisma Studio que permite análise do banco de dados.
Biblioteca de validação nativa ao Typescript, extremamente útil para criar o middleware que valida o input do usuário de acordo com o schema esperado para cada rota.
Para clonar o projeto, execute o comando:
git clone https://github.com/jpsaiago/challenge-charlie.gitAs aplicações já estão configuradas, na maior parte, para serem executadas em um ambiente Node local. As exceções são:
-
Instalar as dependências de cada parte, de preferência com o
pnpmpara usar o lock-file já presente -
O backend precisa da url de conexão a uma instância do postgres, que pode ser modificada no arquivo
.envda pasta Backend na seguinte forma:Por padrão, o projeto vem com a string de conexão dentro da rede do Docker, se for modificar para rodar localmente, não apague.
-
Depois de configurar essa conexão, execute o seguinte comando e forneça um nome para a migração quando solicitado:
npx prisma migrate devFeito tudo isso, basta executar:
pnpm(ou yarn ou npm run) devna raiz de cada parte da aplicação.
A única configuração de ambiente necessária é a string de conexão Postgres no .env na raiz do Backend.
Dependendo da versão do Docker/Docker Compose que estiver presente na sua máquina, o comando que deve ser executado na raiz do repositório muda.
Na V2 do compose, execute:
docker compose upJá na V1, execute:
docker-compose upO Compose levantará 4 containers:
- Banco de dados na porta 5432
- Prisma Studio na porta 5555
- Backend na porta 8080
- Frontend na porta 8000
Existem alguns testes no backend que podem ser executados com:
npm testdesde que seu terminal esteja aberto na pasta que possui o package.json do backend e as dependências tenham sido instaladas.
- Dado o escopo da aplicação e para não prolongar demais o desenvolvimento do desafio, não escrevi testes para o Frontend, porém usaria o
Vitest, suite de testes doViteque usa umaAPIigual a doJest. - Também expandiria os testes já existentes no backend, usando o
Cypresspara os testes E-2-E e oJestpara os testes de integração. - Também não configurei um ambiente de desenvolvimento com toda a aplicação rodando em conjunto, me utilizei do
Nodemon, do modo de desenvolvimento doVitee de um bancoPostgreslocal. - Uma das vantagens do Prisma é o conceito das migrações e de poder dar roll-back nelas se algo acontecer de errado, porém para evitar a necessidade de executar comandos dentro do container apenas para criar o banco de dados, preparei um arquivo .sql que é usado na inicialização do banco de dados.