O projeto tem como objetivo ser um ponto central do meu trabalho. No meu site listo minhas redes sociais, os vídeos que gravo para o YouTube, os artigos que escrevo no Dev.to e os projetos open source que tenho no GitHub.
Sempre trabalhei criando projetos para terceiros e agora realizei um dos meus maiores desejos: criar um site próprio e colocá-lo no ar. Esse é um dos primeiros projetos realmente meus e outros estão por vir.
Acredito que a melhor maneira de aprender é ensinando, com isso, para reforçar meus conhecimentos e ir para o próximo nível, comecei a criar vídeos para o YouTube e a escrever artigos para o Dev.to.
Não faria muito sentido ter que modificar manualmente o site para conter os novos conteúdos que criei, por isso quis centralizar o conteúdo que venho criando no meu site de maneira automatizada.
Em um primeiro momento, pensei em fazer um blog integrado, mas não consegui enxergar grandes ganhos nessa prática, então decidi usar o Medium. Não tive uma boa experiência com o editor e nem com a API deles, então decidi testar uma rede social que já estava há um tempo no meu radar: o dev.to, uma rede social open source para programadores. O editor dele aceita Markdown (o que facilita muito) e não tive problemas com a API pública.
Também pude colocar em prática nesse projeto um desejo antigo que era trabalhar com a API do YouTube (não foi uma boa experiência). Esperava mais da API, a documentação não é boa, é desatualizada e nada intuitiva, contendo muito texto e dificultando o entendimento. Eu realmente não esperava por isso. Pra piorar, me deparei com um Bug no meio do caminho, gerado por uma inconsistência na API.
Escolhi fazer o projeto com o Next.js (estou fazendo todos os meus projetos mais recentes com ele) e a experiência de desenvolvimento é muito melhor do que usar o CRA, além de fazer total sentido usá-lo nesse cenário. O ideal é ter as informações de forma estática no site, pois o conteúdo irá mudar algumas vezes na semana e isso vai garantir que o conteúdo já esteja disponível para o usuário quando ele acessar.
Usando o Next eu coloquei as páginas para serem geradas de maneira dinâmica em intervalos de 1h. Para fazer as buscas no YouTube é necessário gerar uma chave, e com o Next eu consigo manter essa chave em segurança no back-end da aplicação.
O mesmo serve para o Typescript. No começo eu não gostava dele, agora ele me protege de mim mesmo. Você pode conferir um artigo que escrevi sobre o Next e o TS clicando AQUI.
Para criar a interface gráfica, utilizei a biblioteca ChakraUI, que é extremamente interessante. Ela utiliza do conceito de CSS-in-JS, o que acaba deixando o código um pouco mais verboso e isso não me agradou um pouco no início. Porém, com a componentização, esse problema foi resolvido.
Uma das coisas que mais me encantou nessa lib foi a maneira como ela lida com a responsividade, é muito simples e prático. Diferente do tailwind, que usa classes para estilizar os elementos, no Chakra passamos as propriedades do CSS como propriedades do próprio elemento e isso não te deixa engessado, preso nos padrões da lib. Além disso, é bem mais prático de ler e escrever o CSS do elemento do que usando classes.
O Chakra traz componentes e hooks que agilizam muito o desenvolvimento, em breve vou escrever um post sobre essa lib e linkar aqui.
- Node.js
- Next.js
- React.js
- ChakraUI
- Typescript
- Commitlint, Husky e Commitizen - Artigo
- ESLint
- React Icons
- Primeiro passo, clone o projeto em sua máquina
- Abra a pasta do projeto no terminal
- Instale as dependências -
yarnounpm i - Duplique o arquivo
.env.examplecom o nome.env.local - Insira o Username do GitHub e Dev.to
- Será necessário o ID no canal do youtube e de uma chave (que precisa ser gerada no GCP, doc do youtube aqui), que será utilizada para fazer as buscas dos vídeos na API
- Com as variáveis de ambiente configuradas, inicie o servidor com o comando
yarn devounpm run dev - Abra uma aba no navegador e navegue para http://localhost:3000/
🛰️ Hospedagem: vitordevsp.com.br
