Dev Media é um site web que informa as métricas do Github, Instagram, Twitter (eu me recuso a chamá-lo de X) e Youtube de um desenvolvedor popular na comunidade, sendo Filipe Deschamps, Gustavo Guanabara ou Fábio Akita.
Na página inicial é exibido a quantidade de seguidores de cada uma das redes sociais do desenvovedor, enquanto na página secundária é exibido isso e mais outras métricas das respectivas plataformas.
O objetivo ao realizar esse projeto foi aprender o conceito de Proxy Reverso e Load Balacing utilizando Nginx. Nesse caso, utilizei 4 containers Docker uma para ser o servidor web, outro para servir o banco de dados e os demais para ser a aplicação em si (cada uma delas imforma as respectivas métricas de cada um dos desenvolvedores citados).
Além disso, esse projeto é inspirado em ambos os desafios Time tracking dashboard e Social media dashboard with theme switcher do Frontend Mentor, uma plataforma online e gratuita para desenvolvedores melhorarem suas habilidades no Frontend.
Página inicial
|
Página de detalhes
|
- Deve ser exibido 4 widgets sendo que em cada um deve conter
- Número de seguidores do Github
- Número de seguidores do Twitter
- Número de seguidores do Instagram
- Número de inscritos do Youtube
- Link para levar o usuário diretamente para a conta do desenvolvedor da respectiva rede social
- Deve ser exibido o avatar de um avatar do densenvolvedor, juntamente com o seu nome.
- Deve ser disponibilizado um link para a página de detalhes.
- Deve ser exibido os widgets da página inicial
- Deve ser exibido total de seguidores/incritos considerando todas as redes sociais do desenvolvedor
- Deve ser exibido em forma de cards as seguintes informações:
- Quantidade de repositórios no Github
- Quantidade de Stars no Github
- Quantidade de likes no Twitter
- Quantidade retweets no Twitter
- Quantidade de publicações no Instagram
- Quantidade de likes no Instagram
- Quantidade de views no Youtube
- Quantidade de videos no Youtube
- Cada widget deve informar a variação absoluta com relação ao dia anterior
- Cada card deve informar a variação percentual com relação ao dia anterior
- Caso o usuário acesse uma rota contendo o nome do desenvolvedor, ex.:
/akita, ele deve ser redirecionado para a aplicação referente a ao desenvolvedor Akita.
- A cada vez que o usuário recarregar a página, ele deve ser direcionado para a aplicação de outro desenvolvedor.
- Todas as aplicações devem ter o mesmo peso no load balancing, ou seja todo o número de requests deve ser igualmente distribuído entre elas.
- As tabelas deve ser criadas automaticamente ao iniciar a aplicação
- Os dados referentes aos desenvolvedores devem ser inseridos automaticamente ao iniciar a aplicação
- As métricas a serem exibidas deve ser reais, ou seja, devem ser providas de serviços externos a aplicação
- As métricas providas externamente a aplicação devem ser inseridos no banco de dados a cada 10 minutos
- O usuário pode escolher o tema da aplicação (light ou dark)
- O padrão deve ser dark mode
- O tema escolhido deve ser armazado no navegador de tal forma que mesmo se o usuário recarregar a página o tema escolhido deve ser selecionado automaticamente
Este projeto foi desenvolvido usando as seguintes tecnologias:
-
Python para programar o backend
-
Flask Para ser o servidor web da aplicação
-
Peewee Para consultar e manipular dados o banco de dados (ORM)
-
Ngnix para ser o proxy reverso e aplicar o load balancing
-
SQLite Para servir como banco de dados de teste
-
PostgreSQL - para servir como banco de dados de produção
-
TailwindCSS - para estilizar as templates HTML
-
HTML - Para construir os templates da aplicação
-
JavaScript - Para fazer funcionalidade de light/dark mode
-
Docker - para criar e gerenciar os containers do Nginx, das aplicações e do banco de dados
-
Github Rest API - para buscar dados públicos de um perfil do Github
-
Rettiwt API - para buscar dados públicos de um perfil do Twitter
-
Youtube API - para buscar dados públicos de um canal do Youtube
Para mais detalhes acerca das dependências do projeto, como versões específicas, veja o arquivo package.json do projeto.
Antes de baixar o projeto você necessecitará ter instalado na sua máquina as seguintes ferramentas:
Além disto é bom ter um editor para trabalhar com o código, como o VSCode.
Além disto é crucial configurar as variáveis de ambiente em um arquivo chamado
.envantes de executar a aplicação. veja o arquivo .env.example para ver quais variáveis devem ser configuradas.
# Clone este repositório
$ git clone https://github.com/JohnPetros/dev-media.git
# Acesse a pasta do projeto
$ cd dev-media
# Rode os containers do projeto
$ docker compose up
Muito provavelmente a aplicação estará rodando no endereço http://localhost:8000
python -m pytest src/app/core
# Fork este repositório
$ git clone https://github.com/JohnPetros/dev-media.git
# Cria uma branch com a sua feature
$ git checkout -b minha-feature
# Commit suas mudanças:
$ git commit -m 'feat: Minha feature'
# Push sua branch:
$ git push origin minha-feature
Você deve substituir 'minha-feature' pelo nome da feature que você está adicionando.
Utilize minha tabela de emojis para cada tipo de commit para manter o padrão entre as mensagens de commit.
Você também pode abrir um nova issue a respeito de algum problema, dúvida ou sugestão para o projeto. Ficarei feliz em poder ajudar, assim como melhorar este projeto.
Esta aplicação está sob licença do MIT. Consulte o Arquivo de licença para obter mais detalhes sobre.
Feito com 💜 por John Petros 👋🏻
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent