Empbank - Controle Financeiro

Este projeto é uma aplicação de controle financeiro onde o usuário pode cadastrar suas entradas e saídas financeiras mensais. 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 MongoDB e a API estão hospedados via Railway, que possui limitação de horas mensais de funcionamento. Essa limitação permitiu o tempo necessário para avaliação do projeto. Após o término do limite, o banco de dados foi excluído, e o deploy da aplicação foi interrompido. Fique à vontade para estudar o código.

🪧 Vitrine. Dev
✨ Nome	Empbank: controle financeiro
🏷️ Tecnologias	React, TypeScript, Tailwind CSS, Mongoose, MongoDB, Node.js, Express, Railway
🎨 Design	Figma

✅ Requisitos técnicos

• Front-end: React, TypeScript e Tailwind CSS.
• Back-end: Node, TypeScript, Express e Mongoose (para MongoDB).
• Banco de dados: MongoDB.

🖧 Funcionalidades

Tela de Login

• Login por email e senha

Tela de Cadastro

• Cadastro de usuário com nome completo, email e senha.

Tela Wallet

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

Opcionais

• 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

---

🔎 Overview

The project in this repository is a financial control app where users can log their monthly cash inflows and outflows. Developed as a technical challenge for the Empbank Junior Fullstack Developer position.

Note: The MongoDB database and API are hosted via Railway, which has a monthly usage limit. This time limit allowed for sufficient time for technical review. When the time limit finished, the database was deleted, and the app deployment was stopped. Feel free to explore the code.

✅ Technical requirements

• Front-end: React, TypeScript, and Tailwind CSS.
• Back-end: Node, TypeScript, Express, and Mongoose (for MongoDB).
• Database: MongoDB.

🖧 Features

Login screen

• Login with email and password

Register screen

• User registration with name, email, and password

Wallet screen

• Dashboard with inflows, outflows, and total balance;
• Paginated list of transactions sorted by date;
• Search bar for title and category;
• Button to add a new transaction;
• Modal for adding a new transaction;
• Table with transaction details: title, amount, category, and type (inflow/outflow).

Optional

• Responsive app.

⚙️ How to use it

• Users can register on the app's Register page (using a fake email is possible);
• If registration succeeds, the user is redirected to the Login screen;
• Users can alternatively log in with [email protected] and password 123456;
• On the Wallet screen, users can add new transactions using the button at the top right;
• New transactions are displayed on the same screen in a table format;
• Transactions can be searched using the search bar;
• To log out, click the welcome message at the top center.

🔼 Back to top