Read the full tutorial here: >> How to Build a Social Networking Site with Next.js (Facebook Clone)
This example shows How to Build a Social Networking site with Next.js (Facebook Clone):
This demo uses:
- CometChat Pro 2.4.0
- Firebase
- Next.js
- React.js
- Uuid
- Validator
To run the demo follow these steps:
- Head to CometChat Pro and create an account
- From the dashboard, add a new app called "facebook-clone"
- Select this newly added app from the list.
- From the Quick Start copy the APP_ID, APP_REGION and AUTH_KEY. These will be used later.
- Also copy the REST_API_KEY from the API & Auth Key tab.
- Navigate to the Users tab, and delete all the default users and groups leaving it clean (very important).
- Download the repository here or by running
git clone https://github.com/hieptl/facebook-clone.gitand open it in a code editor. - Head to Firebase and create a new project
- Create a file called .env.local in the root folder of your project.
- Import and inject your secret keys in the .env.local file containing your CometChat and Firebase in this manner.
NEXT_PUBLIC_FIREBASE_API_KEY=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
NEXT_PUBLIC_FIREBASE_DATABASE_URL=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
NEXT_PUBLIC_FIREBASE_PROJECT_ID=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
NEXT_PUBLIC_FIREABSE_MESSAGING_SENDER_ID=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
NEXT_PUBLIC_FIREBASE_APP_ID=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
NEXT_PUBLIC_COMETCHAT_APP_ID=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
NEXT_PUBLIC_COMETCHAT_REGION=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
NEXT_PUBLIC_COMETCHAT_AUTH_KEY=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
NEXT_PUBLIC_COMETCHAT_API_KEY=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx- Make sure to exclude .env.local in your gitIgnore file from being exposed online.
- Run the following command to install the app.
npm install
npm run devQuestions about running the demo? Open an issue. We're here to help ✌️