🛠️ A Stack Principal

Para esse projeto, decidi separar a aplicação em duas partes: um frontend super rápido e um backend robusto para gerenciar os dados.

Frontend (my-blog):

  • Astro: Um framework incrível focado em conteúdo que entrega sites extremamente rápidos.
  • Tailwind CSS: Para estilização rápida e responsiva.
  • Marked: Para converter nossos arquivos Markdown em HTML.

Backend (my-blog-backend):

  • Node.js + Express: O clássico e confiável servidor web.
  • TypeScript: Para garantir tipagem e evitar erros bobos no código.
  • Prisma (com SQLite): Nosso ORM e banco de dados local para guardar os metadados dos posts.
  • Multer: Para lidar com o upload dos arquivos de texto.

🏗️ Arquitetura e Fluxo de Dados

A ideia aqui é manter as coisas simples. O fluxo funciona basicamente assim:

  1. O frontend faz uma requisição (consulta) ao backend para obter a lista de posts e o conteúdo deles.
  2. O backend armazena os arquivos de texto (Markdown) em uma pasta local (uploads/) e salva os metadados (como título, data e tags) em um arquivo JSON (data/posts.json) ou no banco de dados via Prisma.
  3. Bônus: O frontend foi construído de forma flexível. Se o backend estiver offline, ele também pode renderizar posts estáticos diretamente de uma pasta interna (src/components/content/).

🚀 Como rodar o projeto localmente

Quer testar na sua máquina? É bem simples. Você vai precisar de dois terminais abertos: um para o frontend e outro para o backend.

1. Preparando o ambiente

Primeiro, instale as dependências em ambas as pastas:

# No diretório do Frontend
cd my-blog
npm install

# No diretório do Backend
cd my-blog-backend
npm install

2. Iniciando o Backend

O backend usa o Prisma para gerenciar o banco de dados e ts-node-dev para rodar o servidor em modo de desenvolvimento.

cd my-blog-backend
npm run prisma:generate   # Rode isso se você alterar o arquivo schema.prisma
npm run dev               # Inicia o servidor

3. Iniciando o Frontend

Em outro terminal, inicie o Astro:

cd my-blog
npm run dev

Agora é só abrir o seu navegador no endereço que o Astro fornecer (geralmente http://localhost:3000).

✍️ Como criar o seu primeiro post

  1. Crie o seu texto em um arquivo Markdown e salve na pasta my-blog-backend/uploads/ (ex: meu-primeiro-post.md).
  2. Atualize o registro do post em my-blog-backend/data/posts.json com os metadados (id, title, slug, path, date, excerpt, tags).
  3. Reinicie o servidor ou chame a rota de reindexação do backend para que o novo post fique visível.

🔌 Para os curiosos: Nosso Contrato de API

Se você quiser explorar ou expandir o backend, estas são as rotas principais que o frontend consome:

  • GET /posts: Retorna um JSON com a lista de todos os posts (id, título, slug, resumo, data).
  • GET /posts/:slug: Retorna o conteúdo completo de um post específico.
  • POST /posts: Rota para criar um novo post fazendo o upload de um arquivo (multipart/form-data).

Casos de borda que tratamos: O sistema prevê validação para evitar conflitos de URL (slugs iguais), aplica limites de tamanho nos uploads via Multer e retorna erros claros (400 para requisições ruins, 500 para erros de servidor).