facebook-clone

facebook-clone

---

🚥 Description

Building facebook application clone using React and express. This build covers the core functionality (uploading normal text, images & videos....etc) of original facebook application. It is fully responsive and looks better in most of the devices. It includes dark/light theme toggle feature as well

Table of Contents

1. Demo
2. Key Features
3. API Usage
4. Deployment
5. Build With
6. Run app

Demos

Register

Verify the newly created account via sending mail

Reset password by sending verification code to the corresponding email address to this account

Upload posts and reacts to them

Responsive Design

Edit personal info in your profile page, upload (profile image & cover page)

Live Search for other user in the system, view their profile, reacts to their post, and sending friend request or just following them

View your friends and accept or reject friend request

Dark mode

---

Key Features

• Authentication
  • Login
  • SignUp
  • Logout
  • Tokens
• Password Management
  • Change Password
  • Forgot Password
  • Reset Password
• Email Management
  • Send Email Verification
  • Send reset password code
• User
  • Update personal info, upload profile image, upload cover page
  • Create, remove posts, and reacts on posts
  • Search for friends, Send friend requests, accept/reject friend requests, view current friends
  • View friends posts in the home page
  • Change from light mode to the dark one

---

API Usage

User Endpoints

Methods	Endpoints
POST	/register
POST	/activate
POST	/login
POST	/sendVerification
POST	/findUser
POST	/sendResetPasswordCode
POST	/validateResetCode
POST	/changePassword
GET	/getProfile/:username
PUT	/updateProfilePicture
PUT	/updateCover
PUT	/updateDetails
PUT	/addFriend/:id
PUT	/cancelRequest/:id
PUT	/follow/:id
PUT	/unfollow/:id
PUT	/acceptRequest/:id
PUT	/unfriend/:id
PUT	/deleteRequest/:id
POST	/search/:searchTerm
PUT	/addToSearchHistory
GET	/getSearchHistory
PUT	/removeFromSearch
GET	/getFriendsPageInfos

Post Endpoints

Methods	Endpoints
POST	/createPost
GET	/getAllPosts
PUT	/comment
PUT	/savePost/:id
DELETE	/deletePost/:id

Reacts Endpoints

Methods	Endpoints
PUT	/reactPost
GET	/getReacts/:id

Upload Endpoints

Methods	Endpoints
POST	/uploadImages
POST	/listImages

---

Build With

• React
• React hooks
• Redux
• Material UI
• Flexbox
• Express
• Nodejs
• JWT

Run app

✅ How to make use of this build?

1. Clone the repository

   git clone https://github.com/phanison898/facebook-clone.git

2. Navigate to the cloned directory

   cd path/to/cloned/directory

3. Create .env file in the backend folder with following properties and paste them

   DATABASE_URL=
   TOKEN_SECRET=
   BASE_URL=
   EMAIL=
   MAILING_ID=
   MAILING_SECRET=
   MAILING_REFRESH=
   MAILING_ACCESS=
   CLOUD_NAME=
   CLOUD_API_KEY=
   CLOUD_API_SECRET=

4. Create .env file in the frontend folder

 REACT_APP_BACKEND_URL=

5. Install node packages

   npm install

6. Start the development server

   npm start

7. Happy learning 😊
8. Please consider to star ( ⭐ ) this repo. It'll boost my confidence