praful-87 / blog-app-mern

The objective of this project is to create a blog app where users can Read the blogs , Create blogs, comment on blog they like

Notify me.

Name of this project is Notify me.

The objective of this project is to create a blog app where user can Read the blogs , Create blogs, comment on blog they like

Visit below link too see demo

Demo

Features

• Read blogs without login
• Register on website / Signup
• Login to account
• See account details
• Upload profile picture
• Update profile
• Create blog
• Upload image for blog
• Update blog
• Delete blog
• Give comment on the blog
• Users can't make changes to others' post
• User cannot create post without loging in
• Light/dark mode toggle

Tech Stack

Client

• html 5
• css 3
• javascript
• react
• redux
• react-router-dom
• react-icons
• react-redux
• redux-thunk
• chakra-ui

---

Server

• bcrypt
• cloudinary
• cors
• dotenv
• express
• jsonwebtoken
• mongoose
• multer
• nodemon

Installation

Install my-project by cloning the repository

  cd backend
  npm Install
  cd frontend
  npm Install

Environment Variables

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

Backend-End environment Variables

• DB_URL your mongoDb ATLAS url

• PRIVATE_KEY to hash the password

• Cloudinary Variables

• CLOUD_NAME provided by Cloudinary

• API_KAY provided by Cloudinary

• API_SECRET provided by Cloudinary

API Reference

Get all items

  GET /blog

Parameter	Type	Description
NA	NA	No API_KEY Required

Get item by blog_Id

  GET /blog/${blog_id}

Parameter	Type	Description
blog_id	ObjectId	Required. Id of item to fetch

Create post

  POST /blog

Parameter	Type	Description
user_id	ObjectId	Required. to create post
title	string	Required. to create post
blog	string	Required. Description to create post
image_blog	file	Required. to create post

Update item by blog_Id

  PATCH /blog/update/${blog_id}

Parameter	Type	Description
blog_id	ObjectId	Required. Id of item update
payload	stringified object	Required. object to update

Delete item by blog_Id

  DELETE /blog/delete/${blog_id}

Parameter	Type	Description
blog_id	ObjectId	Required. Id of item to fetch

---

Get all comments on perticular post by blog_Id

  GET /comment/${blog_id}

Parameter	Type	Description
blog_id	ObjectId	Required. Id of item to all comments

post comment

  POST /comment

Parameter	Type	Description
user_id	ObjectId	Required. to create comment
comment	string	Required. to create comment
blog_id	ObjectId	Required. to create comment

---

Run Locally

Clone the project

  git clone https://github.com/Praful-87/blog-app-mern.git

Go to the project directory

  cd backend

  cd frontend

Install dependencies

  npm install

Start the server

  npm run server

Start the developement server ( localhost )

  npm run start

Deployment

To deploy this project

Go to the frontend directory

  cd frontend

  npm run build

  deploy the build folder on netlify

Screenshots

App with Loged In

App with Loged In for mobile view

App without Loged In

App without Loged In for mobile view

Acknowledgements

• Online storage to store uploaded images
• Host user frontend here
• Host user backend here

Authors

• @Praful-87

---