Facebook Clone

This is a full-stack Facebook clone built with React and Spring Boot microservices

Youtube - https://www.youtube.com/watch?v=SppYteB37PU&t=2s&ab_channel=ritikchauhan

Features 😎

• Offline-first PWA responsive web app built with React.
• User Registration: Users can create an account with a unique username and password.
• Profiles: Users can create profiles with avatar photos, cover photos, and personal information.
• Post Updates: Users can post updates - text and photos, on their profiles and view updates from others.
• News Feed: Users can see updates from their friends on their news feed.
• Friend Request: Users can send (withdraw) friend requests to connect with others and accept or decline friend requests from others.
• Notifications: Users can receive Real-time notifications (through WebSockets) for friend requests, messages, and updates from others.
• Search: Users can search for other users and post across Facebook.

Technologies Used ⚒️

FrontEnd

• Front end is built with React (v18.2.0).
• Styles are written in SCSS.
• Responsive layouts for Desktop, Tab, and Mobile views.
• Offline first PWA app
• Across the app Light and Dark themes

APIs

• REST APIs communicate with micro-services through Gateway
• Real-time notifications are sent through Web-Sockets (STOMP protocol)

Security

• JWT authentication is required to communicate with the backend.
• REST API calls must have a valid JWT token attached to the Authentication header (except login and register).
• Web-Socket connections must be established with a valid JWT token attached to the Authentication request param.
• All micro-services can be accessed only through the Gateway.

BackEnd

• Back end is built with Spring Boot (v3.1.1) and JDK (v17).
• Apache Maven for dependency management.

Gateway/ Consul

• Consul is used for service registry and discovery by the Gateway.
• Load-balancing and inter-micro-service communication is also taken care of by the consul.
• It also provides a Key/Value store for micro-services.

Database

• MongoDB is used in all micro-services and connected through MongoTemplate (Spring Data MongoDB v4.1.1).
• GridFS (MongoDB file system) is used for storing avatar pic, post images, etc.
• ElasticSearch is used alongside MongoDB for providing blazing-fast user and post searches.

Catching

• Guava Caching is used for faster users and post fetch.
• It is also used for user feed creation.

Message Brocker

• Apache Kafka is used for event-driven communication between micro-services.
• Different micro-services publish messages to three topics: userTopic, postTopic, and friendTopic.
• All messages are consumed by the Facebook-NotificationMS micro-service.

Architecture 🏗️

The architecture of the application has been mainly divided into 5 micro-services:

Facebook_Gateway

The Facebook_Gateway is responsible for connecting the rest of the world with the backend application. It also secures public-facing APIs with JWT token verification (except login and register). Any request coming to Facebook_Gateway must have an Authentication header (for REST APIs) or Authentication request param (for WebSocket connection). Here the Authentication token is checked for correctness and expiration. If the token is valid then the userId is extracted and put in the header of the incoming request and the request is forwarded to the corresponding micro-service.

Facebook_UserMS

The Facebook_UserMS comprises of:

• One Spring Boot application (lb://Facebook-UserMS).
• Three MongoDB collections
  • user - for saving all user-related information.
  • fs.files, fs.chunks - for implementing GridFS store to save user avatar/ cover.
• One Guava Catch store.

The Facebook_UserMS is responsible for all user-related endpoints and data:

• User registration and sign-in with JWT token creation.
• Edit User profiles, uploading and retrieving avatar pics.
• Get user info by userId, get currently logged-in user info.
• Get the list of friends of a user.
• Save user data to ElasticSearch and retrieve from there as well.
• Publish messages to userTopic of Kafka.

Facebook_PostMS

The Facebook_PostMS comprises of:

• One Spring Boot application (lb://Facebook-PostMS).
• Three MongoDB collections
  • post - for saving all post data.
  • fs.files, fs.chunks - for implementing GridFS store to save post pictures.
• One Guava Catch store.

The Facebook_PostMS is responsible for all post-related endpoints and data:

• Creation of posts, get posts of an individual (with pagination).
• Uploading and retrieving of post images.
• Creation and maintenance of feeds of a user using Guava catching.
• Save post-related data to ElasticSearch and retrieve from there as well.
• Publish messages (Post Creation) to postTopic of Kafka.

Facebook_FriendMS

The Facebook_FriendMS comprises of:

• One Spring Boot application (lb://Facebook-FriendMS).
• One MongoDB collection
  • friendRequest - for saving all friend request information (From, To, Status, CreatedAt).

The Facebook_FriendMS is responsible for all friend request-related endpoints and data:

Facebook_NotificationMS

Screen Shorts 📸

Registeration Page	SignIn Page

Desktop UI	Desktop UI Dark

Notifications	Seach

Mobile UI	Mobile UI Dark

Edit Profile Page	Tab UI