MERN Blog App

This repository contains a full-stack blog application built with the MERN stack (MongoDB, Express, React, Node.js). It includes post creation, viewing, comments, favourites, and saved posts. User authentication is implemented manually using MongoDB for user storage.

---

Key features

• User authentication (manual, with MongoDB + JWT)

  • Sign up, log in, log out
  • Password hashing with bcrypt

• Create, edit, and delete blog posts

• View single post details

• Add and view comments on posts

• Mark posts as favourites / remove from favourites

• Save posts for later reading

• Contact form / contact page

• Responsive layout (mobile-friendly)

---

Tech stack

Frontend:

• React (Vite or Create React App)
• React Router for navigation
• Context API or Redux for global state
• Tailwind CSS or CSS modules for styling

Backend:

• Node.js
• Express.js
• MongoDB + Mongoose ODM
• JSON Web Tokens (JWT) for authentication
• bcrypt for password hashing

---

How to run locally

1. Clone the repo

git clone https://github.com/aitezazdev/MERN-Blog-App.git

2. Install dependencies for both backend and frontend

cd MERN-Blog-App
cd ./backend && npm install
cd ./frontend && npm install

3. Set up environment variables

In the backend/ folder, create a .env file:

PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_secret_key

4. Start the development servers

Backend:

cd backend
npm run dev

Frontend:

cd frontend
npm run dev

Open http://localhost:5173 for the frontend (or port from your setup) and http://localhost:3000 for the backend API.

---

Screenshots

Login Page

Home Page

Home Page Blogs

Blogs Details

Blogs Details Comments

Bookmark Page

Profile Details

About Page

---