Blog

Full-stack blogging platform with JWT auth, social features and S3-backed image uploads — React + Node + Express + MongoDB.

A learning-focused MERN stack blog (2022) covering the full path from auth and account verification to posts, comments and social interactions. Backend is a vanilla Express + Mongoose REST API; frontend is a Create React App SPA with Redux Toolkit and Tailwind.

✨ Features

• Auth — register, login, JWT sessions, password hashing with bcrypt
• Account verification & password reset — token-based flow with SendGrid email delivery
• Posts — create, read, update, delete, with categories, cover image, views counter
• Likes / dislikes — toggle reactions on posts
• Comments — full CRUD on post comments
• Categories — admin-only management (create / update / list)
• User profiles — bio, profile picture upload to AWS S3 via multer + aws-sdk
• Social graph — follow / unfollow users
• Admin controls — block / unblock users, protected admin routes
• Pagination middleware for the posts list
• Profanity filter on content (bad-words)
• Centralised error handling and async wrapper

🛠️ Tech Stack

• Frontend — React 18, React Router 6, Redux Toolkit, Tailwind CSS, MUI, Formik, react-toastify, react-dropzone, axios
• Backend — Node.js, Express, express-async-handler, CORS
• Database — MongoDB via Mongoose 6
• Auth — JSON Web Tokens (jsonwebtoken) + bcryptjs
• Storage — AWS S3 (image uploads) via multer + aws-sdk
• Email — SendGrid (@sendgrid/mail)

📁 Project Structure

Mern-blog/
├── backend/
│   ├── config/         # MongoDB connection
│   ├── controllers/    # users, posts, comments, categories, emails
│   ├── middlewares/    # auth, upload (multer), pagination, errors
│   ├── models/         # User, Post, Comment, Category, Email
│   ├── routes/         # /api/users, /api/posts, /api/comments, ...
│   └── server.js
└── frontend/
    ├── src/
    │   ├── components/ # auth, post, comment, category, profile, navigation
    │   ├── pages/
    │   ├── redux/      # Redux Toolkit slices
    │   └── App.js
    └── tailwind.config.js

🔌 API Overview

🙌 Credits

Built by Mohamed Gado.