Este repositório reúne a estrutura dos microfrontends do Bytebank Pro, desenvolvidos como parte do Tech Challenge da pós-graduação em Engenharia de Front-end (FIAP). O projeto utiliza Turborepo para orquestrar um monorepo com aplicações Angular independentes, promovendo escalabilidade, manutenção e desempenho.
- 💻 Bytebank Pro – Microfrontends
- 📝 Sumário
- 📄 Desafio Original
- 🚀 URLs de Acesso
- ✨ Visão Geral
- 📦 Tecnologias
- 🤖 Desenvolvimento com IA
- 📁 Estrutura do Monorepo
- 📦 Packages Compartilhados
- 🛠️ Qualidade de Código
- 🔌 Comunicação entre Microfrontends
- 📋 Pré-requisitos
- 🚀 Ambiente de Desenvolvimento
- ☁️ Implantação (Deploy)
- 🔗 Links Úteis
- 💡 Melhorias Futuras
- 👥 Autor
O documento contendo os requisitos e objetivos do desafio original da pós-tech está disponível para consulta:
📌 POSTECH - Front-end - Tech Challenge - Fase 2
- Deploy: https://bytebank-pro.vercel.app
- API GraphQL: https://bytebank-api.onrender.com/graphql
⚠️ Nota Importante sobre a API: A API GraphQL está hospedada no Render utilizando o plano gratuito. Devido às limitações deste plano, a API pode demorar alguns segundos para responder na primeira requisição após um período de inatividade (quando o serviço "dorme"). As requisições subsequentes serão mais rápidas. Esta é uma limitação conhecida do plano gratuito do Render e não afeta a funcionalidade da aplicação.
A arquitetura é composta por um Shell (aplicação hospedeira) e três Microfrontends (MFEs), cada um responsável por uma área de negócio específica.
| App | Descrição | Readme |
|---|---|---|
| Shell | Orquestra os MFEs, gerencia autenticação e o layout global. | Ver Documentação |
| Dashboard | Exibe o painel com informações financeiras do usuário. | Ver Documentação |
| Transactions | Gerencia o cadastro, edição e listagem de transações. | Ver Documentação |
| Settings | Permite o gerenciamento da conta e preferências do usuário. | Ver Documentação |
- Monorepo: Turborepo
- Framework: Angular 20
- Module Federation: @angular-architects/module-federation
- Estilo: TailwindCSS
- API: GraphQL (Apollo Client)
- Contêineres: Docker + Docker Compose
- Qualidade de Código: ESLint, Prettier, Husky, lint-staged
Este projeto também foi desenvolvido como uma oportunidade de aprendizado e aperfeiçoamento no uso de ferramentas de Inteligência Artificial para desenvolvimento de software. Durante todo o processo, foram utilizadas tecnologias de IA generativa para acelerar o desenvolvimento e melhorar a qualidade do código.
- Cursor: IDE com Inteligência Artificial que sugere códigos de forma inteligente e oferece assistência contextual em tempo real, facilitando e acelerando o desenvolvimento.
- GitHub Copilot: Ferramenta de IA que auxilia na programação, fornecendo sugestões automáticas de código e agentes inteligentes para resolver tarefas de desenvolvimento de maneira mais eficiente.
- Gemini CLI: Ferramenta de linha de comando que conecta com ferramentas de desenvolvimento, entende código e acelera workflows. Permite consultar grandes bases de código, gerar aplicações a partir de PDFs/esboços e automatizar tarefas operacionais usando IA generativa.
O projeto inclui configurações específicas para otimizar o uso das ferramentas de IA:
.cursor/: Contém configurações e prompts personalizados para o Cursor, incluindo regras de desenvolvimento e padrões de código específicos do projeto.github/: Inclui workflows e configurações que aproveitam recursos de IA do GitHub, como sugestões de código e análise automáticaGEMINI.md: Documentação de uso da Gemini CLI, com prompts e configurações específicas para o projeto
Uma parte fundamental do desenvolvimento foi a engenharia de prompt - a prática de criar e refinar prompts específicos para obter os melhores resultados das ferramentas de IA. Isso incluiu:
- Definição de prompts estruturados para geração de componentes Angular
- Criação de templates de prompt para diferentes tipos de funcionalidades
- Refinamento contínuo baseado nos resultados obtidos
- Documentação de prompts eficazes para reutilização futura
Esta abordagem permitiu maximizar a produtividade e manter a consistência do código ao longo do desenvolvimento do projeto.
O projeto é organizado em duas pastas principais: apps para as aplicações executáveis e packages para código compartilhado.
bytebank-pro/
├── apps/
│ ├── shell/ # Aplicação hospedeira (Container)
│ ├── dashboard/ # MFE de Dashboard
│ ├── transactions/ # MFE de Transações
│ └── settings/ # MFE de Configurações
└── packages/
├── ui/ # Biblioteca de componentes Angular
├── types/ # Definições de tipos TypeScript
├── utils/ # Funções utilitárias compartilhadas
├── eslint-config/ # Configurações de ESLint
├── typescript-config/ # Configurações de TypeScript
└── shared-design-tokens/ # Design tokens (cores, fontes)
Os packages garantem a consistência e reutilização de código em todo o projeto.
| Pacote | Descrição | Readme |
|---|---|---|
@bytebank-pro/ui |
Biblioteca de componentes Angular (standalone) para a UI. | Ver Documentação |
@bytebank-pro/types |
Define as interfaces e tipos TypeScript compartilhados. | Ver Documentação |
@bytebank-pro/utils |
Oferece funções utilitárias comuns (formatação, validação). | Ver Documentação |
@bytebank-pro/shared-design-tokens |
Centraliza os design tokens (cores, tipografia) para consistência visual. | Ver Documentação |
@bytebank-pro/eslint-config |
Disponibiliza configurações padronizadas do ESLint. | Ver Documentação |
@bytebank-pro/typescript-config |
Fornece configurações base do TypeScript (tsconfig.json). |
Ver Documentação |
O projeto utiliza um conjunto de ferramentas para garantir a consistência e a qualidade do código. Prettier e ESLint são executados automaticamente antes de cada commit com Husky e lint-staged para formatar e analisar os arquivos, prevenindo a introdução de erros e inconsistências.
A comunicação é feita através de duas estratégias principais:
- Module Federation: Para carregar os microfrontends dinamicamente.
- Custom Events: Para notificar o Shell e outros MFEs sobre eventos importantes (ex:
transactionCreated).
Antes de começar, garanta que você tenha as seguintes ferramentas instaladas:
- Git: Para controle de versão do código.
- Node.js: Recomenda-se a versão 22 ou superior.
- Docker: Essencial para gerenciar o ambiente de desenvolvimento. Recomendamos o uso do Docker Desktop.
Para configurar e executar o projeto localmente, siga os passos abaixo. O ambiente é gerenciado com Docker Compose para a API e Turborepo para os microfrontends.
-
Clone o repositório:
git clone https://github.com/Brendhon/bytebank-pro.git cd bytebank-pro -
Instale as dependências:
npm install
-
Inicie o ambiente de desenvolvimento:
-
Ambiente Completo (API + MFEs): Para subir a API GraphQL (com Docker) e todas as aplicações de frontend, execute:
npm run dev
-
Apenas os Microfrontends: Se a API já estiver em execução ou se você estiver usando uma API remota, inicie apenas os MFEs:
npm run dev:front
-
Apenas a API (Docker): Para iniciar somente a API GraphQL e o banco de dados MongoDB com Docker, use:
npm run dev:api
-
-
Parando o ambiente Docker: Para derrubar os contêineres da API, execute:
npm run dev:stop
-
Configuração de Variáveis de Ambiente: Para alterar as variáveis de ambiente dos projetos Angular (caso necessário), acesse a pasta
src/environmentsdentro de cada projeto:# Exemplo para o projeto principal cd apps/shell/src/environments # Exemplo para outros microfrontends cd apps/dashboard/src/environments cd apps/transactions/src/environments cd apps/settings/src/environments
Os arquivos
environment.development.ts(desenvolvimento) eenvironment.ts(produção) contêm as configurações específicas de cada aplicação.
As aplicações de frontend (Shell e Microfrontends) são implantadas na Vercel. A Vercel foi escolhida por sua integração nativa com monorepos e otimizações específicas para Turborepo.
O projeto final pode ser acessado em: https://bytebank-pro.vercel.app/
Principais Vantagens:
- Builds Otimizados: A Vercel detecta o Turborepo e utiliza seu cache de builds, acelerando o processo.
- Deploy Inteligente com
turbo-ignore: A Vercel pode ignorar o build de uma aplicação se nenhuma alteração relevante for detectada, economizando tempo e recursos.
Estratégia de Deploy:
- Cada aplicação na pasta
apps/é configurada como um projeto independente na Vercel, apontando para o mesmo repositório Git. - O comando de build para cada projeto utiliza o filtro do Turborepo (ex:
turbo build --filter=dashboard).
- API GraphQL: A API hospedada no Render está disponível em um repositório separado. Você pode acessá-la publicamente aqui.
- Plataforma de Deploy (Frontend): As aplicações são implantadas na Vercel.
Este projeto está em constante evolução. Abaixo estão algumas ideias e sugestões para futuras melhorias, tanto com o uso de Inteligência Artificial quanto com práticas de desenvolvimento convencionais:
- Validação de Padrões de Código com IA: Utilizar IAs como o Gemini CLI para analisar Pull Requests e verificar se o código segue os padrões e diretrizes definidos no
GEMINI.md. Isso pode incluir a verificação de nomes de componentes, uso de services, e a estrutura geral do código. - Geração de Testes Unitários: Automatizar a criação de testes unitários para novos componentes e serviços, garantindo que a cobertura de testes seja mantida e que os testes sigam as melhores práticas.
- Otimização de Performance com Análise de IA: Usar ferramentas de IA para analisar o bundle final das aplicações e sugerir otimizações de performance, como a identificação de "dead code" ou a sugestão de "lazy loading" para módulos específicos.
- Tradução Automatizada de Documentação: Utilizar IA para traduzir a documentação do projeto para outros idiomas, tornando-o mais acessível para a comunidade global.
- Testes End-to-End (E2E): Implementar testes E2E com ferramentas como o Cypress ou Playwright para simular a jornada do usuário e garantir a integração entre os microfrontends.
- Monitoramento e Observabilidade: Integrar ferramentas de monitoramento (ex: Sentry, Datadog) para capturar erros em tempo real e analisar a performance das aplicações em produção.
- Design System Tokens: Expandir o uso de design tokens para incluir espaçamentos, tamanhos de fontes e outros elementos de design, garantindo uma consistência visual ainda maior.
- Storybook para Documentação de Design Patterns: Utilizar o Storybook para documentar não apenas componentes, mas também "design patterns" e "recipes" de como combinar componentes para criar layouts e funcionalidades complexas.
Brendhon Moreira