Uma plataforma moderna para desenvolvedores compartilharem conhecimento, projetos e ideias.
O BlogGuide é um blog/rede social focada em desenvolvedores, onde é possível:
- 📝 Criar e compartilhar posts sobre tecnologia
- 💡 Compartilhar ideias de projetos
- 👥 Conectar-se com outros desenvolvedores
- 🔐 Sistema completo de autenticação
- 📱 Interface responsiva
- React 19 - Biblioteca principal
- Vite - Build tool e dev server
- React Router Dom - Roteamento
- Bootstrap 5 - Framework CSS
- ESLint - Linting
- JavaScript - Linguagem principal
- Bootstrap Icons - Ícones
- Google Fonts (Jersey 25) - Tipografia customizada
- CSS customizado - Estilos específicos
src/
├── components/ # Componentes reutilizáveis
│ ├── Header.jsx # Cabeçalho da aplicação
│ ├── Footer.jsx # Rodapé com navegação mobile
│ ├── PostCard.jsx # Card de exibição de posts
│ ├── PostForm.jsx # Formulário de criação/edição
│ └── ProtectedRoute.jsx # Proteção de rotas
├── contexts/ # Contextos React
│ ├── AuthContext.jsx # Contexto de autenticação
│ └── AuthProvider.jsx # Provider de autenticação
├── handlers/ # Lógica de negócio
│ ├── globalHandlers.jsx # Handlers globais
│ ├── loginHandler.jsx # Lógica de login
│ ├── registerHandler.jsx # Lógica de registro
│ └── postHandler.jsx # Lógica de posts
├── hooks/ # Custom hooks
│ ├── useAuth.js # Hook de autenticação
│ └── usePosts.js # Hook de posts
├── pages/ # Páginas da aplicação
│ ├── BlogPage.jsx # Página inicial (pública)
│ ├── LoginPage.jsx # Página de login
│ ├── RegisterPage.jsx # Página de registro
│ ├── CriarPostPage.jsx # Página de criação de posts
│ ├── IdeiasPage.jsx # Página de ideias
│ ├── SobrePage.jsx # Página sobre
│ └── UserPage.jsx # Perfil do usuário
├── routes/ # Configuração de rotas
│ ├── index.js # Barrel exports
│ ├── AppRoutes.jsx # Componente de rotas
│ ├── routes.js # Configuração das rotas
│ └── constants.js # Constantes de rotas
└── services/ # Serviços de API
├── auth.js # Serviço de autenticação
└── api/
└── bridge.js # Serviço principal de API
- Node.js 18+
- npm ou yarn
- Clone o repositório
git clone <repository-url>
- Instale as dependências
npm install- Configure as variáveis de ambiente
cp .env.example .envEdite o arquivo .env:
VITE_API_URL=http://localhost:8000- Execute em modo de desenvolvimento
npm run dev- Acesse a aplicação
http://localhost:5173
npm run dev # Executa em modo desenvolvimento
npm run build # Cria build de produção
npm run preview # Preview do build de produção
npm run lint # Executa linting/- Página inicial (preview do blog)/login- Página de login/register- Página de registro
/ideias- Página de ideias/sobre- Página sobre/usuario- Perfil do usuário/criar-post- Criação de posts
- Design mobile-first
- Navegação adaptativa
- Componentes responsivos
- Login/registro de usuários
- Proteção de rotas privadas
- Persistência de sessão
- Redirecionamento inteligente
- Criação de posts com rich text
- Upload de imagens via URL
- Sistema de tags
- Categorização
- Preview em tempo real
- Loading states
- Tratamento de erros
- Feedback visual
- Navegação intuitiva
A aplicação se conecta com uma API FastAPI:
- Base URL: Configurada via
VITE_API_URL - Autenticação: JWT Tokens
- Endpoints: Posts, Auth, Users
npm run buildO projeto inclui configuração para Vercel (vercel.json):
{
"rewrites": [
{
"source": "/(.*)",
"destination": "/index.html"
}
]
}.azul {
color: #333ceb; /* Azul principal */
}- Jersey 25 - Fonte principal
- Bootstrap - Classes utilitárias
- Fork o projeto
- Crie uma branch para sua feature
- Commit suas mudanças
- Push para a branch
- Abra um Pull Request
Este projeto está sob a licença MIT.
Guilherme Sampaio Dev fundador
Feito com ❤️ para a comunidade de desenvolvedores (este readme não está pronto ainda)