![](/rafaelmfranca/xp-technical-challenge/raw/main/docs/assets/xp-inc.png)
Esse projeto tem como objetivo desenvolver um aplicativo de investimento em ações, com algumas funcionalidades de conta digital
Desenvolvido com 💙 por Rafael França 👨💻
![Dark theme](/rafaelmfranca/xp-technical-challenge/raw/main/docs/assets/dark.gif)
![Light theme](/rafaelmfranca/xp-technical-challenge/raw/main/docs/assets/light.gif)
-
🎯 Objetivos principais
- Foco na experiência e intuição do cliente ao utilizar a aplicação.
- Desenvolver uma interface bonita e responsiva para diversos dispositivos.
- Utilizar uma base de dados para simular as ações do cliente.
- Prover um ambiente em nuvem (deploy e base de dados) para o teste e desenvolvimento da aplicação se assemelhar a um case real.
- Produzir código limpo e legível.
-
🔌 Tomadas de decisão
- Para criar a interface, foram utilizados os frameworks NextJS e o Tailwind CSS em conjunto com a biblioteca de componentes Daisy UI 💄.
- Com o objetivo de maximizar a experiência do cliente e validar as suas ações em tempo real, foi utilizado a biblioteca React Hook Form em conjunto com Yup para validação de formulários 🚨.
- O ambiente escolhido para armazenar as informações do cliente foi o Supabase, que oferece um acesso baseado em nuvem a um banco de dados PostgreSQL 🐘.
- A modelagem das entidades da base de dados e sua comunicação com as ações do cliente, foram realizadas com Prisma ORM e as API Routes do NextJS 🚀.
- No desenvolvimento de testes unitários, foi utilizado o framework Jest e a React Testing Library 🐙.
-
💻 Processo de desenvolvimento
Foram utilizadas tecnologias auxiliares para o processo de desenvolvimento com o objetivo de padronização de commits, formatação e execução dos testes unitários relativos ao escopo das mudanças, prevenindo assim que uma nova feature impactasse no código base.
-
O desenvolvimento da aplicação foi dividido em três fases, sendo as duas últimas cíclicas:
- 🏗️ Fase 1: Desenvolvimento de um boilerplate com as tecnologias a serem utilizadas na aplicação.
- ⌨️ Fase 2 (Feature): Desenvolvimento da interface do usuário, posteriormente funcionalidades relativas aquele escopo e por fim testes unitários.
- ✅ Fase 3: Testes manuais em ambiente de produção, correção e melhorias contínuas.
-
-
Esse projeto utiliza o pnpm como gerenciador de pacotes. Para instalá-lo, basta seguir esse passo a passo.
-
Para rodar a aplicação é necessário um banco de dados Postgres. Para isso, recomendo que o faça com Docker ou simplesmente crie um projeto no Supabase - e copie a URI fornecida para seu .env 😄 (Settings -> Database -> Connection String -> URI).
-
Clone o repositório do projeto:
git clone git@github.com:rafaelmfranca/xp-technical-challenge.git
-
Instale os pacotes
cd xp-technical-challenge pnpm install
-
Configure um arquivo
.env
conforme o.env.example
na raiz do repositório.DATABASE_URL=postgres://USUÁRIO:SENHA@HOST:PORTA/NOME_DO_BANCO?schema=NOME_DO_SCHEMA
-
Execute as migrações e seeders:
pnpm prisma migrate dev pnpm prisma db seed
Obs: No arquivo seed.ts é possível verificar as contas que estão elegíveis para fazer login 😁
-
Execute o projeto:
pnpm dev