Blog Website

Welcome to the Blog Website! This full-stack web application is powered by the MERN stack—MongoDB, Express, React, and Node.js—to deliver a seamless and dynamic blogging experience where users can create, read, update, and delete blog posts.

Overview

This project leverages the MERN stack to create a responsive and interactive platform with JavaScript running on both the front end and back end. With robust authentication, file upload capabilities, a rich text editor, and toast notifications, this website offers everything needed to manage blog posts efficiently.

What is the MERN Stack?

• MongoDB: A flexible, NoSQL database that stores data in JSON-like documents, ideal for handling large amounts of data.
• Express: A server-side framework for Node.js that simplifies building robust web applications.
• React: A powerful JavaScript library for building fast, responsive user interfaces.
• Node.js: A runtime environment that allows JavaScript to be executed server-side.

Features

• User Authentication
  • JWT (JSON Web Token): Provides secure access to protected routes after login.
  • bcrypt: Enhances password security by hashing user passwords.
• File Uploads
  • Multer: Allows users to upload images to personalize their blog posts.
• Rich Text Editor
  • Quill: A user-friendly editor with rich text formatting options to create engaging blog content.
• Notifications
  • Toast Notifications: Provides real-time feedback to users for actions like post creation, updates, and errors.

Getting Started

To get this project running locally, follow these steps:

1. Clone the Repository

git clone https://github.com/yourusername/your-blog-repo.git
cd your-blog-repo

2. Install Dependencies

Backend Dependencies

cd backend
npm install

Frontend Dependencies

cd frontend
npm install

3. Set Up Environment Variables

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

DB_CONNECTION=<Your MongoDB connection string>
JWT_SECRET=<Your JWT secret key>

4. Run the Application

To start the backend server:

cd backend
npm start

To start the frontend client:

cd frontend
npm start

5. Access the Application

• Open your browser and navigate to http://localhost:3000 to view the blog website.

Project Structure

├── backend         # Node.js server with Express and MongoDB
├── frontend        # React application for the client-side
├── README.md       # Project documentation
└── .env.example    # Sample environment variable file

Contributing

• Contributions are welcome! Feel free to submit a pull request or open an issue to suggest improvements or report bugs.

Feedback

• Thank you for exploring this project! If you have any feedback or ideas for improvement, feel free to reach out. Let’s build a vibrant blogging platform together!