Skip to content

Mern Facebook Clone with real time Messages (MongoDB, Express.js, React.js, Node.js, and Socket.io)

Notifications You must be signed in to change notification settings

msobkyy/backbook

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

50 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Backbook

This project is a clone of the popular social media platform, Facebook, built using the MERN stack (MongoDB, Express.js, React.js, Node.js, and Socket.io) With real time Messages and notifications 🔥.

Demo

https://backbook.vercel.app

Backend Repository

https://github.com/msobkyy/backbook-server

Api Documentation

Documentation

Features

  • ReactJS, NodeJS, ExpressJS, MongoDB.
  • Redux toolkit store to setup a global store.
  • Fully responsive design with all devices.
  • Strong authentication system, Register, login, reset password.
  • Cookies and JSON web tokens (JWT).
  • Real time notifications
  • Notification history
  • Browser notifications
  • Real time Messages between users
  • Online status
  • Typing indicator
  • Customize chat themes and name
  • Group chats
  • Add and Remove group members by admin only
  • Email verification by sending mail to users using gmail smtp.
  • Search by email and send code to email to change the password.
  • Form validations using Formik, Yup, error massages.
  • Browser notification using firebase cloud messaging.
  • infinite posts scroll.
  • Create posts : normal text, background, photos.
  • React system on posts : (like, love, wow, sad, angry).
  • Post Comments with text and upload photos and comment likes.
  • Comments replies.
  • Share posts with caption or without.
  • Delete posts.
  • Friendship system with send, cancel ,accept friend requests.
  • Following system with follow, unfollow another users.
  • Friends page to see the sent and recived friend requests.
  • Search functionality to another users.
  • Search history by date.
  • Upload profile picture, cover and ability to Crop, zoom the photo.
  • Photo Gallery with old photos to change pfp and cover.
  • Profile details and bio.
  • Light/dark mode toggle.
  • Skeleton loaders while page loads.

Screenshots

1 image image 10 2 3 4 5 6 image image 7 8 9

Installation

  • Clone the repository
git clone https://github.com/msobkyy/backbook.git
  • Install the dependencies
npm install
  • Start the server
npm start

Deployment

To deploy this project run

  npm run build

Environment Variables

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

REACT_APP_BACKEND_URL=

🔗 Links

linkedin twitter

Authors

🚀 About Me

I'm a MERN Stack Developer

Tech Stack

Client: React, Redux

Server: Node, Express, mongoose