BlogDev

Aplicação de blog construída com React e Vite, consumindo a API pública do DEV.to para listar artigos de desenvolvimento e exibir seus detalhes em uma interface simples e responsiva.

Tecnologias utilizadas

• React 19: criação de componentes funcionais e uso de hooks (useState, useEffect).
• Vite: bundler e dev server com HMR (npm run dev, npm run build, npm run preview).
• React Router v7:
  • BrowserRouter, Routes, Route, Outlet;
  • Link, NavLink, useNavigate, useParams;
  • Rotas dinâmicas (/blog-post/:slug) e rota coringa (*) para página 404.
• Framer Motion: animação dos cards de posts (fade-in, scale, hover) para deixar a UI mais fluida.
• CSS Modules: estilização isolada por componente/página (home.module.css, card.module.css, about.module.css, etc.).
• Fetch API: consumo da API https://dev.to/api/articles para buscar os posts.
• ESLint: configuração padrão do template React + Vite para garantir boas práticas básicas.

Estrutura principal do projeto

• main.jsx

  • Envolve a aplicação em StrictMode e BrowserRouter.
  • Renderiza o componente de rotas AppRoutes.

• routes/AppRoutes.jsx

  • Define as rotas:
    • / → página Home;
    • /about → página About/Sobre;
    • /blog-post/:slug → página de detalhes do post;
    • /notFound e * → página NotFound (404).
  • Usa o layout compartilhado AppLayout para envolver rotas com Header e Footer.

• layout/index.jsx

  • Layout padrão com:
    • Header no topo;
    • Outlet para renderizar a rota atual;
    • Footer no final da página.

• Páginas

  • Home:
    • Campo de busca controlado (useState) para filtrar posts por título.
    • Renderiza CardContainer, que busca e exibe os cards de artigos.
  • PostCard:
    • Usa useParams para pegar o slug da URL.
    • Busca a lista de posts da API e encontra o post pelo slug.
    • Redireciona para /notFound se o post não existir.
    • Mostra banner, título, texto descritivo e link para o artigo original.
  • About:
    • Página estática explicando o objetivo do projeto e quem desenvolveu.
  • NotFound:
    • Página de erro 404 com mensagem amigável e link para voltar à Home.

• Componentes

  • Header:
    • Título do blog e navegação principal com MenuLink para Home e About.
  • Footer:
    • Nome do autor e link para o GitHub.
  • MenuLink:
    • Wrapper com NavLink para criar links de navegação estilizados.
  • CardPost:
    • Card individual de post com imagem, título, descrição, autor e botão "Ler Mais".
    • Usa Framer Motion para animações de entrada e hover.
  • CardContainer:
    • Faz o fetch dos artigos na API.
    • Exibe um estado de carregamento (Loading) enquanto a requisição não termina.
    • Filtra os posts pelo termo de busca digitado na home.
  • Loading:
    • Componente simples com ícone e texto "Codificando os posts...".

O que foi aprendido neste projeto

• Consumo de API REST em React

  • Uso de fetch dentro de useEffect para buscar dados assíncronos.
  • Armazenar a resposta em estado (useState) e trabalhar com listas de objetos.
  • Tratamento de estado de carregamento (componente Loading).

• Trabalho com rotas no React Router

  • Configuração de rotas com Routes e Route.
  • Uso de rotas aninhadas com Outlet e layout compartilhado.
  • Criação de rotas dinâmicas com parâmetros (/blog-post/:slug).
  • Redirecionamento via useNavigate para páginas de erro ou volta à home.

• Componentização e reaproveitamento de código

  • Separação de responsabilidades em componentes menores (CardPost, CardContainer, Header, Footer, etc.).
  • Reutilização de componentes com props (por exemplo, MenuLink para diferentes rotas).
  • Organização do projeto por pastas de páginas e componentes.

• Estilização com CSS Modules

  • Criação de estilos isolados por componente/página evitando conflitos de classe.
  • Uso de variáveis de CSS globais no main.css (cores, fontes, background).
  • Construção de um layout com cara de dashboard/blog (cards, cabeçalho, rodapé).

• Animações com Framer Motion

  • Aplicação de animações de entrada (fade/scale) ao scroll.
  • Efeito de hover suave nos cards para melhorar a experiência do usuário.

• Boas práticas gerais em React

  • Uso de StrictMode no main.jsx.
  • Nomeação clara de componentes e arquivos.
  • Separação entre lógica de dados (fetch, filtros) e apresentação (UI).

Como rodar o projeto localmente

1. Pré-requisitos

   • Node.js instalado (versão LTS recomendada).

2. Instalar dependências

   npm install

3. Rodar em modo desenvolvimento

   npm run dev

4. Build para produção

   npm run build

5. Pré-visualizar o build

   npm run preview

Objetivo do projeto

Este projeto foi pensado como um laboratório de estudo prático: consumir APIs reais, trabalhar com rotas, animações, componentização e estilização moderna com React. A ideia é que ele sirva como base para você evoluir, testar novas features e adaptar o blog ao seu próprio estilo.

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.