MERN Social Media

MERN Media has the login, logout and signup features using JWT(JSON Web Token) authentication and BcryptJS has been used for encrpyting and decrypting purpose. The users can view others and their own profile and can make a post with their title and contents also they can like, dislike, comment on posts and follow, unfollow the other people as well as They can view the posts from their follwing. NodeJS has been used as a backend, ExpressJS for API Calls, MongoDB for storing the documents and collections, Cloudinary for storing the images.

· Documentation · Report Bug · Request Feature

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

• Contact

• Application Home page & Demo

• Other User Page

• User Profile Page

• Followings' Post Page

Visit the backend HERE.

• JWT Authentication
• Protected Routes
• Custom User Profile
• Create and Delete Post Functionality
• Like, Dislike and Comment Feature
• Follow and Unfollow users
• View others and own user profile
• See the following user posts

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

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

JWT_SECRET

MONGODB_URI

CLOUDINARY_URL

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

Install the project with npm Create a backend folder

npm init

then run:

npm install --save

Install other dependencies from Backend/package.json.

Install the project with npm Create a frontend folder

npx create-react-app my-project

Install other dependencies from Frontend/package.json.

1. Head over to the materialize css website, copy the CDN command and paste it in index.js.

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

3. Visit Cloudinary and from setting copy the apit link and use it.

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

Create a folder Clone the backend project

https://github.com/Priyanshu88/Mern-Media-Backend/

then clone the frontend project

https://github.com/Priyanshu88/Mern-Media-Frontend/

Go to

https://github.com/Priyanshu88/Mern-Media-Backend/

run npm install and type npm start then go to

https://github.com/Priyanshu88/Mern-Media-Frontend/

run npm install and type npm run start

This project uses react-lazy-load-image-components to optimize and load images.

Contributions are always welcome!

Priyanshu Pandey - @twitter_handle - [email protected]

Project Link:

1. https://github.com/Priyanshu88/Mern-Media-Backend/
2. https://github.com/Priyanshu88/Mern-Media-Frontend/