MERN Blog Platform

A full-stack blogging platform built with the MERN stack (MongoDB, Express.js, React.js, Node.js).

Features

• Create and publish blog posts with images
• Form validation for all inputs
• Responsive design using Bootstrap
• Modern UI with custom CSS styling
• Image upload and storage
• View all blog posts in a grid layout
• Real-time updates

Prerequisites

• Node.js (v14 or higher)
• MongoDB (v4.4 or higher)
• npm or yarn package manager

Installation

1. Clone the repository:

git clone <repository-url>
cd mern-blog-platform

2. Install backend dependencies:

npm install

3. Install frontend dependencies:

cd client
npm install
cd ..

4. Create an uploads directory in the root folder:

mkdir uploads

Running the Application

1. Start MongoDB service on your machine

2. Start the backend server (from the root directory):

npm run dev

3. In a new terminal, start the frontend development server:

npm run client

The application will be available at:

• Frontend: http://localhost:3000
• Backend API: http://localhost:5000

Project Structure

mern-blog-platform/
├── client/                 # React frontend
│   ├── public/
│   └── src/
│       ├── components/     # React components
│       ├── App.js         # Main App component
│       └── App.css        # Custom styles
├── models/                 # MongoDB models
├── routes/                 # Express routes
├── uploads/               # Image upload directory
├── server.js              # Express server
└── package.json           # Project dependencies

Technologies Used

• Frontend:

  • React.js
  • React Router
  • Bootstrap
  • Axios
  • Custom CSS

• Backend:

  • Node.js
  • Express.js
  • MongoDB
  • Mongoose
  • Multer (for file uploads)

API Endpoints

• GET /api/posts - Get all blog posts
• POST /api/posts - Create a new blog post
• GET /api/posts/:id - Get a specific blog post

Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a new Pull Request