Dashboard NextJS, TypeScript e 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é

Home.png

Visão da dashboard

Tecnologias utilizadas

Front-end

✔️ Next.JS

✔️ TypeScript

✔️ Material UI

✔️ Recharts

✔️ React-spring

Back-end

✔️ MongoDB

✔️ GitHub API

✔️ Twitter API

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:

Repo.png

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
  2. 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=
  1. 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.

Company

PostsCareersContato

Install App

©2022 Aleksander Palamar. All rights reserved | CNPJ 26.328.604/0001-55