GBlog: MERN Stack Blogging Platform

GBlog is a full-stack web application built with the MERN stack (MongoDB, Express.js, React, Node.js) that provides a complete platform for creating and managing a blog. It features user authentication, role-based access control, rich text editing, and interactive elements like comments and likes.

Features

• User Authentication: Secure user registration and login with both email/password and Google OAuth.
• Admin & User Roles: A simple role system where admins have extended privileges, such as managing all users and categories.
• Full CRUD for Blogs: Authenticated users can create, read, update, and delete their own blog posts.
• Rich Text Editor: Integrated with CKEditor 5 for a powerful and intuitive blog creation experience.
• Category Management: Admins can perform CRUD operations on blog categories.
• Blog Interactions:
  • Likes: Users can like and unlike blog posts.
  • Comments: Users can post comments on blogs.
• Image Uploads: Seamless image uploads for user avatars and blog-featured images, powered by Cloudinary.
• Dynamic Content:
  • Filter blogs by category.
  • View related blogs based on the current post's category.
  • Search functionality to find blogs by title.
• Responsive Frontend: A clean and modern UI built with React, Vite, Tailwind CSS, and Shadcn UI components.
• State Management: Centralized state management on the client-side using Redux Toolkit and Redux Persist.
• Protected Routes: Frontend routes are protected based on user authentication status and role.

Tech Stack

The project is a monorepo divided into a client and an api directory.

Backend (api/)

• Framework: Express.js
• Database: MongoDB with Mongoose ODM
• Authentication: JSON Web Tokens (JWT) for session management.
• Password Hashing: bcryptjs
• File Uploads: Multer for handling multipart/form-data.
• Image Storage: Cloudinary
• Environment: Node.js
• Middleware: CORS, cookie-parser

Frontend (client/)

• Framework/Library: React, Vite
• State Management: Redux Toolkit, Redux Persist
• Routing: React Router
• Styling: Tailwind CSS, Shadcn UI
• Rich Text Editor: CKEditor 5
• Authentication (Google): Firebase
• Form Handling: React Hook Form with Zod for validation
• Notifications: React Toastify
• Utility: slugify, moment.js, entities

Project Structure

/
├── api/             # Express.js backend
│   ├── config/      # Configuration for Cloudinary, Multer
│   ├── controllers/ # Logic for handling API requests
│   ├── middleware/  # Custom middleware (authentication, admin checks)
│   ├── models/      # Mongoose schemas
│   ├── routes/      # API route definitions
│   └── index.js     # Main server entry point
│
└── client/          # React frontend
    └── src/
        ├── components/ # Reusable React components (UI, layout)
        ├── helpers/    # Helper functions (API calls, toasts)
        ├── hooks/      # Custom hooks (useFetch)
        ├── pages/      # Route components/views
        ├── redux/      # Redux Toolkit slices
        ├── App.jsx     # Main application component with routing
        └── main.jsx    # React app entry point

Getting Started

Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

• Node.js (v18.x or later)
• npm or yarn
• A MongoDB database instance (local or Atlas)
• A Cloudinary account
• A Firebase project for Google Authentication

Backend Setup (api/)

1. Navigate to the api directory:

   cd api

2. Install the dependencies:

   npm install

3. Create a .env file from the example:

   cp .env.example .env

4. Fill in the required environment variables in the .env file:

   FRONTEND_URL=http://localhost:5173
   PORT=3000
   MONGODB_CONN="<your_mongodb_connection_string>"
   JWT_SECRET="<your_jwt_secret_key>"
   NODE_ENV="development"
   
   CLOUDINARY_APP_NAME="<your_cloudinary_app_name>"
   CLOUDINARY_API_KEY="<your_cloudinary_api_key>"
   CLOUDINARY_API_SECRET="<your_cloudinary_api_secret>"

5. Start the development server:

   npm run dev

   The backend server will be running on http://localhost:3000.

Frontend Setup (client/)

1. Navigate to the client directory:

   cd client

2. Install the dependencies:

   npm install

3. Create a .env file from the example:

   cp .env.example .env

4. Fill in the required environment variables in the .env file:

   VITE_API_BASE_URL="http://localhost:3000/api"
   VITE_FIREBASE_API="<your_firebase_api_key>"

5. Start the development server:

   npm run dev

   The frontend application will be available at http://localhost:5173.

API Endpoints

The backend exposes the following RESTful API endpoints:

• POST /api/auth/register: Register a new user.
• POST /api/auth/login: Log in a user.
• POST /api/auth/google-login: Log in or register a user via Google.
• GET /api/auth/logout: Log out the current user.
• GET /api/blog/blogs: Get all blogs for the home page.
• GET /api/blog/get-all: Get all blogs for the current user (or all blogs if admin).
• POST /api/blog/add: Add a new blog.
• PUT /api/blog/update/:blogid: Update an existing blog.
• DELETE /api/blog/delete/:blogid: Delete a blog.
• GET /api/blog/get-blog/:slug: Get a single blog by its slug.
• GET /api/blog/get-related-blog/:category/:blog: Get related blogs.
• GET /api/blog/get-blog-by-category/:category: Get all blogs for a specific category.
• GET /api/category/all-category: Get all categories.
• POST /api/category/add: (Admin) Add a new category.
• PUT /api/category/update/:categoryid: (Admin) Update a category.
• DELETE /api/category/delete/:categoryid: (Admin) Delete a category.
• POST /api/blog-like/do-like: Toggle like on a blog.
• GET /api/blog-like/get-like/:blogid/:userid?: Get like count and user's like status.
• POST /api/comment/add: Add a comment to a blog.
• GET /api/comment/get/:blogid: Get all comments for a blog.
• DELETE /api/comment/delete/:commentid: Delete a comment.
• GET /api/user/get-all-user: (Admin) Get all users.
• PUT /api/user/update-user/:userid: Update user profile.
• DELETE /api/user/delete/:id: (Admin) Delete a user.