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

📔 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 & Demo

• Other User Page

• User Profile Page

• Following Post Page

📹 Demo

Visit the frontend HERE.

👾 Tech Stack

Client

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

Server

• Node.js
• Express.js

Database

• MongoDB
• Cloudinary

🎯 Features

• 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 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

CLOUDINARY_URL

🧰 Getting Started

‼️ Prerequisites

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

⚙️ Installation

Backend:

Install the project with npm Create a backend folder

npm init

then run:

npm install --save

install other dependencies from Backend/package.json.

Frontend:

Install the project with npm Create a frontend folder

npx create-react-app my-project

Install other dependencies from Frontend/package.json.

🧪 Use Materialize CSS, React-Router-DOM, Cloudinary, MongoDB

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.

🏃 Run Locally

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

Learn More

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

👋 Contributing

Contributions are always welcome!

🤝 Contact

Priyanshu Pandey - @twitter_handle - 2040020@sliet.ac.in

Project Link:

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