Projeto Gráficos com shadcn/charts e Next.js

Muitas vezes gráficos são a melhor forma de "enxergarmos" os dados. Neste mini projeto, vamos criar gráficos dinâmicos com shadcn, Next.js e Recharts.

Assistir agora

1. Apresentando o projeto

Todos os nossos projetos são gratuitos, porém os tutoriais são exclusivos para membros do Codante PRO. Este é um tutorial gratuito, para que você possa assistir e experimentar.

Se gostar, considere assinar para ter acesso a todos os tutoriais e apoiar o projeto!

Seu Instrutor

Roberto Cestari

Codante.io

Fundador e Professor no Codante.io.

Foi Tech Lead de front-end e professor especialista em React.

Formado e Mestre pela USP e formado pela FGV - EAESP.

Fundador e desenvolvedor da plataforma Trilhante, uma das maiores empresas de educação jurídica do país.

Junte-se a outras 22 pessoas que estão fazendo esse mini projeto.

Projeto Gráficos com shadcn/charts e Next.js

Assistir agora

Seu Instrutor

Roberto Cestari

Aulas

Apresentando o projeto

Requisitos e Design do Projeto

Setup do Projeto Next

Estruturando o HTML do projeto

Extraindo componentes

Estilizando os botões do Header

Dica - transforme ícones SVG em componentes React

Responsividade do Header

Usando o Card do shadcn/ui

Preparando os dados da API para o gráfico

Instalando o shadcn charts

Adicionando labels dos estados (LabelList)

Adicionando o eixo horizontal

Adicionando tooltip

Adicionando a barra de média

Gráfico de Gastos por Partido

Mudando os gráficos de acordo com a url

Criando o seletor de anos

Finalização

Junte-se a outras 22 pessoas que estão fazendo esse mini projeto.