Blog Website using MERN Stack

Overview

This project is a blog website developed using the MERN (MongoDB, Express.js, React.js, Node.js) stack. It allows users to read, create, update, and delete blog posts. The website features a user-friendly interface and integrates various technologies to provide a seamless blogging experience.

LINK_URL=https://full-stack-blog-app-murex.vercel.app/

Features

• User Authentication: Implement user authentication to allow users to register, login, and logout securely.
• Change Password: Provide an option for users to Change their Password if needed.
• Create Blog Posts: Users can create new blog posts, including titles, content, and optional images.
• Read Blog Posts: Display a list of blog posts on the homepage, allowing users to read the full post by clicking on them.
• Update Blog Posts: Allow users to edit their own blog posts, including modifying the title, content, and images.
• Delete Blog Posts: Provide an option for users to delete their blog posts if needed.
• Responsive Design: Ensure the website is responsive and works well on various devices, including desktops, tablets, and smartphones.
• Search Functionality: Coming Soon....

Technologies Used

Frontend:

• React.js: Used for building the user interface and managing state.
• Redux: State management library for managing application state.
• React Router: Used for client-side routing.
• Axios: HTTP client for making requests to the backend server.

Backend:

• Node.js: JavaScript runtime environment for server-side code.
• Express.js: Web application framework for building RESTful APIs.
• MongoDB: NoSQL database for storing blog posts and user data.
• Mongoose: ODM (Object Data Modeling) library for MongoDB and Node.js.

Image Uploading:

• Cloudinary: Cloud-based image and video management service for uploading, storing, and managing images. Used for image uploading functionality

Authentication:

• JSON Web Tokens (JWT): Used for secure authentication and authorization.
• bcrypt.js: Library for hashing passwords before storing them in the database.

Deployment:

• Vercel: Platform used for deploying and hosting the frontend application. Installation

How To Use This

Clone the repository: git clone repository-url

• Front End Side
• Navigate to the client directory: cd client
• Install dependencies: npm install
• Run Commad For Front End: npm start
• http://localhost:3000/
• Server End Side
• Navigate to the client directory: cd Server
• Install dependencies: npm install
• Run Commad For Front End: npm run dev
• http://localhost:9001

Create a .env file in the root directory and add necessary environment variables.

1. DB_URL=YOUR_MONGODB_URL
2. PORT=YOUR_PORT
3. JWT_SECRET=YOUR_JWT_SECRET
4. JWT_EXPIRE=TOKEN_LIFE_TIME_FOR_EXPIRE

DEMO VIDEO

Coming Soon....

Contributing Contributions are welcome! If you find any issues or have suggestions for improvements, feel free to open an issue or submit a pull request.

#Source Code is available on the given link below: https://www.patreon.com/posts/blog-website-109222005?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link

Best regards, Muhammad Ali