Pulo do Gato News é um blog de notícias com foco na região de São Paulo, tendo em seu acervo posts sobre educação, tecnologia, esporte, cultura pop etc.
Este é um projeto profissional freelance desenvolvida para a empresa do mesmo nome. Não somente isso, as ecolha das tecnologias foi feita com o objetivo de adquirir conhecimento a respeito de desenvolvimento de sites estáticos com foco em SEO utilizando uma CDN ou rede de distribuição de conteúdo.
- Na página home, a principal notícia do dia deve estar em destaque.
- Filtro por título, categorias ou tags.
- Listagem paginada por número de página
- Uma barra de progresso no topo da página deve crescer à medida que o leitor percorre a página da notíca.
- Deve ser possível o leitor compartilhar uma notícia pelo WhatsApp, Facebook, X, Reddit, LinkedIn, Gmail, Yahoo e Medium.
- Deve ser possível o leitor escrever um comentário na página da notícia.
- Cada comentário deve conter: conteúdo, nome e e-mail do leitor.
- A listagem de comentários deve estar paginada utilizando a estratégia de "Load More".
- Deve ser possível enviar uma coluna, isto é, uma história que o usuário do blog possua com o potencial de se tornar uma notícia.
- Cada coluna deve conter o conteúdo, nome e e-mail do colunista
- O conteúdo da coluna deve ser escrito utilizando um editor Rich Text.
- Autenticação de usuário utilizando a estratégia de magic link
- Gerenciamento de inscrição para uma Newsletter.
- Usuário poder fazer o gerenciamento do seus comentários no blog.
- Usuário poder responder outro comentário.
- Imagens otimizadas, com nomes descritivos e atributos alt text com descrições relevantes.
- Compartilhamento nas mídias sociais com o propósito de que o conteúdo seja divulgado fora do blog para aumentar o seu alcance e gerar mais backlinks.
- Alta velocidade de carregamento de página.
- Mobile-friendly, ou seja, conteúdo responsivo mantendo o bom desempenho em dispositivos móveis.
- Conteúdo de qualidade, original, relevante e completo sobre as principais notícias da região de São Paulo.
- Uso de palavras-chave principais no conteúdo blog, tornando-o atrativos e relevante para os usuários.
- Uso correto das tags HTML semânticas (H1, H2, etc.).
- Utilização de ferramentas, como Google Analytics e o Google Search Console para acompanhar o desempenho do blog e fazer ajustes na estratégia de SEO.
Este projeto foi desenvolvido usando as seguintes tecnologias:
-
Astro, framework JavaScript focado para a construção de sites estáticos de alta performance.
-
React para criação de interfaces intertivas não estáticas interativas
-
Sanity para prover o conteúdo do blog via CDN
-
TailwindCSS para estilização das páginas
-
Flowbite para construir componentes de página que exigem recursos de acessibilidade na web
Para mais detalhes acerca das dependências do projeto, como versões específicas, veja o arquivo package.json
Antes de baixar o projeto você necessecitará ter instalado na sua máquina as seguintes ferramentas:
- Git para manilupar repostitórios Git
- npm, yarn, bun pnpm para gerenciar pacotes JavaScript, estou utilizando npm.
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/pulo-do-gato-news.git
# Acesse a pasta do projeto
cd pulo-do-gato-news
# Rode a aplicação em modo de desenvolvimento
npm run devProvavelmente a aplicação estará rodando no endereço http://localhost:4321
# Fork este repositório
git clone https://github.com/JohnPetros/pulo-do-gato-news.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-featureVocê deve substituir 'minha-feature' pelo nome da feature que você está adicionando
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 a licença do MIT. Consulte o arquivo de licença para obter mais detalhes sobre.
Feito com 💜 por John Petros 👋🏻