Let's build a DISCORD clone with React Native đź”´

notJust․dev
notJust․dev
153,543
0
Published 2022-02-25
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/?utm_source=youtube&utm_medium…

đź’¬ Join the notJust Development gang and let's build together:
Twitter: twitter.com/VadimNotJustDev
Instagram: www.instagram.com/VadimNotJustDev
Facebook: www.facebook.com/notjustdev
LinkedIn: www.linkedin.com/in/vadimsavin
Discord: discord.gg/VpURUN2

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
All Comments (21)
  • @notjustdev
    📚 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/
  • @zb2747
    I respect the grind man - you’re the only dev I see pushing out tutorials and good react native clones consistently
  • @alexleocampbell
    Please do a part 2, Vadim! Been looking forward to your Discord series so much 🥳
  • @_rushii
    Discord is actually moving to React Native very soon, it's been in development for months by now
  • @ipadnf7934
    You are really good man, I'll love to have you mentor me on my programming journey
  • @ehodges2004
    Looks really cool! Will you do E2E encryption in this project?
  • @shivas2611
    discord clone is excellent.please continue with discord clone with more features like amplify backend authentication in the coming weeks thanks
  • @capossito
    Can you do a tutorial on AWS personalize and how to integrate well with Amplify?
  • @mohammadsangare972
    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
  • @GlitchToGaming
    Does this have screen sharing? I haven't seen any videos on YouTube that teach how to do screen sharing with react native
  • @IAMJRAD
    How could we do this but with discord mirrored chats from discord channels?
  • @christinec6533
    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?