Como esse blog foi construído

Aproveitei a semana para praticar e finalizar um projeto que estava há tempos na fila para serem feitos. Um blog para que eu possa compartilhar opinião e comentar sobre assuntos referentes a tecnologia e em especial ao que tenho mais contato e afinidade, que é o front-end e o ecossistema ReactJS, React native, Node. O blog tem por base uma aplicação similar construída nas atividades do Ignite da Rocketseat, mas tratei de personalizar e modificar para deixar mais do meu jeito e também para me virar sozinho com o código, principalmente em relação a configuração do CMS Prismic, que tem bastante configuração nova e dei preferência por utilizar com o Nextjs, já que na aplicação base era com JS vanilla. Outra inspiração para esse projeto é o blog do Willian Justen, que tem um layout simples a amigável e deve ser a base para as próximas implementações.

MVP

Para essa primeira versão priorizei a velocidade de entrega e, conforme o conceito de MVP do scrum, lancei logo o produto minimamente utilizável, que é a página inicial com a listagem de posts, as primeiras postagens e uma página sobre o projeto. A intenção é aprimorar e melhorar cada vez mais a experiência do usuário e para tanto estão previstas novas jornadas de entregas contendo atualizações como adicionar a seção de comentários para que qualquer um possa fazer comentários nas postagens, botões para compartilhar alguma postagem em redes sociais, trazer mais informações na página sobre mim, dentre outras.

Ferramentas utilizadas

Quanto as ferramentas, foram utilizadas o React com NextJS para facilitar o roteamento das páginas e melhorar a performance da aplicação. Além disso foi utilizado o Typescript para a tipagem do que é consumido pela aplicação. Aliás, sobre o "backend" utilizamos o conceito de headless, por meio de consumo de dados via Prismic, um CMS que vai receber as informações de cada postagem e retorná-la em formato JSON. (O conceito de headless permite um foco maior onde o conteúdo é apresentado, separando o website do backend).

Em relação ao código, foi utilizada a organização de pastas já preconfigurada pelo Next, em que as páginas ficam em subpastas da pasta page e as rotas são automaticamente criadas. Cada página contém o arquivo .tsx com os componentes funcionais em React e o arquivo .module.scss que contém a estilização utilizando o Sass. No projeto também foi configurado o Storybook para documentar os elementos de design e quando novas features forem lançadas possam seguir um padrão já estabelecido desde o início e facilite assim a manutenção da página.

Publicação na Vercel

Para o deploy foi utilizada a Vercel que faz o build a partir da branch principal do repositório no Github, simplificando todo o processo. O Código está disponível aqui.