Destino Dev

Cursos

Dashboard Financeiro com Next.js e Chart.js

Neste curso, você vai construir um Dashboard Financeiro completo e profissional — uma das aplicações mais valorizadas no mercado de desenvolvimento web. Dashboards financeiros são utilizados por startups, fintechs e empresas de todos os portes para visualizar dados, acompanhar KPIs e tomar decisões estratégicas. Ao concluir este projeto, você terá em seu portfólio uma aplicação real e impressionante, capaz de demonstrar suas habilidades para recrutadores e clientes.

Você vai construir a aplicação com Next.js 14, aproveitando ao máximo o App Router, Server Components e otimizações de performance. Utilizaremos Chart.js integrado ao React para criar gráficos interativos e responsivos — gráficos de linhas, barras e pizza. A estilização será feita com Tailwind CSS, garantindo um visual moderno e profissional. Além disso, implementaremos gerenciamento de estado com React Context, autenticação com NextAuth.js e funcionalidades como exportação de relatórios CSV e modo escuro.

Este curso é ideal para desenvolvedores com conhecimento básico de React e JavaScript que desejam dar o próximo passo no ecossistema Next.js. Você deve saber criar componentes React, entender o conceito de props e estado, e ter familiaridade com TypeScript básico. Ao final, terá construído um projeto completo e estará pronto para criar aplicações de nível profissional no mundo real.

O que você vai aprender

Ao final deste curso, você será capaz de:

Pré-requisitos

Conhecimento básico de React (componentes, props, useState e useEffect). Familiaridade com TypeScript básico (tipos e interfaces). Node.js versão 18 ou superior instalado. Noções de HTML e CSS. Ter desenvolvido algum projeto com React anteriormente é um diferencial.

Conteúdo do curso

Módulo 1: Configuração do Ambiente e Estrutura do Projeto

Instale e configure todas as ferramentas necessárias para o projeto. Ao final deste módulo, você terá um projeto Next.js 14 com TypeScript, Tailwind CSS e Chart.js configurado e pronto para desenvolvimento.

  1. Introdução ao Projeto — O que Vamos Construir (25 min)
  2. Instalando Next.js 14 com TypeScript e Tailwind CSS (30 min)
  3. Instalando e Configurando Chart.js com react-chartjs-2 (30 min)
  4. Estrutura de Pastas e Arquitetura do Projeto (30 min)

Módulo 2: Layout, Sidebar e Navegação

Construa o layout principal do dashboard com sidebar responsiva, header e sistema de roteamento usando o Next.js App Router. Ao final deste módulo você terá a estrutura visual completa do dashboard.

  1. Criando o Layout Principal com Sidebar Responsiva (35 min)
  2. Criando o Header com Informações do Usuário (25 min)
  3. Roteamento com Next.js App Router e Página Overview (30 min)
  4. Componentes de UI Reutilizáveis — Card e Badge (25 min)

Módulo 3: Gráficos e Visualizações com Chart.js

Implemente todos os gráficos do dashboard: linha, barras e pizza. Aprenda a customizar cores, escalas, tooltips e tornar os gráficos responsivos e adaptáveis ao modo escuro.

  1. Gráfico de Linha — Evolução do Saldo (35 min)
  2. Gráfico de Barras — Comparação Mensal de Receitas e Despesas (30 min)
  3. Gráfico de Pizza — Distribuição de Despesas por Categoria (30 min)
  4. Responsividade e Modo Escuro nos Gráficos (25 min)

Módulo 4: Gerenciamento de Estado e Filtros de Período

Implemente o estado global do dashboard com React Context, crie filtros de período (mensal, trimestral, anual) e conecte os filtros aos gráficos para atualização dinâmica dos dados.

  1. Estado Global com React Context — DashboardProvider (30 min)
  2. Componente PeriodFilter e Conexão com os Gráficos (30 min)
  3. Tratamento de Estados de Loading e Erro (25 min)

Módulo 5: KPIs, Tabela de Transações e Funcionalidades Avançadas

Construa os cards de KPI com variação percentual, a tabela de transações com busca e paginação, exportação de dados em CSV e alternância de modo escuro.

  1. Cards de KPI — Saldo, Receitas, Despesas e Variação (30 min)
  2. Tabela de Transações com Busca e Paginação (35 min)
  3. Exportação de Dados em CSV (25 min)
  4. Modo Escuro Completo com next-themes (25 min)

Módulo 6: Autenticação com NextAuth.js

Proteja o dashboard com autenticação usando NextAuth.js. Crie a tela de login, configure o provider de credenciais, proteja rotas com middleware e gerencie sessões no cliente.

  1. Configurando NextAuth.js com Provider de Credenciais (35 min)
  2. Página de Login Personalizada (30 min)
  3. Middleware de Proteção de Rotas (25 min)

Módulo 7: Entrega Final e Próximos Passos

Faça o deploy da aplicação na Vercel, configure variáveis de ambiente de produção, aplique otimizações de performance e descubra como evoluir este projeto.

  1. Deploy na Vercel — Configuração e Variáveis de Ambiente (30 min)
  2. Otimizações de Performance e Boas Práticas (25 min)
  3. Melhorias Futuras e Como Evoluir este Projeto (20 min)