BlogSpot is a full-stack blog application built using the MERN Stack (MongoDB, Express.js, React, Node.js).
The application allows authenticated users to create blog posts with images, view them in a card-based layout, update existing blogs, and remove blogs when required.

The project includes Authentication and Authorization, ensuring that only logged-in users can access protected pages like Blogs and Add / Update Blog.
The UI follows a clean, modern card-based theme, making it suitable for real-world usage as well as portfolio showcase.

• 🔐 Authentication & Authorization

  • User Sign Up and Log In
  • Session-based authentication using cookies
  • Protected routes — only logged-in users can access blog features

• 📝 Add Blog with Image

  • Add blog title, category, description, and image
  • Image upload support using Multer

• ✏️ Update Blog

  • Edit existing blog details
  • Pre-filled form during update
  • Existing image preview while updating

• 🗑️ Delete Blog

  • Remove blogs directly from the blog listing page

• 📰 Blog Listing Page

  • Card-based UI displaying blog image, title, category, and description

• ⚡ Full MERN Stack Integration

  • React frontend with API integration
  • Node.js & Express backend
  • MongoDB database for persistent storage

React — Frontend library for building interactive user interfaces

Node.js — Backend runtime for server-side logic

Express.js — Backend framework for REST APIs

MongoDB — Database for storing users and blog data

CSS — Custom styling for clean and responsive UI

1. Users first sign up or log in to the application.
2. After successful login, authenticated users can access protected pages.
3. The Blogs page displays all blog posts in a card-based layout.
4. Users can add new blogs with images using the Add Blog page.
5. Clicking the update option redirects the user to the Add / Update Blog page with pre-filled data.
6. Blogs can be removed directly from the Blogs page.
7. Authentication is maintained using session-based cookies, ensuring secure access.

• Complete Authentication & Authorization flow
• Image upload support for blog posts
• Clean separation of frontend and backend
• Private routing to protect sensitive pages
• Real-world MERN project suitable for portfolio and interviews