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 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, colocando a aplicação em hibernação ao fim deste limite (o limite é renovado no mês seguinte).
Na data de 15/02, o limite de tempo estava pouco acima de 300h, o que deve durar tempo suficiente para que a análise da Empbank seja concluída nos próximos dias.
| 🪧 Vitrine. Dev | |
|---|---|
| ✨ Nome | Empbank: controle financeiro |
| 🏷️ Tecnologias | React, TypeScript, Mantine, Sass, PostgreSQL, Prisma, Firebase, Node, Express, Railway |
| 🚀 URL | https://empbank-angela.vercel.app/ |
| 🎨 Design | Figma |
- Front-end: React, Typescript e Mantine.
- Back-end: Node, Typescript, Express e ORM à escolha.
- Banco de dados: PostgreSQL.
- Login por email e senha
- Cadastro de usuário com nome completo, email e senha.
- Dashboard com entrada, saída e valor total;
- Listagem de todas as transações segmentadas por data, com paginação;
- Barra de busca por título e nome da categoria;
- Botão para adicionar nova transação;
- Modal para nova transação;
- Tabela de transações com título, valor, categoria e entrada ou saída.
- Aplicação responsiva.
- Cadastre-se na aplicação na tela de Cadastro (você pode usar um e-mail fictício);
- Se o cadastro der certo, você será redirecionado para a tela de Login para acesso;
- Caso não queira efetuar cadastro, basta acessar a aplicação com o email
teste@teste.come senha123456; - Na tela Wallet, você 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.
English version
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's Junior Fullstack Developer opening.
Note: The database and the API url are hosted via Railway, which has a monthly working-time limit and which puts the app under hybernation after this limit is reached (it renews the next month).
In Feb/12, the time limit was a little bit higher than 300h, which may be enough time for the analysis of Empbank to occur in the next few days.
- Front-end: React, Typescript and Mantine.
- Back-end: Node, Typescript, Express and ORM of my choice.
- Banco de dados: PostgreSQL.
- Login with email and password
- User registration with name, email and password
- Dashboard with inflows, outflows and total values;
- List of all transactions shown by date (descendant) and with pagination;
- Search bar for title and category;
- Button for new transaction;
- Modal for new transaction;
- Table of transactions with title, value, category and type (inflow/outflow).
- Responsive app.
- Register to the app in the Register page (you can use a fake email);
- If the registration is successful, you will be redirected to Login screen for access;
- In case you do not wish to register, you can enter the application with the emmail
teste@teste.comand password123456; - On Wallet screen, you 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, you 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.
Developed with 🧡 by @sucodelarangela