O Acme Financial Dashboard é uma aplicação de painel financeiro criada para praticar e aprender Next.js. Foi construída para explorar recursos do Next.js, entender roteamento, busca de dados e padrões modernos do React. O projeto está agora pronto para produção e totalmente funcional.
Status do Projeto
Status: Pronto para Produção e Totalmente Funcional
- Totalmente implantado e funcionando no Vercel
- Banco de dados inicializado e populado (Neon PostgreSQL)
- Autenticação funcionando corretamente (NextAuth.js v5)
- Todas as correções de segurança aplicadas
- Analytics integrado (Vercel Analytics)
- Domínio personalizado configurado (arthurreira.dev)
URL ao Vivo: https://nextjs-dashboard.arthurreira.dev
Objetivos de Aprendizado
Este projeto serve como uma experiência prática de aprendizado para:
- Praticar construção de aplicações com Next.js 16
- Entender componentes de servidor, componentes de cliente e o App Router
- Aprender sobre busca de dados, streaming e técnicas de otimização
- Praticar estilização com Tailwind CSS
- Explorar manipulação de formulários, validação e interações do usuário
- Entender fluxos de autenticação (NextAuth.js)
- Praticar tratamento de erros e estados de carregamento
Funcionalidades Implementadas
Gerenciamento de Clientes
- Adicionar, atualizar e visualizar detalhes do cliente
- Listagem de clientes com busca e paginação
Gerenciamento de Faturas
- Criar, visualizar e atualizar faturas
- Rastreamento de faturas e gerenciamento de status
Visão Geral Financeira
- Painel com estatísticas de receita
- Gráficos interativos para visualização de dados
- Rastreamento de valores coletados e pendentes
Funcionalidades Adicionais
- Funcionalidade de busca para clientes e faturas
- Paginação para grandes conjuntos de dados
- Tratamento de erros com páginas de erro personalizadas
- Design responsivo para vários tamanhos de tela
- Estados de carregamento e skeletons
Demo ao Vivo
URL de Produção: https://nextjs-dashboard.arthurreira.dev
A aplicação está totalmente funcional e implantada no Vercel com:
- Banco de dados Neon PostgreSQL (inicializado e populado)
- Autenticação NextAuth.js (configurada e funcionando)
- Integração Vercel Analytics (rastreando visitantes)
- Domínio personalizado configurado (arthurreira.dev)
- Todas as variáveis de ambiente configuradas
- Correções de segurança aplicadas
Credenciais de Teste:
- Email:
user@nextmail.com - Senha:
123456
Stack Tecnológico
- Framework: Next.js 16.1.1 (App Router)
- Linguagem: TypeScript
- Estilização: Tailwind CSS v4
- Banco de Dados: PostgreSQL (Neon)
- Autenticação: NextAuth.js v5 (beta.30)
- Analytics: Vercel Analytics
- Ícones: Heroicons
- Validação de Formulários: Zod
- Gerenciador de Pacotes: pnpm
Conceitos Explorados
Ao construir este projeto, pratiquei:
- Next.js App Router - Roteamento baseado em arquivos, layouts e rotas aninhadas
- Componentes Servidor & Cliente - Entender quando usar cada um
- Busca de Dados - Busca de dados no lado do servidor com streaming
- Route Handlers - Rotas de API e server actions
- Manipulação de Formulários - Server actions para envios de formulários
- Estilização - Utilitários do Tailwind CSS e design responsivo
- Gerenciamento de Estado - React hooks e padrões de estado
- Tratamento de Erros - Error boundaries e páginas de erro personalizadas
- Estados de Carregamento - Suspense boundaries e UI de carregamento
- Autenticação - Integração NextAuth.js e rotas protegidas
- Integração com Banco de Dados - Trabalhar com PostgreSQL
- TypeScript - Segurança de tipos em aplicações Next.js
Segurança e Atualizações
Este projeto é mantido atualizado com as últimas correções de segurança:
- Next.js 16.1.1 - Corrigido CVE-2025-66478 (vulnerabilidade React2Shell)
- NextAuth.js 5.0.0-beta.30 - Corrigido vulnerabilidade de entrega incorreta de email
- Tailwind CSS v4 - Versão mais recente com integração moderna PostCSS
- Vercel Analytics - Integrado para monitoramento de produção
Status de Conclusão do Projeto
Status do Projeto: Completo e Pronto para Produção
A aplicação está totalmente funcional e implantada:
- Implantação: Ao vivo em https://nextjs-dashboard.arthurreira.dev
- Banco de Dados: Neon PostgreSQL inicializado com todas as tabelas e dados iniciais
- Autenticação: NextAuth.js configurado e funcionando corretamente
- Variáveis de Ambiente: Todas configuradas na produção Vercel
- Segurança: Todas as CVEs corrigidas e atualizadas
- Analytics: Vercel Analytics rastreando visitantes
- Domínio Personalizado: Configurado e funcionando
Todos os recursos estão funcionais e o projeto está pronto para uso.