📈 This project was developed for the XP Inc front-end technical challenge

Desafio técnico PSel - Turma XP 🚀

Esse projeto tem como objetivo desenvolver um aplicativo de investimento em ações, com algumas funcionalidades de conta digital

🖥 Link do deploy

Desenvolvido com 💙 por Rafael França 👨‍💻

💭 Abordagem do desafio

• 🎯 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.
      

💻 Instruções de compilação e execução

1. Esse projeto utiliza o pnpm como gerenciador de pacotes. Para instalá-lo, basta seguir esse passo a passo.

2. 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).

3. Clone o repositório do projeto:

   git clone [email protected]:rafaelmfranca/xp-technical-challenge.git

4. Instale os pacotes

   cd xp-technical-challenge
   pnpm install

5. 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

6. 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 😁

7. Execute o projeto:

   pnpm dev