Let's build a DISCORD clone with React Native 🔴
Vložit
- čas přidán 1. 05. 2024
- Let's challenge ourselves and build a fully-fledged Discord clone with React Native and Stream Chat SDK
➡️ Open your Free Stream Maker Account: bit.ly/3hgaJ7B
🎒 Download the Asset Bundle (Images, Dummy data, PDF presentation, cookies):
assets.notjust.dev/discord
💻 Source code: github.com/notJust-dev/Discord
In this video, we will learn how to build a fully-fledged real-time chat messaging application similar to Discord or Slack. The application will have all of the engaging features you would want for in-app chat - such as emojis, likes, URL previews, and more.
Building in-app messaging functionality from scratch can take months - and that’s just for a bare-bones chat that contains none of the features that savvy app users expect. With the Stream Chat API, you can replicate polished social media messaging experiences found in popular applications such as Discord, Slack, WhatsApp.
By the end of this video, you will build a chat app with the next features:
✨1-on-1 Real-time messaging
✨Group channel messaging
✨Emojis, Reactions, GIFs
✨Image, Video and Attachment messages
✨URL previews
✨and more
🤯 All of this in one single video 🤯
📚 Enroll NOW in The Full-Stack Mobile Developer course and don’t miss out on your chance to become a 6-figure dev! Check out what our successful students are saying about their experience:
academy.notjust.dev/?...
💬 Join the notJust Development gang and let's build together:
Twitter: / vadimnotjustdev
Instagram: / vadimnotjustdev
Facebook: / notjustdev
LinkedIn: / vadimsavin
Discord: / discord
Timecodes:
0:00 Intro
2:48 Prerequisite
5:08 Setting up the project
14:44 Create Steam account & install stream chat SDK
23:06 Initialize a Stream client
26:08 Connect a user
37:36 Create a channel
43:31 Configuring UI components - overlay provider
47:21 Configuring UI components - chat
52:41 Configuring UI components - chat list
59:48 Configuring UI components - channel
1:08:43 Configuring UI components - message list
1:09:30 Configuring UI components - Message input
1:17:50 Summary
1:30:07 Basic authentication
1:44:15 Create auth context
2:05:06 Display channel list with drawer navigator
2:19:15 Create a channel screen
2:26:46 Render the messages for a channel
2:49:06 Theming
3:01:53 Fixing users channel list
3:04:58 Allow user join a channel
3:20:14 App test
3:24:54 Q&A
Disclaimer: This build is for educational purposes only!! All views, opinions, technology choices expressed in this video are my own and do not represent the views, opinions, technology choices of any entity whatsoever with which I have been, am now, or will be affiliated.
#VadimSavin #notjustdev #reactnative
📚 Enroll NOW in The Full-Stack Mobile Developer course and don’t miss out on your chance to become a 6-figure dev in 2023! Check out what our successful students are saying about their experience:
academy.notjust.dev
íí
íi8kíi888íí8inniiinn88i
I respect the grind man - you’re the only dev I see pushing out tutorials and good react native clones consistently
Glad you like them!
Please do a part 2, Vadim! Been looking forward to your Discord series so much 🥳
Thank you for the build Vadim.
You are really good man, I'll love to have you mentor me on my programming journey
Looks really cool! Will you do E2E encryption in this project?
That was awesome and very knowledgeable ..
Can you do a tutorial on AWS personalize and how to integrate well with Amplify?
We definitely want a part 2 .. same as how you created Signal Clone 6 parts
@@shivamjha.56 yes
Is this discord clone completed , there's a part 2 too, I'm a beginner so wanted to know that should I follow these 2 videos in order to make a fully functional discord clone, so can you help and share is it completed?
Discord is actually moving to React Native very soon, it's been in development for months by now
I do love your VS-Code and CMD theme setup looks awesome, how can I get it? Awesome videos as always. Thanks for teaching us
discord clone is excellent.please continue with discord clone with more features like amplify backend authentication in the coming weeks thanks
We will do it today
Does this have screen sharing? I haven't seen any videos on CZcams that teach how to do screen sharing with react native
How could we do this but with discord mirrored chats from discord channels?
hey do it have seo? plz reply?
Please do part 2. Please
can you do this on windows?
can i build this using react cli?
Thanks so much for the vid, but the tabs template for expo has changed so much its basically unrecognizable. How do i get access to this old template?
Same issue here .... For this reason, I don't like this pre-configured templates !
can you clone a fitness app?
Thanks moreeeeee...
Does stream chat have a free account?
Is it me or does not work on Android?
I personnally had to wrap OverlayProvider like this:
...
@@jorgecruz9383 Thanks a lot, this issue disturbed me for a while😅
me too , thanks alot
Please can you clone a banking application with a real bank type api please I need this but no body teaching
Please Vadim and if you don’t want that please try a manga reader app like takeyomi or manga bird please Vadim I need the manga reader app this has been my dream I just don’t know how I can assist for you to do this please with graphql cause a lot of people are looking for this but no one is doing it please reply if you can consider it because all these apps have been corporate work let’s try something very fun 😭😭😭😭😭
Just know this from NIGERIA I recommend you to a lot of people that want to take react native class
Hj
I like the content but can you stop making munching and spit noises😅
are you complete this Project