Portfólio Blog Sobre

MVP Finance Dashboard

Painel financeiro pessoal full stack com .NET 10 e React 19. Consolida contas bancárias, histórico de transações e metas financeiras em uma interface unificada com API RESTful e frontend reativo.

.NET C# React TypeScript PostgreSQL TanStack Query Zustand shadcn/ui Tailwind CSS
MVP Finance Dashboard

Este é um MVP (Minimum Viable Product, Produto Mínimo Viável) focado em demonstrar boas práticas modernas: tema claro e escuro, skeleton (esqueleto de carregamento) enquanto os dados carregam, toaster (notificação flutuante) com aviso sobre o tempo de inicialização do Render Cloud.

A consulta aos endpoints retorna valores de cada card no board (painel). As funcionalidades reais não estão implementadas, são apenas mockadas (dados de exemplo).

Conceitos fundamentais

ConceitoO que é
MVP (Minimum Viable Product, Produto Mínimo Viável)Versão mínima de um produto que valida hipóteses com o menor esforço possível.
REST (Representational State Transfer, Transferência de Estado Representacional)Estilo arquitetural para APIs baseado em recursos, verbos HTTP e respostas stateless.

Stack

Backend
Tecnologia Papel
.NET 10 & C# 14 ASP.NET Core Minimal API
PostgreSQL 17 Dados em memória no MVP
Serilog Logs estruturados
Scalar Documentação OpenAPI interativa
Frontend
Tecnologia Papel
React 19 & TypeScript 5 UI (interface do usuário) com Vite 6
TanStack Query 5 Data fetching e cache (consulta e memoria rapida)
Zustand 5 Estado global com persistência de tema
React Hook Form 7 + Zod 3 Formulários tipados (validações)
shadcn/ui + Tailwind CSS Componentes e estilo

Arquitetura

Padrão Descrição Detalhes
Vertical Slice Código organizado por domínio de feature não por camada técnica
Handler Pattern Cada endpoint tem um handler dedicado delega para funções com nomes descritivos
Contrato unificado Todas as respostas seguem o mesmo envelope statusactionmessagedata
Result Pattern Erros como valores sem exceções para controle de fluxo
Rate Limiting 60 req/min por IP middleware nativo do .NET