MERN Stack Blog Application

Fully responsive MERN stack blog application, packed with exciting features and modern design.

🚀 Overview

MERN Stack Blog App – Developed a fully responsive blog platform with secure authentication, role-based admin dashboard, and full CRUD operations for posts, comments, and users. Integrated advanced search with filters and sorting, interactive commenting features, and dark mode for enhanced user experience, and deployed the application for public access and portfolio showcasing.

✨ Key Features

• Responsive Design:: Delivers a seamless experience across desktop, tablet, and mobile devices.
• Secure Authentication: Provides login and signup with robust user authentication and role-based access.
• Admin Dashboard: Manage posts, comments, and users with full CRUD functionality.
• Advanced Search: Search posts by title, apply filters, sorting, and pagination for quick discovery.
• Interactive Comments: Users can add, edit, and delete comments, fostering community engagement.
• Dark Mode: Offers a sleek, user-friendly interface with light and dark theme options.
• Dynamic Routing: Smooth navigation across different pages with fast loading and transitions.
• Free Deployment: Fully hosted and accessible online for public use and portfolio showcasing.

🛠️ Tech Stack

Frontend

• React 18: Component-based UI development
• TailwindCSS: Utility-first CSS framework for styling
• React Router: Client-side routing
• Redux: State management
• JWT Authentication: Secure user authentication

Backend

• Node.js: JavaScript runtime
• Express: Web application framework
• MongoDB: NoSQL database for data storage
• Mongoose: MongoDB object modeling
• JWT: JSON Web Tokens for authentication

Tools

• Vite: Next-generation frontend tooling
• ESLint: Code quality and style checking
• Render: Frontend deployment and hosting
• Git & GitHub: Version control and collaboration

📸 Screenshots

🌐 Live Demo

Experience MERN Stack Blog App in action: https://mern-blog55.onrender.com/

Demo Accounts

• Admin User:
  • Email: [email protected]
  • Password: Pooja@555
• Regular User:
  • Email: [email protected]
  • Password: Sunil@123

📥 Installation

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• MongoDB (local or cloud instance)

Frontend Setup

1. Clone the repository

   git clone https://github.com/Pooja675/MERN-Blog.git

2. Navigate to the client directory

   cd MERN-BLOG/client

3. Install dependencies

   npm install
   # or
   yarn install

4. Create a .env file in the client directory with the following variables:

   VITE_FIREBASE_API_KEY=your_firebase_api_key
   

5. Start the development server

   npm run dev
   # or
   yarn dev

6. Open your browser and navigate to http://localhost:5173

Backend Setup

1. Clone the backend repository

   git clone https://github.com/Pooja675/MERN-Blog.git

2. Navigate to the server directory

   cd MERN-BLOG/api

3. Install dependencies

   npm install
   # or
   yarn install

4. Create a .env file with the following variables:

   MONGO=your_mongodb_connection_string/or ask the repo owner for the URI
   JWT_SECRET=your_jwt_secret
   

5. Start the server

   npm start
   # or
   yarn start

Note:

You might need to run both the client and server simultaneously for fetching data in your local machine.

📁 Project Structure

client/
├── public/             # Static files
├── src/
│   ├── components/     # Reusable UI components
│   ├── pages/          # Main application pages
│   ├── redux/          # State management
│   ├── firebase.js     # Firebase Configuration
│   ├── App.jsx         # Main application component
│   └── main.jsx        # Application entry point
├── index.html          # HTML template
└── vite.config.js      # Vite configuration

api/
├── controllers/        # Request handlers
├── models/             # Database models
├── routes/             # API routes
├── utils/              # Utility functions
└── index.js            # Server entry point

🎯 Result and Conclusion

A fully functional and responsive blog platform with secure authentication, admin management, advanced search, interactive commenting, and dark mode. The project showcases end-to-end full-stack development skills, combining frontend, backend, and deployment expertise to deliver a modern, user-friendly web application.