Neste curso você irá desenvolver um Dashboard utilizando ReactJs e TypeScript. Você irá desenvolver um layout responsivo com Grid Layout e Flexbox. Nesse projeto, além de aprender a criar gráficos, também irá criar temas de cores e permitir o usuário a trocar o tema (dark e light). E também irá aprender a aplicar animações.
- 1. Introdução
- 1.1 A aplicação que vamos desenvolver
- 1.2 Aquecendo os motores com TypeScript
- 1.3 Recado do projeto
- 2. Preparando o seu ambiente de desenvolvimento
- 2.1 Instalação e configuração do ambiente de desenvolvimento com o React Js
- 2.2 O Rodrigo do futuro tem um recado para você sobre o próximo vídeo
- 2.3 Extensões e produtividade no seu Visual Studio Code
- 2.4 Instalando o Yarn. O gerenciador de pacotes queridinho dos devs.
- 3. Desenvolvimento do layout do dashboard
- 3.1 Criando o projeto
- 3.2 Styled Components - Instalação e estilos globais
- 3.3 Criação dos componentes do Layout da nossa aplicação
- 3.4 Criando os temas de cores da aplicação
- 3.5 Criando o header principal
- 3.6 Criando o componente Toggle
- 3.7 Criando o Menu Lateral
- 3.8 Criando o header de conteúdos
- 3.9 Criando o componente de select e deixando o header content dinâmico
- 3.10 Criando a lista de movimentos financeiros
- 3.11 Personalizando a scroll bar e mantendo o aside e o header fixo na rolagem
- 3.12 Refatorando o cartão de movimentos financeiros
- 3.13 Criando os filtros
- 4. Rotas e navegação da aplicação
- 4.1 Criando a navegação de páginas
- 5. Desenvolvendo as funcionalidades das listagens de movimentações financeiras
- 5.1 Listando as saídas e entradas
- 5.2 Formatando valor e data
- 5.3 Filtrando as entradas e saídas pelo mês e ano
- 5.4 Carregando os meses e anos dinamicamente
- 5.5 Conclusão do filtro de meses e anos
- 5.6 Filtrando pelo tipo de movimento financeiro
- 5.7 Code Review das listagem de registros
- 5.8 Tratando os filtros de mês e ano
- 6. Desenvolvendo o Dashboard
- 6.1 Criando o content header do dashboard
- 6.2 Criando os cartões de movimentação da carteira
- 6.3 Criando o cartão de status da carteira
- 6.4 Deixando os cartões com informações dinâmicas
- 6.5 Criando o visual do gráfico de pizza
- 6.6 Carregando o gráfico de pizza com dados
- 6.7 Criando o gráfico de linhas para o histórico de saldo
- 6.8 Formatando os valores da legenda do gráfico de histórico de saldos
- 6.9 bate papo sobre a atualização do recharts
- 6.10 Criando os gráficos de barras de entradas e saídas eventuais x recorrentes
- 6.11 Refatorando os gráficos
- 6.12 Melhorando a legenda dos gráficos de barras
- 7. Criando o tema dark e light do dashboard
- 7.1 Context API
- 7.2 Criando o nosso hooks de temas
- 7.3 Trocando o theme pelo botão Toggle
- 7.4 Salvando o tema no local storage do navegador do usuário
- 8. Autenticação no Dashboard
- 8.1 Criando a tela de login
- 8.2 Criando o componente de input
- 8.3 criando o componente de botão
- 8.4 Criando o hooks de autenticação
- 8.5 Menu de logout do dashboard
- 9. Deixando o layout do nosso dashboard responsivo
- 9.1 Quebras de layout e download da ferramenta Responsively
- 9.2 Instalando e usando o Responsively
- 9.3 Aplicando media queries no componente de layout
- 9.4 Aplicando media queries nos cartões de movimentação da carteira
- 9.5 Aplicando media queries no cartão de mensagem
- 9.6 Aplicando media queries no gráfico de pizza
- 9.7 Aplicando media queries no gráfico de histórico de saldos
- 9.8 Aplicando media queries nos gráficos de barra
- 9.9 Aplicando media queries no menu lateral
- 9.10 Criando o botão toggle para abrir e fechar o menu lateral
- 9.11 Incluindo o toggle de temas no menu lateral para mobiles
- 9.12 Ajustes finais no layout responsivo
- 10. Aplicando animações no Dashboard
- 10.1 Aplicando animação de entrada nos cartões de informações da carteira
- 10.2 Aplicando animação de encontro nas caixa de mensagem e gráfico de pizza
- 10.3 Aplicando efeito de entrada no histórico de saldo
- 10.4 Efeito de entrada para os gráficos de barras
- 10.5 Aplicando efeito de entrada nas listas
- 11. Conclusão do curso
- 11.1 Fim!
- 11.2 Código fonte do projeto