Tech Challenge - Fase 04: Gerenciador Financeiro

Aplicação Web robusta para gerenciamento financeiro pessoal desenvolvida em Next.js (App Router). O sistema conta com autenticação segura, dashboard com indicadores visuais de performance, extratos detalhados com filtros via URL e uma arquitetura focada em componentização isolada documentada no Storybook.

Tip

É possível navegar pelos tópicos da nossa documentação de forma mais facilitada! Basta acessar a nossa wiki.

📱 Sobre o projeto

Este projeto foi desenvolvido como parte do Tech Challenge - Fase 04 da Pós Tech.

A aplicação foi planejada sob a ótica de engenharia de software modular, unindo o ecossistema reativo do React e do Next.js à segurança de tipos do TypeScript. Além de entregar regras de negócio financeiras, o projeto destaca-se por possuir um catálogo visual estrito que documenta desde os átomos fundamentais de design (tokens de cor, espaçamento, sombras) até os organismos de dados complexos (gráficos e modais integrados com GraphQL).

🛠 Tecnologias

A stack de ferramentas do projeto compreende as seguintes tecnologias:

Core Frontend

Next.js (App Router) — Divisão estrutural de rotas através de grupos de rotas (layouts de autenticação e dashboard).
TypeScript — Tipagem estrita de contratos de dados, interfaces e propriedades de componentes.

Camada de Rede & Dados (API)

Apollo Client (GraphQL) — Cliente unificado para gerenciar requisições de Queries e Mutations, controle automático de cache e injeção de dados assíncronos.

Interface & Estilização

Ant Design (AntD) — Componentes de UI de alta fidelidade (Formulários, Inputs, DatePickers, Modais).
Tailwind CSS — Utilitários de estilização atômica para agilidade e consistência visual.

Documentação & Ferramental

Storybook — Suite de isolamento visual para desenvolvimento, validação de estados de componentes e testes rápidos de layouts.

✨ Funcionalidades

🔐 Autenticação e Segurança

Proteção de Rotas: Utilização de auth-guard.tsx para assegurar que apenas usuários validados acessem o ecossistema interno.
Interfaces Dedicadas: Fluxos isolados e modulares para o formulário de Login (LoginForm) e registro de novas contas (RegisterForm).

📊 Dashboard e Visualização de Indicadores

Gráficos Avançados: Exibição analítica de movimentações por meio de gráficos combinados (ComposedChart) e gráficos de rosca (DonutChart).
Sumários em Cards: Componentes flexíveis de cartões (Card) para apresentar receitas, despesas e saldos consolidados.

💸 Extrato e Filtros Reativos

Sincronização via URL: Barra de Filtros acoplada diretamente à URL da aplicação através de parâmetros de busca (searchParams), mantendo o estado permanente a recarregamentos.
Tabela Estruturada: Listagem de transações com componentes dinâmicos de dados (Table).

➕ Cadastro e Modificação de Registros

Modal Multifuncional: O ModalTransacao gerencia de forma inteligente a criação e edição de transações, efetuando o mapeamento reativo de categorias (entradas ou saídas) de acordo com o tipo escolhido.

🏗 Arquitetura e Padrões

O projeto foi organizado com base em responsabilidades isoladas e no ecossistema nativo do Next.js App Router:

Roteamento Baseado em Grupos (Routing Groups): Divisão clara usando diretórios entre parênteses — (auth) para escopos de entrada e (dashboard) para a aplicação principal — evitando impactos cruzados em layouts.
Separação UI vs. Features:
- A pasta components/ui agrupa componentes visuais puros e primitivos (Button, Card, Table).
- A pasta components/features centraliza componentes que dependem de estado de negócio ou chamadas de API (modals, filtros, auth).
Desacoplamento de Dados com Custom Hooks: Toda a lógica de comunicação GraphQL está encapsulada em ganchos reutilizáveis dentro da pasta hooks/ (use-transacoes.ts, use-dashboard.ts), mantendo os componentes visuais focados estritamente em renderização.

📂 Estrutura do Projeto

