Dashboard NextJS, TypeScript e MaterialUI
Dashboard NextJS, TypeScript e MaterialUI
Palamar
Palamar 👨‍💻 Web Developer Frontend ⚛ JavaScript • React • NextJS • Node.js
Tags
nextjs
typescript
MaterialUi

Minha Motivação

Como um desenvolvedor que tenta contribuir com a comunidade escrevendo posts no meu blog e criando projetos, gostaria de ter um lugar a onde pudesse ver e rastrear todas essas minhas atividades em um só lugar. Então decidi criar uma dashboard de meus projetos.
A aplicação possui layout de um painel padrão:
  • cabeçalho
  • interruptor de tema claro e escuro
  • barra lateral com alternador
  • área de conteudo
  • rodapé
 
Visão da dashboard
Visão da dashboard
 

Tecnologias utilizadas

Front-end

Back-end

A primeira página exibe as principais estatísticas das postagens do meu blog.
  • a data de publicação
  • o título, que também serve como um link para a respectiva postagem/demonstração/ aplicativo do blog
  • contagem total de visualizações
  • janela modal com o gráfico que mostra o número de visualizações para cada dia durante o último mês, utilizando a biblioteca recharts.
As colunas Publicação , Visualizações dos últimos 7 dias e Total de visualizações podem ser classificadas. Por padrão, os dados são classificados pelo número de visualizações nos últimos 7 dias. A tabela de postagens do blog possui paginação.
Os dados sobre a contagem de visualizações são armazenados no banco de dados MongoDB  . Há uma rota API Next.js dedicada que se comunica com o banco de dados. Para poder reunir essas estatísticas, desenvolvi um gancho personalizado – useViewCounter .

A próxima pagina mostra as estatísticas do github:

Page/Github
Page/Github
Antes de usar a API REST do GitHub, você precisa criar um token de acesso pessoal. Aqui estão as instruções sobre como fazer isso.
Na parte superior da página, são mostrados os dados gerais do perfil do usuário do GitHub e os principais indicadores de estatísticas . Os dados de um perfil de usuário são uma resposta do https://api.github.com/user endpoint e incluem:
  • nome
  • bio
  • avatar
  • localização
  • empresa e outras informações de perfil.

A terceira e ultima pagina da nossa aplicação mostra as estatísticas do twitter:

Conforme declarado nos documentos , para obter acesso à API do Twitter, você precisa:
  1. inscreva-se e receba aprovação para uma conta de desenvolvedor
  1. obtenha a chave e os tokens do seu aplicativo.
Especificamente para meu painel, eu uso a v1.1. da API e do token do portador para autorização.
A seção superior da página exibe informações gerais sobre o perfil do Twitter . Esses dados vêm da https://api.twitter.com/1.1/users/show API e incluem:
  • Nome do ecrã
  • nome
  • Descrição
  • localização
  • quando um perfil foi criado
  • contagem de seguidores
  • URL da imagem e assim por diante.

Local develoment

  1. Crie o arquivo `.env.local` com as seguintes variáveis de desenvolvimento:
GITHUB_PERSONAL_TOKEN=
TWITTER_BEARER_TOKEN=
TWITTER_USERNAME=
MONGODB_URI=
MONGODB_DB=
2. Para rodar o seu ambiente de desenvolvimento utilize os comandos:
npm dev

# ou

yarn dev

Conclusão

O deploy da versão demo da aplicação está hospedada na (Vercel ) para acessar a versão beta clique aqui.