MERN-Blog-Application

Project Overview

This is a full-stack JavaScript blog application built with the MERN (MongoDB, Express.js, React, Node.js) stack. It provides a robust platform for users to create, share, and manage their blogs, with a rich set of features including AI-powered content generation, user interaction, and a comprehensive admin interface.

Key Features

User-Centric Blog Management

• Create and Edit Blogs: Users can post new blogs and modify their existing content.
• Public/Private Blogs: Users have the flexibility to mark their blogs as public or private.
• Like Functionality: Users can toggle likes on blogs and comments.
• Commenting System: Users can add comments to blogs, edit their own comments, and like comments.
• Follow/Unfollow Users: Users can follow other users and manage their following/followers lists.
• Firebase Google Authentication: Seamless user login and registration using Google accounts.
• AI-Generated Blog Content: Leverage Gemini to quickly generate blog content by providing a category and title.

Interactive Dashboard

The user dashboard offers multiple tabs for comprehensive management:

• Overview: Displays key metrics such as total likes received, total comments received, total blogs posted, and counts of public and private blogs.
• Following: Shows a list of users the current user is following, with the option to unfollow.
• Followers: Displays a list of users who are following the current user, with the option to remove followers.
• Profile: Allows users to update their password and change their avatar.
• Blogs: Provides a filterable and searchable view of the user's public, private, and all blogs. Blogs can be sorted in ascending, descending, or by popularity (based on likes).

Pagination is implemented in the Following, Followers, and Blogs tabs for efficient data display.

Engaging Frontend Experience

• Home Page: Features two main sections: "Recent Blogs" and "Popular Blogs" to highlight trending and new content.
• All Blogs Page: Accessible via the "Recent Blogs" button, this page displays all blogs with infinite scroll functionality. It includes a tab bar for filtering by blog category and a search bar for specific blog searches.
• Search Bar: A global search bar is available for users to find any specific blog.

Robust Admin Interface

• Admin Blog Posting: Administrators can also post blogs.
• All Public Blogs: The admin dashboard includes an "All Blogs" tab to view all public user blogs with pagination.
• User Management: The "Users" tab allows administrators to view all application users with pagination.
• Admin Overview: Provides application-wide statistics, including the total number of users and blogs.

Technologies Used

• Frontend: Vite React
• Backend: Express.js
• Database: MongoDB
• AI Content Generation: Gemini

Backend Architecture & Security

• Rate Limiting: Implemented to prevent abuse and ensure fair usage.
• Helmet Package: Used for setting various HTTP headers to enhance application security.
• JWT Authentication: Secure user authentication and authorization.
• Custom Error Handling: Centralized and efficient error management.
• API Response Classes: Standardized and consistent API responses.
• Swagger UI: Comprehensive API documentation for easy understanding and testing of endpoints.
• Async Handler Utility: Wraps controllers to eliminate the need for repetitive try...catch blocks, promoting cleaner and more maintainable code.
• Production Standard Coding Practices: Adherence to best practices for scalable and robust development.

Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

Ensure you have the following installed:

• Node.js (LTS version recommended)
• npm or yarn
• MongoDB (local installation or cloud-based service like MongoDB Atlas)

Backend Setup

1. Clone the repository:

   git clone <https://github.com/MuhaibShamsher/Javascript-Fullstack-Blog-App>
   cd Javascript-Fullstack-Blog-App/server

2. Install dependencies:

   npm install
   # or
   yarn install

3. Create a .env file in the server directory and add your environment variables. A sample.env is provided as a guide.

4. Run the backend server:

   npm run dev
   # or
   yarn dev

   The backend server will typically run on http://localhost:5000.

Frontend Setup

1. Navigate to the frontend directory:

   cd Javascript-Fullstack-Blog-App/client

2. Install dependencies:

   npm install
   # or
   yarn install

3. Create a .env file in the client directory and add your environment variables. A sample.env is provided as a guide.

4. Run the frontend development server:

   npm run dev
   # or
   yarn dev

   The frontend application will typically open in your browser at http://localhost:5173.