ng-frontend

Aplicação web de frontend para o desafio fullstack da NG Cash. O desafio consiste em criar uma aplicação Web Banking, onde o usuário pode se cadastrar e fazer login na plataforma, e após logado, realizar cash-in e cash-out e ver o seu saldo atual.
O desafio foi dividido em duas partes: backend e frontend. O backend foi desenvolvido em NodeJS e o frontend em NextJS (React). O backend foi hospedado no Render e o frontend no Vercel.
A aplicação pode ser acessada aqui.

Screenshot 📸

Rodando localmente ▶

Nesse projeto é usado apenas o Yarn como gerenciador de pacotes. Veja o website oficial do Yarn aqui.

Clone o projeto

  git clone https://github.com/allbertuu/ng-frontend

Entre no diretório do projeto

  cd ng-frontend

Instale as dependências

  yarn install

Rode o servidor

  yarn dev

Irá rodar na porta 3000 do localhost

Rodar testes (React-testing-library) (ATUALIZAÇÃO FUTURA)

  yarn test

Stack utilizada ⚙

• NextJS
• TypeScript
• Autenticação com JWT (JSON Web Tokens) no NextJS
• ContextAPI (para autorização e autenticação no NextJS com SSR)
• Nookies
• Bearer Token
• GitHub Actions
• Hooks personalizados
• Yup (validação de form)
• Formik
• HeadlessUI
• TailwindCSS
• Phosphor icons

Regras de negócio 📑

Clique aqui para expandir

• Página para realizar o cadastro na NG informando username e password.
• Página para realizar o login informando username e password.
• Com o usuário logado, a página principal deve apresentar:
  • balance atual do usuário;
  • [-] Seção voltada à realização de transferências para outros usuários NG a partir do username de quem sofrerá o cash-in;
  • [-] Tabela com os detalhes de todas as transações que o usuário participou;
  • [-] Mecanismo para filtrar a tabela por data de transação e/ou transações do tipo cash-in/cash-out;
  • Botão para realizar o log-out.

Relacionados 🔗

NG Backend

Feedback 💬

Se você tiver algum feedback, me manda uma mensagem no LinkedIn 😉