Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/muhammadaliashraf/mern-stack-blog-website

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.
https://github.com/muhammadaliashraf/mern-stack-blog-website

axios blog blog-mern blog-web blog-web-app blog-webapplication blog-website curd-operation expressjs free jwt-authentication mern-project mern-stack-app mern-stack-development mo nodejs reactjs redux-toolkit webiste-design

Last synced: 8 days ago
JSON representation

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.

Awesome Lists containing this project

README 

        



# **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/](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