🔴 Whatsapp Clone ( Realtime Chat App ) with Next.js, Socket.io & Zegocloud with Voice & Video Call

This is a realtime chat app with video call and voice call functionality.

ZEGOCLOUD video & voice call SDK allows you to easily build your safer whatsapp clone.

📚 Links and References

🔔 Subscribe for more!

🎁 Support me with a donation

Join My Discord Community

Features of the WhatsApp Clone:
This comprehensive WhatsApp clone comes packed with a range of awesome features to give you an authentic messaging experience. Here are some highlights:

✅ Login with Google using Firebase: Seamlessly sign in with your Google account via Firebase integration.

✅ Switch between multiple databases using Prisma: Customize your database preferences to suit your needs effortlessly.

✅ Voice Call and Video Call Feature: Enjoy crystal clear voice and video calls within the app.

✅ Voice Notes with Live Audio Waveforms: Send and receive voice notes accompanied by live audio waveforms for an enhanced messaging experience.

✅ Support for Emoji: Express yourself with a wide range of emojis to add fun and emotions to your conversations.

✅ Send Images: Share images with your friends and loved ones effortlessly.

✅ Online/Offline Functionality: Easily identify the online and offline status of your contacts.

✅ Search Messages: Quickly find specific messages using the search functionality.

✅ Capture Photo From Camera: Take instant photos using your device's camera and send them instantly.

✅ Message Read Status: Know when your messages have been read by your recipients.

✅ Message Time: Stay updated with the time stamps of messages for better organization.

And many more awesome features await you in this WhatsApp clone!

Search Terms
How to build a whatsapp clone
How to build a chat app
React Chat App
Nextjs Chat App
Whatsapp Clone React
Prisma Tutorials

⏱️ Timestamps
00:00 Demo
06:08 Zegocloud Intro
07:55 Setup
24:25 Login Page
45:26 On boarding Page
02:44:44 Main Chat Page
02:50:50 Chat Sidebar
03:15:26 Chat Component
03:33:40 All Contacts Component
04:14:40 Send and Receive Message
05:24:20 Emoji Messages
05:34:30 Image Messages
06:04:00 Record Messages
07:09:00 Search Messages
07:31:20 Sidebar Contacts
08:13:40 Search Sidebar Contacts
08:20:10 Search All Contacts
08:32:20 Voice and Video Call UI
09:00:00 Incoming Voice and Video Call UI
09:27:55 Zegocloud Project Setup
09:29:30 Integrating Zegocloud with Voice and Video Call
10:01:27 Exit Chat
10:06:17 Logout Whatsapp

#whatsappclone #chatapp #kishansheth #zegocloud #videocall #sdk #api #nextjs #reactjs #nodejs #socketio #whatsapp

[GrimReaperAMV]

Wow i can't imagine how a single man was seriously able to create a WhatsApp clone that is even better than the original. well done bro

[fye]

I can tell you put a lot of work into this. Well Done👏

[kikiken]

thank you so much Kishan for putting incredible amount of work on this lecture and makeing it public free! it helped me a lot to learn about socket io, and backend stuff!

[tosinolugbenga]

Honestly, this is the first unique video with simplicity that i will follow and had no issues whatsoever. You deserve a coffee

[irfansaeedkhan]

just wow wow wow, most of the teacher only show the basic socket and msg sending, but you are amazing, from audio to img sending, msg seen, sent, perfect replica ui, fast, sent time is also shown, you are next level and your channel will grow

[kazaloops]

Hands raised for this legend Literally he created better than real whatsapp😮A single man

[MuhammadIrfan-cjcq]

Successfully created this clone with end to end encryption and added multi lingual support with multiple language thanks kishan for this amazing course.

[nayri_b]

Your content is more than a course in udemy bro. Very nice

[naveenkrishna]

Fantastic work ! At 1:03:09 the issue is due to the fact that userInfo is not available at re-render. If you try to go back to /login route and login once, the error will go away

[miguelangelmadronerosequei]

si esto tuviera subtitulos llegaria a mucha mas gente, muy
buen trabajo

[rudinhok]

The efforts that you put in this video is just WOW, you got me as new subscriber, thank you for this, is awsome, to bad its not with Typescript, i have some struggles with that, but this is just awsome

[PrinceKumar-hhyn]

the exit problem made this video more realistic like one was actually trying to make out something in front

[rhz]

It was amazing, now im learning React and this is a great project to learn! I love this <3 Thank you so much

[YakshPatel-fmfe]

Sir please make a video how to run an ready made project of your i have purchase a code but it is not working from my side please make a video and show to run that code easilynand what changes i have to made i have an project submission this week

[raywright]

Well done bud. Nicely detailed and very informative.

[didymusorotayo]

Kishan, this is an authentic one from start to finish. You are the coolest, brosev. So, easy to follow.. I would like to ask, for some reason, I am not getting my messages real time

[ASHUTOSHSHARMA-hw]

Made the complete clone 🙂🙂thank you so much❤❤❤❤

[samialvi]

Thats
Appreciate the efforts you putted on making this amazing course

[sayanpaul]

Amazing work !! It's was my college project and I got the exact project

[mimoraja]

Beother well done a very professional set

I have 2 question:
Q 1)
If we are going to use firebase for authentication why not also use onchangeauth instead of creating a custom hook to check the user state

i like prisma and it is the first time working with it, i run in few issues to save the user on the database since I'm not using the next js, I'm using a expo but i was able to fix and save the user
Q:2) do i need to regenerate the prisma each time i change the user model

Or just do prisma db puch

By the why since i have integrated prisma on existing projects with firestore i'm thinking to use the sql database as second data backup
Question