MERN Blog

MERN Blog is full stack MERN (MongoDB) stack blog website where user can create their account, login and write their post on website with their comprehensive content and edit any time when required. It uses JWT for authetication, MongoDB for user data storage, React-Router-DOM for creating routes.

· Documentation · Report Bug · Request Feature

📔 Table of Contents

• About the Project
  • Screenshots
  • Tech Stack
  • Environment Variables
• Getting Started
  • Prerequisites
  • Installation
  • Run Locally

• Contact

🌟 About the Project

📷 Screenshots

• Application Home page

• Content Page

• Edit Page

📹 Demo

👾 Tech Stack

Client

• React.js
• CSS
• React-Router-DOM

Server

• Node.js
• Express.js

Database

• MongoDB

🎯 Features

• JWT Authentication
• Creat Post Functionality
• Edit Post Feature

🎨 Color Reference

Color	Hex
Primary Color	#040810
Secondary Color	#393E46
Accent Color	#00ADB5
Text Color	#EEEEEE

🔑 Environment Variables

To run this project, you will need to add the following environment variables to your .env file

JWT_SECRET

MONGODB_URI

🧰 Getting Started

‼️ Prerequisites

• Install Node JS in your computer Here
• Create MongoDB account Here
• Learn about JWT Here

⚙️ Installation

Backend:

Install the project with npm Create a api folder

npm init

then run:

npm install  --save

Install other dependencies from api/package.json.

Frontend:

Install the project with npm Create a client folder

npx create-react-app my-project

Install other dependencies from client/package.json.

🧪 React-Router-DOM, MongoDB

1. Install React-Router-DOM using npm install react-router-dom.

2. Create account on Atlas website, create a project and from the connect option copy the Nodejs URI and use it.

🏃 Run Locally

Create a folder Clone the api project

https://github.com/Priyanshu88/MERN-Blog/api

then clone the client project

https://github.com/Priyanshu88/MERN-Blog/client/

Go to

https://github.com/Priyanshu88/MERN-Blog/api/

run npm install and type node index.js then go to

https://github.com/Priyanshu88/MERN-Blog/client

run npm install and type npm run start

Learn More

This project uses react-quill to edit the post.

👋 Contributing

Contributions are always welcome!

🤝 Contact

Priyanshu Pandey - @twitter_handle - [email protected]

Project Link:

1. https://github.com/Priyanshu88/MERN-Blog/
2. https://github.com/Priyanshu88/MERN-Blog/