WhatsApp Clone

This WhatsApp Clone is a real-time messaging application built using the MERN stack, with WebSockets enabling instant communication. The project delivers a seamless user experience, mirroring the functionality of a modern messaging platform.

Project Link:

Visit Project's Live Web-App

Tech Stack · Deploy Your Own ·

Tech Stack

• Convex for the database, real-time events and cloud functions
• Next.js App Router for the framework
• ShadCN for UI components
• Convex File Storage for storing images and videos
• ZegoCloud for video calls
• Clerk for user authentication
• Tailwind CSS for styling
• TypeScript just to feel cool

Deploy Locally

You can deploy this app by setting up the following services and adding their environment variables:

1. Run npm install to install dependencies.
2. Run npm run dev. It will prompt you to log into Convex and create a project.
3. It will then ask you to supply the CLERK_ISSUER_URL. To do this:
   1. Make a Clerk account.
   2. Copy both the CLERK_SECRET_KEY and NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY API keys into .env.local.
   3. Do steps 1-3 here and copy the Issuer URL. It should look something like https://some-animal-123.clerk.accounts.dev.
   4. Add CLERK_ISSUER_URL to your Convex Environment Variables Paste the Issuer URL as the value and click "Save".
4. Add CLERK_HOST_NAME to your Convex Environment Variables as for the value paste the CLERK_ISSUER_URL's value
5. From your CLERK account, under the WebHooks, add an endpoint which should look like this: https://your-convex-url.convex.site/clerk and select user.created user.updated session.created session.ended events. Copy the webhook secret and in your Convex Dashboard add this env variable CLERK_WEBHOOK_SECRET and paste the value
6. Now your frontend and backend should be running and you should be able to log in but not support OpenAI features.
7. Create an OpenAI account to get $5 of free credit or pay for your current account and get your OPENAI_API_KEY and add it to Convex Dashboard
8. To enable video calling, create a ZEGOCLOUD account, create a project and select voice && video calls. Paste ZEGO_APP_ID and ZEGO_SERVER_SECRET to .env.local and save
9. Now it should be up and running. Check out the TUTORIAL for a complete walk-through.

Contact

Manthan Kumar -LinkedIn -mksoul1811@gmail.com

Thanks for visiting