Facebook Clone

Introduction

The Facebook Clone project is a recreation of the popular social media platform, Facebook. It aims to replicate the core functionalities of Facebook, including user authentication, posting updates, liking and commenting on posts, adding friends, and more. This project provides a practical demonstration of building a full-stack web application using React, TypeScript, Firebase for authentication and data storage, Chakra UI for styling, and JavaScript for backend functionalities.

Project Type

Fullstack

Deployed App

• Frontend: https://facebook-clone-frontend.firebaseapp.com/
• Backend:Firebase used for backend services
• Database: Firebase Realtime Database

Video Walkthrough of the codebase

https://drive.google.com/file/d/10m9FuOXFxnzcP-IixjFR0B8Mn5E0tqU7/view?usp=sharing

Features

User authentication using Firebase Auth

Sign Up Page

• The application offers a sign-up page where users can create new accounts quickly and securely. Users can register by providing basic information such as email, username, and password , Date of Birth , gender. The sign-up process is intuitive and user-friendly, encouraging seamless onboarding for new users.

Login Page

• The application provides a login page for existing users to securely access their accounts. Users can log in using their registered email address and password. The login page ensures a streamlined authentication process, allowing users to quickly access their personalized content and features .

Search Functionality

• The application features a robust search functionality enabling users to discover and connect with other users easily by typing their username.

• Upon finding a desired user, clicking on their profile seamlessly navigates users to the respective user page, facilitating smooth interaction and engagement. This feature enhances user experience by promoting efficient exploration and connection within the platform.

Post Functionality

• The application includes a post feature enabling users to share content with others. Users can engage with posts by liking and commenting, fostering interaction and community engagement. This feature promotes user interaction and facilitates meaningful connections among users through shared content interactions.Here Users have the ability to delete their own posts, providing them with control over their shared content.

Friends

• The application incorporates a dedicated static friend page where users can manage their connections easily.

Watch page

• The application introduces a Watch page where users can discover and enjoy a curated selection of videos .

Marketplace Page

• The application introduces a dynamic Market page enriched with pagination, sorting, and filtering functionalities for enhanced user experience. Users can conveniently browse through products, organize listings based on their preferences, and efficiently find desired items within the marketplace.

Profile Page

• The application offers a personalized My Profile page where users can view their Profile and view their activities.

Design Decisions or Assumptions

• Employed Firebase Authentication for secure user login and authentication processes, ensuring user data confidentiality and authentication integrity.
• Utilized Git version control for efficient collaboration among team members, enabling seamless code management, version tracking, and code review processes.
• Chose Chakra UI for its comprehensive and customizable component library, facilitating rapid development and consistent UI styling across the application.
• Implemented responsive design principles to ensure the application's adaptability across various devices and screen sizes, enhancing accessibility and user experience for a diverse audience.

Installation & Getting started

Detailed instructions on how to install, configure, and get the project running. For BE/FS projects, guide the reviewer on how to check the Firebase configuration.

git clone https://github.com/Sameeer-Ahmad/Facebook-Clone.git
cd Facebook-Clone/facebook-clone
npm install
npm start

Usage

Application Overview

# 1. Navigate to the login page and sign in with your credentials.
# 2. Explore different sections such as the  feed,story, profile,Friends, Marketplace, watch and others available in the navigation menu.
# 3. Create new posts by clicking on the appropriate button, interact with existing posts by liking or commenting on them, and manage your profile settings as needed.

Technology Stack

• React-js
• Redux
• Html-css-javascript
• TypeScript
• Firebase (Authentication, Realtime Database)
• Chakra UI
• Tailwind CSS

Team Members

The project was developed collaboratively by the following 5 team members:

• Sameer (Team Lead) - LinkedIn Github
• Gulshaba - LinkedIn Github
• Sujeet - LinkedIn Github
• Sachin - LinkedIn Github
• Rohan - fw28_214 LinkedIn Github