![logo](https://private-user-images.githubusercontent.com/86107841/250009666-b0570640-aff4-42d8-b2b6-0d24d1bbd3e0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE5MzUyMjcsIm5iZiI6MTcyMTkzNDkyNywicGF0aCI6Ii84NjEwNzg0MS8yNTAwMDk2NjYtYjA1NzA2NDAtYWZmNC00MmQ4LWIyYjYtMGQyNGQxYmJkM2UwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzI1VDE5MTUyN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWJjN2FjZmFhMzlkMTM2NzNkMTczNDQ0NzBkMzFiZTM3ODA0NjYwMzc1NjFjZDk2NzIyYzA1OGRlYzI4ZDJkZjcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.07WsmReObxODF0iUSNxcuCMAVBnS_etJLSitziMpTbA)
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.
- Application Home page & Demo
- Other User Page
- User Profile Page
- Followings' Post Page
Visit the backend HERE.
Server
Database
- 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 | |
Secondary Color | |
Accent Color | |
Text Color |
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.
-
Head over to the materialize css website, copy the CDN command and paste it in
index.js
. -
Install React-Router-DOM using
npm install react-router-dom
. -
Visit Cloudinary and from setting copy the apit link and use it.
-
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: