Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sucodelarangela/empbank

Aplicação de controle financeiro desenvolvido como teste técnico para Fullstack Developer na Empbank.
https://github.com/sucodelarangela/empbank

express firebase mantine node postgresql prisma react sass typescript vitrinedev

Last synced: 2 months ago
JSON representation

Aplicação de controle financeiro desenvolvido como teste técnico para Fullstack Developer na Empbank.

Awesome Lists containing this project

README 

        



# Empbank - Controle Financeiro






_[Read it in English](#English)_



O projeto deste repositório é uma aplicação de controle financeiro onde o usuário pode cadastrar suas entradas e saídas financeiras mensais. Este projeto foi desenvolvido como desafio técnico para o processo seletivo da [**Empbank**](https://empbank.com.br/) para o cargo de **Desenvolvedor Fullstack Júnior**.



> Nota: O banco de dados PostgreSQL e a hospedagem da API foi feita via Railway, que possui limitação de horas mensais para funcionamento. O limite de tempo permitiu tempo suficiente para que a avaliação técnica do projeto pudesse ser feita. Após o término do limite, o banco de dados foi excluído e, consequentemente, o deploy da aplicação. Fique à vontade para estudar o código.



| 🪧 Vitrine. Dev |     |

| -------------- | --- |

| ✨ Nome        | **Empbank: controle financeiro** |

| 🏷️ Tecnologias | React, TypeScript, [Mantine](https://mantine.dev/), Sass, PostgreSQL, Prisma, Firebase, Node, Express, Railway |

| 🎨 Design      | [Figma](https://www.figma.com/file/I5ctuYJN7TMTEQx5oL1wt3/Prova-Empbank) |



![](https://raw.githubusercontent.com/sucodelarangela/empbank/main/web/public/og-image.jpg#vitrinedev)





  

  

  

  

  

  

  

  

  

  




## ✅ Requisitos técnicos



- **Front-end:** React, Typescript e Mantine.

- **Back-end:** Node, Typescript, Express e ORM à escolha.

- **Banco de dados:** PostgreSQL.



## 🖧 Funcionalidades



### Tela de Login



- [x] Login por email e senha



### Tela de Cadastro



- [x] Cadastro de usuário com nome completo, email e senha.



### Tela Wallet



- [x] Dashboard com entrada, saída e valor total;

- [x] Listagem de todas as transações segmentadas por data, com paginação;

- [x] Barra de busca por título e nome da categoria;

- [x] Botão para adicionar nova transação;

- [x] Modal para nova transação;

- [x] Tabela de transações com título, valor, categoria e entrada ou saída.



### Opcionais



- [x] Aplicação responsiva.



## ⚙️ Como funciona



- O usuário faz seu cadastro na aplicação na tela de Cadastro (podendo usar um e-mail fictício);

- Se o cadastro der certo, o usuário é redirecionado para a tela de Login para acesso;

- Caso não queira efetuar cadastro, é possível acessar a aplicação com o email `[email protected]` e senha `123456`;

- Na tela Wallet, o usuário pode cadastrar uma Nova Transação no botão do canto superior direito;

- As transações cadastradas são mostradas na mesma tela em forma de tabela;

- Para pesquisar transações, basta digitar na barra de busca;

- Para sair da aplicação, clique na mensagem de boas vindas na parte superior da tela.



🔼 Voltar ao topo



---






_English version_






## 🔎 Overview



The project in this repository is an web app for financial control where the user may register her/his monthly cash inflow and outflows. This project was developed as a technical test for [**Empbank**](https://empbank.com.br/)'s **Junior Fullstack Developer** opening.



> Note: The database and the API url are hosted via Railway, which has a monthly working-time limit. This time limit was just enough so that my code and running application could be analysed by the technical reviewers. When the time limit has finished, the database and the application deploy were deleted. Feel free to browse my code.



## ✅ Technical requirements



- **Front-end:** React, Typescript and Mantine.

- **Back-end:** Node, Typescript, Express and ORM of my choice.

- **Banco de dados:** PostgreSQL.



## 🖧 Features



### Login screen



- [x] Login with email and password



### Register screen



- [x] User registration with name, email and password



### Wallet screen



- [x] Dashboard with inflows, outflows and total values;

- [x] List of all transactions shown by date (descendant) and with pagination;

- [x] Search bar for title and category;

- [x] Button for new transaction;

- [x] Modal for new transaction;

- [x] Table of transactions with title, value, category and type (inflow/outflow).



### Optionals



- [x] Responsive app.



## ⚙️ How to use it



- The user registers to the app in the Register page (it is possible to use a fake email);

- If the registration is successful, the user will be redirected to Login screen for access;

- In case the user does not wish to register, they can enter the application with the e-mail `[email protected]` and password `123456`;

- On Wallet screen, the user can add a new transaction by clicking the button on the top right corner;

- The new transactions will be shown on this same screen in the form of a table;

- To search transactions, the user can type directly on the search bar;

- To log out of the application, click on the welcome message on the top center of the screen.



🔼 Back to top



---



Developed with 🧡 by [@sucodelarangela](https://angelacaldas.vercel.app)