Este é o projeto Tech Challenge para a pós-graduação em Front-end Engineering da FIAP. O objetivo é desenvolver o frontend para uma aplicação de gerenciamento financeiro, aplicando conceitos modernos de desenvolvimento web e programação orientada a objetos.
- 📹 Vídeo de Apresentação: Assista à demonstração do projeto
- 🎨 Design no Figma: Visualize o protótipo e design
- 🏠 Dashboard Intuitivo: Visualização clara do saldo e extrato de transações
- 📊 Gestão de Transações: Listagem completa com opções de visualizar, editar e deletar
- ➕ Adicionar Transações: Formulário simples para registrar novas movimentações
- ✏️ Edição de Registros: Modificação rápida de transações existentes
- 🎨 Design System: Interface consistente e responsiva com Tailwind CSS
- 🔧 TypeScript: Tipagem estática para maior robustez do código
Nesta fase, o desafio consiste em desenvolver o frontend para uma aplicação de gerenciamento financeiro utilizando Next.js e um Design System. O objetivo é criar uma interface que permita aos usuários gerenciar suas transações financeiras de forma intuitiva e eficiente. Além disso, é fundamental aplicar os conceitos de Programação Orientada a Objetos (POO) na estruturação do código.
- Home Page:
- Uma página inicial simples que dá boas-vindas aos usuários.
- Exibir informações sobre o saldo da conta corrente e um extrato das últimas transações.
- Incluir uma seção para iniciar uma nova transação, com opções para selecionar o tipo de transação e inserir o valor.
- Listagem de Transações:
- Uma página que exibe a lista completa de transações realizadas, com opções para visualizar detalhes, editar e deletar cada transação.
- Adicionar Nova Transação:
- Uma página ou modal para adicionar uma nova transação ao banco de dados.
- O formulário deve incluir campos como tipo de transação (depósito, transferência, etc.), valor e data.
- Editar Transação:
- Uma página ou modal para editar as informações de uma transação existente.
- Next.js: Framework React para renderização do lado do servidor (SSR) e geração de sites estáticos (SSG).
- React: Biblioteca para construção de interfaces de usuário.
- TypeScript: Superset de JavaScript que adiciona tipagem estática.
- Tailwind CSS: Framework CSS utility-first para estilização rápida e consistente.
- json-server: Utilizado para criar uma API REST mock para simular o backend.
Siga os passos abaixo para configurar e executar o projeto em seu ambiente local.
- Node.js: A versão exata está especificada no arquivo
.nvmrc. - NVM (Node Version Manager): Altamente recomendado para gerenciar a versão do Node.js do projeto.
- Yarn ou npm
-
Clone o repositório:
git clone https://github.com/karenkramek/bytebank-fiap.git cd bytebank-fiap -
Use a versão correta do Node.js com NVM:
O arquivo
.nvmrcna raiz do projeto especifica a versão do Node.js a ser utilizada. Execute o comando abaixo para ativar a versão correta:nvm use
Se você não tiver a versão especificada instalada, o NVM irá sugerir o comando para instalá-la (
nvm install). -
Instale as dependências do projeto:
npm install # ou yarn install -
Configurar o banco de dados local:
Copie o arquivo template do banco de dados:
cp db.json.template db.json
O arquivo
db.jsoncontém dados de desenvolvimento e não é versionado. Modifique-o conforme necessário para seus testes locais. -
Inicie a API Mock (json-server):
Para que a aplicação funcione, é necessário ter o servidor da API mock em execução. Em um terminal, execute:
npm run server
Isso iniciará um servidor na porta
3001, observando o arquivodb.json. -
Inicie o servidor de desenvolvimento:
Em outro terminal, inicie a aplicação Next.js:
npm run dev
Abra http://localhost:3000 em seu navegador para ver o resultado.
| Nome | RM | |
|---|---|---|
| Karen Cristina Kramek | [email protected] | 361140 |
| Tatiane Gabrielle Marçal Rodrigues da Costa | [email protected] | 365215 |
| Kaique Kenichi Furukawa Endo | [email protected] | 366448 |
| Jean Villela dos Santos | [email protected] | 365189 |