Blog Application

A full-stack web application for creating, reading, editing, and managing blog posts. Built with React on the frontend and Node.js/Express on the backend, with MongoDB as the database.

Tech Stack

Frontend

• React 19 - UI library
• Vite - Build tool and dev server
• React Router - Client-side routing
• Tailwind CSS - Utility-first CSS framework
• Axios - HTTP client for API requests
• ESLint - Code quality and linting

Backend

• Node.js - JavaScript runtime
• Express.js - Web application framework
• MongoDB - NoSQL database
• Mongoose - MongoDB object modeling
• JWT - JSON Web Tokens for authentication
• bcrypt - Password hashing
• CORS - Cross-Origin Resource Sharing
• Rate Limiting - Request rate limiting for API protection
• Slugify - URL-friendly slug generation

Project Structure

Blog-Application/
├── client/                      # React frontend
│   ├── public/                  # Static files
│   ├── src/
│   │   ├── component/
│   │   │   └── Navbar.jsx       # Navigation component
│   │   ├── views/
│   │   │   ├── AllBlogs.jsx     # Display all blogs
│   │   │   ├── ArchivedBlog.jsx # Display archived blogs
│   │   │   ├── EditBlog.jsx     # Edit existing blog
│   │   │   ├── Login.jsx        # User login
│   │   │   ├── NewBlog.jsx      # Create new blog
│   │   │   ├── ReadBlog.jsx     # Read individual blog
│   │   │   └── Signup.jsx       # User registration
│   │   ├── index.css            # Global styles
│   │   ├── main.jsx             # Entry point
│   │   └── util.js              # Utility functions
│   ├── index.html               # HTML template
│   ├── package.json             # Frontend dependencies
│   ├── vite.config.js           # Vite configuration
│   └── eslint.config.js         # ESLint configuration
├── server/                      # Node.js backend
│   ├── controller/
│   │   ├── Blog.js              # Blog route handlers
│   │   └── User.js              # User authentication handlers
│   ├── module/
│   │   ├── Blog.js              # Blog data model
│   │   └── User.js              # User data model
│   ├── index.js                 # Server entry point
│   └── package.json             # Backend dependencies
└── README.md                    # This file

Features

User Authentication

• User registration and signup
• Secure login with JWT authentication
• Password hashing with bcrypt

Blog Management

• Create new blog posts
• Read and view blog posts
• Edit existing blog posts
• Delete blog posts
• Archive blog posts
• View all published blogs
• View archived blogs

Security & Performance

• JWT-based authentication
• Password encryption with bcrypt
• CORS protection
• Rate limiting on API endpoints
• Slug-based URLs for blogs

Prerequisites

Before running the application, make sure you have the following installed:

• Node.js (v16 or higher) - Download
• npm or yarn - Comes with Node.js
• MongoDB - Either locally installed or a MongoDB Atlas account for cloud database

Installation

1. Clone or Extract the Project

cd Blog-Application

2. Install Frontend Dependencies

cd client
npm install

3. Install Backend Dependencies

cd ../server
npm install

4. Configure Environment Variables

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

MONGODB_URL=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
PORT=5000

Running the Application

Option 1: Run Both Frontend and Backend Separately

Terminal 1 - Backend:

cd server
npm run dev    # Development mode with nodemon
# or
npm start      # Production mode

The backend will run on http://localhost:5000

Terminal 2 - Frontend:

cd client
npm run dev

The frontend will run on http://localhost:5173

Option 2: Run Frontend Build and Backend Together

Build frontend:

cd client
npm run build

Run backend:

cd server
npm start

Then open http://localhost:5000 in your browser.

API Endpoints

User Authentication

Method	Endpoint	Description
POST	/signup	Register a new user
POST	/login	Login user and get JWT token

Blog Operations

Method	Endpoint	Description
POST	/blog	Create a new blog post
GET	/blogs	Get all published blogs
GET	/blog/:id	Get a specific blog post
PUT	/blog/:id	Update a blog post
PATCH	/blog/:id/publish	Publish a blog post
PATCH	/blog/:id/archive	Archive a blog post
DELETE	/blog/:id	Delete a blog post
GET	/archived-blogs	Get all archived blogs

Notes

• Ensure MongoDB is running before starting the backend server
• The frontend will make API calls to the backend during development
• Use Postman or similar tools to test API endpoints directly
• Rate limiting is enabled to prevent abuse
• All passwords are hashed using bcrypt before storage