📝 Blog Platform

Full Stack Web Application

A modern full-stack Blog Publishing Platform where users can create, read, update, and delete (CRUD) blog posts with secure authentication, bookmarking, comments, and profile management. Built with cutting-edge technologies and best practices.

---

⚙ Tech Stack

🎨 Frontend

• React 19 + Vite - Modern React with lightning-fast build tooling
• Redux Toolkit - Predictable state management
• React Router DOM v7 - Declarative routing for React
• Tailwind CSS - Utility-first CSS framework for rapid UI development
• CKEditor - Rich text editor for content creation
• Axios - Promise-based HTTP client

🛠 Backend

• Node.js + Express - Fast, unopinionated web framework
• MongoDB + Mongoose - NoSQL database with elegant object modeling
• JWT Authentication - Secure token-based authentication
• BcryptJS - Password hashing for security
• Nodemailer - Email functionality for password reset

---

🚀 Features

🔐 Authentication & Security

• ✅ User Registration - Create new accounts with validation
• ✅ Secure Login - JWT-based authentication system
• ✅ Profile Management - Personal details with picture and bio
• ✅ Password Recovery - Forgot password & reset using OTP

📰 Blog Management

• ✅ Create Blogs - Rich text editor with CKEditor, tags, and image uploads
• ✅ Edit & Delete - Full CRUD operations (own posts only)
• ✅ Blog Feed - Paginated view with search functionality
• ✅ Detailed View - Individual blog post pages

⭐ User Experience

• ✅ Bookmarking - Save and organize favorite posts
• ✅ Personal Library - View all bookmarked blogs
• ✅ Author Dashboard - Manage all your published posts
• ✅ Comments System - Engage with posts through comments

---

📂 Project Structure

📦 blog-platform ├── 📂 backend │ ├── 📂 controllers # Route handlers and business logic │ ├── 📂 models # Database schemas and models │ ├── 📂 routes # API endpoint definitions │ ├── 📂 middlewares # Authentication and validation │ ├── 📂 utils # Helper functions and utilities │ ├── 📜 .env # Environment variables │ ├── 📜 db.js # Database connection setup │ ├── 📜 index.js # Server entry point │ └── 📜 package.json # Backend dependencies ├── 📂 frontend │ ├── 📂 src │ │ ├── 📂 components # Reusable UI components │ │ ├── 📂 pages # Page-level components │ │ ├── 📂 redux # State management │ │ ├── 📜 api.jsx # API configuration │ │ └── 📜 App.jsx # Main application component │ ├── 📜 package.json # Frontend dependencies │ └── 📜 vite.config.js # Vite configuration └── 📜 README.md # Project documentation

---

🛠 Setup Instructions

1️⃣ Backend Setup

bash

Navigate to backend directory

cd backend

Install dependencies

npm install

Start development server

npm run dev

Environment Configuration:

Create a .env file in the backend/ directory with the following variables:

env MONGO_URI=mongodb+srv://banoshahin89_db_user:uylcHyMk7PzCzpQe@cluster0.by5mtjj.mongodb.net/ PORT=8080 JWT_SECRET=shahinnn EMAIL_USER=banoshahin981@gmail.com EMAIL_PASS=bhpb ggnt lpmm brdc

2️⃣ Frontend Setup

bash

Navigate to frontend directory

cd frontend

Install dependencies

npm install

Start development server

npm run dev

Access the application:

• 🌐 Frontend: http://localhost:5173
• 🔧 Backend API: http://localhost:8080

---

🔑 API Endpoints

🔐 Authentication Routes (/api/auth)

Method	Endpoint	Description
POST	/register	Register new user account
POST	/login	Login user & get JWT token
GET	/getAllUser	Get all users (protected)
GET	/me	Get logged-in user profile
POST	/forgot-password	Request OTP for password reset
POST	/verify-otp	Verify OTP code
POST	/reset-password	Reset password with verified OTP

📝 Blog Routes (/api/blog)

Method	Endpoint	Description
POST	/createPost	Create new blog post
GET	/allPost	Get all blog posts (paginated)
GET	/post/:id	Get specific blog by ID
PUT	/updatePost/:id	Update blog (author only)
DELETE	/deletePost/:id	Delete blog (author only)
POST	/bookmarkPost/:id	Bookmark/Unbookmark post
GET	/bookmarks	Get all bookmarked blogs
GET	/my-posts	Get all posts by current user
POST	/post/:id/comment	Add comment to blog post
DELETE	/post/:id/comment/:commentId	Delete comment (author only)

---

🤖 AI Tools Usage

During development, ChatGPT (GPT-5) was leveraged for:

• 🔧 Code Generation - Boilerplate code for Express routes & Redux slices
• 🐛 Debugging - React state management for bookmarks & comments
• 🎨 Integration - CKEditor integration with React + Tailwind
• 🛠 Utilities - Writing reusable utilities & error handling
• 💅 Styling - UI component styling (cards, buttons, modals)

---

📸 Demo

🖼 Screenshots

Screenshots and video demo → https://www.loom.com/share/818f4f019888452ba99e8193bf7b15c7?sid=15c10b5d-9d95-45bf-beca-d388de3f42bf

🌐 Live Demo

Live deployment frontend → (https://blog-platform-frontend-6.onrender.com/home) Live deploymentbackend → (https://blog-platform-backend-1-dqa6.onrender.com/)

🌐 Postman Documentation

Live deployment frontend → (https://documenter.getpostman.com/view/28935640/2sB3HrnJ6N)

---

🏆 Evaluation Criteria Mapping

Criteria	Implementation
API Design & Architecture	RESTful routes, modular controllers
AI Usage	Documented above, integrated in workflow
Feature Completeness	CRUD, auth, bookmarks, comments, profile
Code Readability	Clean modular structure
Bonus Features	CKEditor, password reset, pagination, bookmarks

---

👨‍💻 Author

Shahin Bano Software Engineering Intern Candidate – Mitt Arv

---

⭐ Star this repository if you found it helpful!