Facebook2.0 - An Beautiful Open Source Facebook Clone

Description

This project is a Open Source Facebook Clone built using MERN Stack. It is not just another clone, but it is a Social Media Application which has its features inspired from Facebook, Instagram, Slack, Twitter etc.

Note - This Project is currently in Development Phase 🤖️

Technologies Used 👩‍💻️

• React as front end library.
• Redux for state management.
• React Query for Caching & Network Requests.
• Formik for Form Management
• Tailwind CSS as CSS Library.
• Node.js + Express at the backend.
• MongoDB for Database.
• TypeScript for Type support for both front end & back end.

Installation

• Clone this repo by typing git clone https://github.com/shaan71845/facebook2.0.git in your terminal.
• Install client side dependencies -

cd client
npm install // If you use npm
or
yarn install // If you use Yarn

• Install Sever side dependencies -

cd server
npm install // If you use npm
or
yarn install // If you use Yarn

Configuration

Server side

In your server folder, create a .env file and create following environment variables.

Also signup at cloudinary.com and get your cloudinary configurations (Cloud name, API Key, API Secret) and paste them in this file.

MONGO_URI= // Your MongoDB Database URI
PORT= // Your Express Server PORT
JWT_SECRET= // Your JWT Secret
CLOUDINARY_CLOUD_NAME= // Your Cloudinary Cloud Name
CLOUDINARY_API_KEY= // Your Cloudinary API Key
CLOUDINARY_API_SECRET=// Your Cloudinary API Secret
CLOUDINARY_POST_UPLOAD_FOLDER=// Your Cloudinary Post upload folder path

Client side

In your client folder, create a .env file and create the following environment variables.

REACT_APP_CLIENT_ID= // Your Google OAuth Client ID
REACT_APP_CLIENT_SECRET= // Your Google OAuth Client Secret