FocusFeed é uma plataforma moderna de blog construída com a stack MERN, oferecendo uma experiência intuitiva para criação e compartilhamento de conteúdo. Com um editor rico em recursos e um sistema robusto de gerenciamento de conteúdo, o FocusFeed proporciona todas as ferramentas necessárias para autores expressarem suas ideias.
- Editor de texto rico com suporte para formatação avançada (H1, H2, listas, links, negrito, itálico, sublinhado)
- Sistema de categorização de posts
- Suporte para tags
- Upload de imagens via URL
- Sistema de preview antes da publicação
- Sistema de likes/dislikes em posts
- Contador de visualizações
- Perfis personalizáveis de autores
- Newsletter para acompanhamento de atualizações
- Sistema completo de autenticação
- Perfis personalizáveis
- Dashboard para gestão de posts
- Métricas de engajamento por post
- React - Biblioteca JavaScript para construção de interfaces de usuário.
- Vite - Ferramenta de build para um desenvolvimento frontend rápido.
- React Router - Para roteamento e navegação na aplicação.
- React Hook Form - Para gerenciamento de formulários.
- React Select - Para campos de seleção customizados.
- React Toastify - Para notificações e alertas.
- @tiptap/react - Um editor de texto rico para a criação de posts.
- Yup - Para validação de formulários.
- Axios - Cliente HTTP para fazer requisições ao backend.
- SCSS Modules - Para estilização com escopo local.
- Node.js - Ambiente de execução JavaScript.
- Express.js - Framework web para Node.js.
- express-rate-limit - Para limitar requisições repetidas.
- express-validator - Para validação dos dados da requisição.
- MongoDB - Banco de dados NoSQL para armazenamento dos dados da aplicação.
- Mongoose - ODM (Object Data Modeling) para interagir com o MongoDB.
- bcryptjs - Para criptografia de senhas.
- jsonwebtoken - Para autenticação e autorização baseada em tokens.
- dotenv - Para gerenciamento de variáveis de ambiente.
- nodemailer - Para envio de e-mails (newsletter, recuperação de senha).
- winston - Para logging da aplicação.
- cors - Middleware para habilitar o CORS.
- helmet - Para segurança através de vários headers HTTP.
- node-cron - Para agendamento de tarefas (envio automático de newsletter).
- html-to-text - Para converter HTML em texto simples para e-mails.
- concurrently - Para executar frontend e backend simultaneamente durante o desenvolvimento.
- standard-version - Para versionamento semântico e geração de CHANGELOG.
- Clone o repositório
git clone https://github.com/Amicuchi/BlogFocusFeed.git
cd BlogFocusFeed
- Instale as dependências
# Raiz do projeto
npm install
# Backendcd backend
npm install
# Frontendcd ../frontend
npm install
- Configure as variáveis de ambiente
Backend (.env):
# Configurações do ServidorPORT=5000NODE_ENV=development# Configurações do MongoDBMONGODB_URI=sua_uri_mongodb# Configurações de SegurançaCORS_ORIGIN=http://localhost:5173RATE_LIMIT_MAX=100# Configurações de EmailEMAIL_USER=seu_email@gmail.comEMAIL_PASS=sua_senha_appFRONTEND_URL=http://localhost:5173# SegurançaJWT_SECRET=seu_jwt_secretJWT_EXPIRES_IN=1dFrontend (.env):
VITE_API_BASE_URL=http://localhost:5000- Inicie a aplicação
# Na pasta raiz da aplicação
npm run dev
// UsuáriosPOST/api/users/register// Registro de usuárioPOST/api/users/login// LoginGET/api/users/user// Perfil do usuárioPUT/api/users/user// Atualização de perfilDELETE/api/users/user// Exclusão de conta// PostsGET/api/posts// Lista todos os postsGET/api/posts/:id// Detalhes do postPOST/api/posts// Cria novo postPUT/api/posts/:id// Atualiza postDELETE/api/posts/posts/:id// Remove postPOST/api/posts/:id/like// Like em postPOST/api/posts/:id/dislike// Dislike em post
- Faça um Fork do projeto
- Crie uma Branch para sua Feature (
git checkout -b feature/AmazingFeature) - Commit suas mudanças (
git commit -m 'Add some AmazingFeature') - Push para a Branch (
git push origin feature/AmazingFeature) - Abra um Pull Request
Aqui estão algumas sugestões de melhorias nas quais você pode colaborar para melhorar o projeto:
Sistema de Preview Antes da Publicação: Implementar um sistema de visualização para o usuário antes de publicar um post, permitindo ajustes finais.
Criação de Posts Patrocinados: Adicionar a funcionalidade para criar posts patrocinados, onde o usuário poderá selecionar essa opção ao criar um post. Após a publicação, um aviso pequeno será exibido (ex.: "Post Patrocinado", similar aos marketplaces como Mercado Livre e Facebook).
Normalização de Tags: Ao adicionar uma nova tag, o sistema deve normalizá-la, removendo acentos, espaços e aplicando o formato PascalCase, garantindo consistência no banco de dados.
Comentários nos Posts
Perfis de Autores: Criar páginas de perfil para cada autor, onde eles podem exibir suas biografias, links para redes sociais e uma lista de seus posts.
SEO: Otimizar o blog para SEO (Search Engine Optimization) para melhorar a visibilidade nos motores de busca.
Proteção Contra Injeção de SQL: Embora a aplicação utilize MongoDB, é fundamental proteger contra injeções de NoSQL, validando e sanitizando todas as entradas de usuário.
Escalonamento de Ações Sensíveis: Algumas ações mais delicadas, como a exclusão de um usuário, podem exigir uma confirmação ou justificativa que seja registrada no sistema, aumentando a segurança e controle.
- Testes Automatizados: Desenvolver testes unitários e de integração para garantir que os controllers e services funcionem conforme esperado. Isso facilita a manutenção e ajuda a prevenir regressões no código.
- Documentação de Código: Utilizar comentários e documentação adequada para facilitar a compreensão do código por outros desenvolvedores ou por você mesmo no futuro. Utilizar ferramentas como Swagger para documentar as rotas pode facilitar a manutenção e a colaboração futura.
- Logging (Logs e Auditorias): Implementar um sistema de logging para registrar atividades importantes e erros. Ferramentas como Winston ou Morgan podem ser úteis. Ações críticas (ex.: mudança de cargo, exclusão de posts ou usuários) devem ser registradas para garantir rastreabilidade e transparência.
- Swagger – Para documentação de APIs.
- Winston – Para logging de eventos.
- Morgan – Para logging HTTP.
- MongoDB – Banco de dados NoSQL utilizado na aplicação.
Este projeto está sob a licença ISC.
