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 😉