Construindo minha página e apresentando o MaterialUI Personal page
terça-feira, 21 de julho de 2020Construir um blog e uma página de apresentação do meu perfil era um sonho de muito tempo. Como um bom desenvolvedor, decidi fazer o meu próprio projeto e colocá-lo como portfólio.
Inicialmente, escolhi as páginas para compor a aplicação:
Página inicial, com a introdução do meu perfil
Currículo
Apresentação dos meus projetos
Blog
Além da página, eu quis trabalhar com algum aprendizado diferente. Então, coloquei alguns desafios para tornar a construção do projeto mais divertida.
Ser integrado com um sistema pronto de CMS Headless
Gerar páginas estáticas
Ter o conteúdo internacionalizável
Ter a menor quantidade possível de texto hardcoded
Primeiro, fiz a escolha do CMS. O Contentful se mostrou uma excelente opção, com bons limites no tier gratuito, suporte nativo à internacionalização e um com recursos suficientes para a produção do conteúdo.
Depois, fiz a escolha da tecnologia. Escolhi material-ui para a biblioteca de componentes por questão de gosto. A minha decisão mais interessante foi para o framework base. Tinha duas opções no meu radar e fiz questão de testar ambas, gatsby e Next.js.
A primeira versão do projeto foi com gatsby: com os plugins disponíveis foi fácil fazer a integração com o Contentful e colocar a página principal no ar. Nesse projeto, senti que faltou pensar melhor o design da página, ela ficou muito poluída e não fiquei nenhum pouco contente com o resultado. Em termos de developer experience fiquei muito satisfeito, tudo funcionou muito bem e o framework foi bem flexível para atender todos os meus propósitos.
Como já iria refazer a aplicação por causa do design, achei que seria uma boa hora para testar a segunda opção, o Next.js. Também acrescentei um novo desafio ao projeto, o Typescript.
Como resultado, nasceu o material-home-page, um sistema flexível, internacionalizável e completo para montar uma página em poucos minutos.
Quero agradecer ao menino Wendler Eis que me ajudou muito com esse projeto. Todo dia era uma alguma mensagem nova para contar as novidades e pedir feedback.
Com os conteúdos já criados no CMS durante o primeiro projeto, fiz o setup de um projeto em branco e começei a escrever os componentes.
Coisas legais
Usar o Typescript me permitiu alterar várias vezes a modelagem no CMS sem me preocupar se a aplicação iria quebrar em algum ponto cego. Bastava refletir a modelagem na interface principal e era fácil ver os trechos de código que precisavam de alteração. Foi extremamente produtivo.
Criar os provedores para o conteúdo e para o gerenciamento dos idiomas na URL permitiu a criação de componentes com código muito limpo. Entender os componentes na pasta pages/ ficou fácil e desenvolver uma nova página também.
A abstração do <head> nativa do Next.js permitiu que o SEO fosse trabalhado individualmente em cada página.
O suporte a múltiplos idiomas ficou bem centralizado em um único ponto, não expondo muito para os componentes. Os textos hardcoded foram poucos e ficou muito fácil de adicionar suporte a novos idiomas.
Próximos passos
Melhorar ainda mais o SEO das páginas
Melhorar a forma de como os links são construídos (remover a dependência do currentLanguagePath nas props dos componentes)
Permitir que páginas inteiras sejam criadas através de entradas no Contentful
Permitir a configuração do tema e das cores através do CMS
PRs e Issues são super bem-vindos! Link para o repositório