src/
├───app/                          # Sistema de rotas e layouts do Next.js
│   ├───(auth)/                   # Grupo de rotas públicas de Autenticação (Login/Cadastro)
│   └───(dashboard)/              # Grupo de rotas privadas (Painel e Extrato)
├───components/                   # Módulos e Componentes reutilizáveis de interface
│   ├───features/                 # Componentes acoplados a regras e lógica de negócio
│   │   ├───auth/                 # Guardas de autenticação e formulários estruturados
│   │   ├───filtros/              # Componente de filtros de busca amarrados à URL
│   │   └───modals/               # Modal híbrido de criação e modificação de transações
│   └───ui/                       # Primitivos visuais puros baseados no Ant Design
│       ├───Button/
|       ├───Card/                 # Elementos de micro-interação e wrappers
│       ├───Charts/               # Abstrações de gráficos (Composed e Donut)
│       ├───SidebarMenu/
|       └───Topbar/               # Peças estruturais e de navegação de layouts
├───context/                      # Contextos de controle global de estado (ex: Sidebar open/close)
├───graphql/                      # Camada de definição do esquema GraphQL (Queries e Mutations)
├───hooks/                        # React Hooks customizados para isolar chamadas de dados
├───libs/                         # Infraestrutura de dados, utilitários e definições globais
│   ├───types/                    # Interfaces centrais de tipagem TypeScript
│   └───utils/                    # Validadores, formatadores e helpers auxiliares
└───styles/                       # Arquivos globais de estilos e tokens de design do sistema
    └───theme/                    # Subdivisões explícitas dos tokens documentados no Storybook
        ├───borderRadius/
        ├───colors/
        ├───shadows/
        ├───spacing/
        └───typhography/

🧠 Gerenciamento de Estado e Consultas

O ecossistema de fluxo de dados é estruturado em três níveis de responsabilidade:

Operações Assíncronas (GraphQL): Consultas estruturadas (Queries de listagem e mutations de escrita) processadas pelo Apollo Client mapeadas em diretórios limpos (graphql/mutations e graphql/queries).
Estado de Interface Síncrono: Contextos React nativos (sidebar-context.tsx) para gerenciar seções colapsáveis sem causar re-renderizações desnecessárias na árvore principal.
Estado Persistente na URL: Os inputs de busca utilizam os utilitários de rota do Next.js, tornando as buscas compartilháveis por links.

🎨 Design System

O projeto possui uma arquitetura de Design System própria, responsável por centralizar a identidade visual e os componentes de forma escalável através de:

✨ Tokens Visuais: Definições estritas de estilo para evitar valores arbitrários (magic numbers).
🧩 Componentes Reutilizáveis: Componentes puros baseados nas fundações do Ant Design.
🎨 Temas: Extensões semânticas amarradas ao Tailwind CSS e arquivos de configuração.

🎨 Tokens

Localizados em: src/styles/theme/

Cores (`colors/`)

theme.colors.primary — Cor de destaque da marca (ações principais e links).
theme.colors.secondary — Tons de suporte para hierarquia visual secundária.
theme.colors.success — Indicador positivo (receitas, saldos positivos).
theme.colors.error — Indicador de atenção (despesas, validações de erro).
theme.colors.background — Base de fundo da aplicação.
theme.colors.surface — Fundo de elementos flutuantes (cards, modais).

Espaçamento (`spacing/`)

theme.spacing.xs — Ajustes mínimos e paddings internos pequenos.
theme.spacing.sm — Distância entre elementos de um mesmo bloco.
theme.spacing.md — Margem padrão entre blocos de conteúdo.
theme.spacing.lg — Espaçamento entre seções estruturais.
theme.spacing.xl — Respiro para layouts de grandes áreas.

Tipografia & Bordas (`typhography/` e `borderRadius/`)

theme.typography.title — Títulos de páginas e sumários.
theme.typography.body — Textos corridos e descrições de tabelas.
theme.typography.button — Rótulos de ações e micro-interações.
theme.borderRadius.md — Arredondamento padrão para botões e inputs.

🧩 Componentes Disponíveis

Localizados em: src/components/ui/

Button — Elemento de clique customizável com estados de carregamento.
Card — Wrapper com elevação e bordas suaves para agrupar dados.
Table — Grade estruturada para exibição reativa de transações.
ComposedChart — Gráfico misto para cruzamento analítico de dados.
DonutChart — Gráfico de rosca para divisão percentual de categorias.
SidebarMenu — Painel colapsável de navegação principal.
Topbar — Barra superior de identificação e contexto do usuário.

Exemplo de Uso:

import { Button } from '@/components/ui/Button';

export default function Example() {
  return (
    <Button onClick="{()" type="primary"> console.log('Entrar')}>
      Entrar
    </Button>
  );
}

📚 Storybook

O projeto utiliza o Storybook 10.4 para isolar, testar e documentar o comportamento de cada componente e token visual da interface de forma independente do backend.

Essa abordagem permite à equipe:

Visualizar componentes isoladamente: Construir interfaces sem precisar subir toda a aplicação Next.js.
Testar diferentes estados: Validar comportamentos de erro, estados de carregamento (loading) e interações de formulários.
Documentar tokens de design: Garantir que desenvolvedores e designers usem as mesmas definições de cores e espaçamentos.
Validar consistência visual: Evitar regressões visuais em atualizações de código.

Rodar o Storybook Localmente

Para abrir o painel interativo de documentação no seu navegador, execute o comando abaixo na raiz do projeto:

npm run storybook
# ou caso use yarn
yarn storybook

🚀 Executando o Projeto

1. Instalar as dependências do projeto

npm install
# ou
yarn install

2. Configurar o Ambiente

Crie um arquivo .env na raiz do projeto e configure a URL de conexão para o seu endpoint GraphQL ativo:

NEXT_PUBLIC_API_URL=https://tc4-backend-graphql-production.up.railway.app/graphql/

Tip

Se preferir, é possível rodar o projeto tc4-backend-graphql e utiliza-lo localmente substituindo o NEXT_PUBLIC_API_URL pela do servidor local. Por padrão, será http://localhost:8080/

3. Executar o servidor de desenvolvimento

npm run dev
# ou
yarn dev

Acesse http://localhost:3000 no seu navegador para ver a aplicação rodando.

🎥 Demonstração

O vídeo abaixo apresenta o fluxo completo da aplicação web: telas de autenticação e proteção de rotas, navegação responsiva, filtragem via parâmetros na URL, abertura e validação do formulário no modal, além de um tour completo pelo ecossistema de componentes e tokens documentados dentro do Storybook:

Assista ao Vídeo de Demonstração no YouTube

👥 Equipe - Grupo 05

RM	Nome	LinkedIn	GitHub
RM367409	Isabelle Dias Ribeiro Silva
RM367047	Mariana Ayumi Tamay

Name		Name	Last commit message	Last commit date
Latest commit History 103 Commits
.storybook		.storybook
public		public
src		src
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc		.prettierrc
README.md		README.md
eslint.config.mjs		eslint.config.mjs
mutations.json		mutations.json
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
schema.json		schema.json
schema_new.json		schema_new.json
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json

Uh oh!

Folders and files

Latest commit

History

Repository files navigation

Tech Challenge - Fase 04: Gerenciador Financeiro

📑 Sumário

📱 Sobre o projeto

🛠 Tecnologias

Core Frontend

Camada de Rede & Dados (API)

Interface & Estilização

Documentação & Ferramental

✨ Funcionalidades

🔐 Autenticação e Segurança

📊 Dashboard e Visualização de Indicadores

💸 Extrato e Filtros Reativos

➕ Cadastro e Modificação de Registros

🏗 Arquitetura e Padrões

📂 Estrutura do Projeto

🧠 Gerenciamento de Estado e Consultas

🎨 Design System

🎨 Tokens

Cores (colors/)

Espaçamento (spacing/)

Tipografia & Bordas (typhography/ e borderRadius/)

🧩 Componentes Disponíveis

Exemplo de Uso:

📚 Storybook

Rodar o Storybook Localmente

🚀 Executando o Projeto

1. Instalar as dependências do projeto

2. Configurar o Ambiente

3. Executar o servidor de desenvolvimento

🎥 Demonstração

👥 Equipe - Grupo 05

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Contributors

Uh oh!

Languages

Cores (`colors/`)

Espaçamento (`spacing/`)

Tipografia & Bordas (`typhography/` e `borderRadius/`)