Realtime Chat App in React Native and AWS (Backend 2) 🔴

Рет қаралды 17,771

Күн бұрын

Check out the NEW updated version of this build:
kzfaq.infomxXJSVW4tRY
📚 Enroll in The Full-Stack Mobile Developer course now and become a 6-figure dev in 2023!
academy.notjust.dev/
Let's build a Realtime Chat mobile application in React Native based on Whatsapp UI design.
🎒 Download the Asset Bundle (Images, Dummy data, PDF presentation, cokies):
assets.notjust.dev/whatsapp
🐱‍💻 Source code
github.com/Savinvadim1312/Wha...
💬 Join the notJust Development gang and let's build together
/ discord
If you are a beginner that wants to learn javascript and react native, or and advanced javascript developer that wants to get into mobile development using react native then this Livestream is for you. This is a perfect opportunity to follow along and build this application together with us, and add it to your portfolio as it will help you land your next job. If you finish the app, tag me on social media and I will give you feedback.
We will start building the Whatsapp clone from scratch, starting from setting up a React Native project using Expo and finishing with connecting the application with a GraphQL backend using AWS Amplify. We will walk through designing the UI layout of the app, structuring everything in components, and putting everything together. We will also implement navigation between screens, header bars, and tab bars for the Whatsapp menu.
For the backend, we will be using AWS Amplify, which is an amazing combination of tools and services from AWS, that helps us build mobile and web applications faster. It offers pre-made authentication components and flows, database, API (REST and GraphQL), storage, and much more. We will be using Graphql subscriptions for the realtime chat functionalities
Doing the Whatsapp clone yourself is a great opportunity to practice React Native, modern Javascript, Typescript, AWS Amplify. We are always trying to use the latest technologies and best practices, so that's another opportunity to learn something new, being it functional components, hooks, state, navigations or AWS and Amplify.
Tag me on social media when you finish the Whatsapp Clone, and I will give you feedback on your code.
LinkedIn: / vadimsavin
IG: / vadimsavin0
Twitter: / savinvadim_
Timecodes:
0:00 Intro
1:10 Who am I
3:38 Demo of previous episodes
9:36 Implement last message in a Chat
30:09 Update the Chat Room for new message
59:05 About GraphQL Subscriptions
1:03:31 Subscription to New Messages
1:46:03 Keyboard avoiding view
1:58:22 Demo
1:59:31 Improvement Ideas
#VadimSavin #notejust.dev #notJustDevelopment

Пікірлер: 61

@Zeedub 2 жыл бұрын

@Vadim just stumbled upon your channel this past week and want to give you some major credit! Ive been a developer for well over 20+ years and your live coding content is some of the best training content I have come across on youtube. Well done sir! Greatly appreciate all your work and effort! Very organized and efficient and not to mention your IDE of choice is WebStorm just like myself 🔥Keep it up brother, I look forward to all your new content!

@notjustdev 2 жыл бұрын

Hey @Zeedub, you made my day! Thanks for the kind words. This kind of messages make all the invested time and resources worth it and motivate me to never stop doing this. Thank you! 🙏

@chillaf99 3 жыл бұрын

I learned so much from these live streams, thank you!!!

@notjustdev 3 жыл бұрын

awesome bro, thanks for joining

@thomasbaidoo5418 2 жыл бұрын

Great channel. My brother and I are following you and improving our skills. Thank You man

@LauraDiaz-sg7xu 3 жыл бұрын

Vadim! Thank you so much for the tutorials! 👏

@notjustdev 3 жыл бұрын

I am glad you liked it, Laura

@briannezhad1804 2 жыл бұрын

You can push messages to begining of array: setMessages(messages => ([newMessageFromSubscription, ...messages])) @ 1:30:52

@cyberpoint860 Жыл бұрын

Happy Teachers Day . I learned a lot from you

@nickname______ 3 жыл бұрын

Thank you so much for the video 👍💪

@notjustdev 3 жыл бұрын

Thanks for watching

@alirazzaq1541 3 жыл бұрын

Vadim, the problem in updating the messages.. You setted setMessage([newMessage, ..messages]). This is setting the state instead of updating it. The right way to update the state is setMessage(messages => [newMessage , ...messages]). Or may b setMessage(x => [newMessage , ...x]). Basically x it the prevwous state.

@notjustdev 3 жыл бұрын

Yeah, that makes sense. Did you try it in this context?

@alirazzaq1541 3 жыл бұрын

And I forgot to tell you.. I love you man. You are the best.

@alirazzaq1541 3 жыл бұрын

@@notjustdev Yes.. It worked perfectly.

@notjustdev 3 жыл бұрын

@@alirazzaq1541 How could I have missed it. Thanks man. Learning together.

@endbringer121 3 жыл бұрын

In the end, with the problem with useEffect, the thing that can make it work is to put [messages] in the dependence array of UseEffect.

@christophermarshall3702 3 жыл бұрын

Nailed it was going to comment but beat me to it ha.

@shyamkirangarlapadu2282 2 жыл бұрын

Excellent content. Keep going VADIM

@notjustdev 2 жыл бұрын

Thank you 🙌

@amanguptadev 3 жыл бұрын

great content after watch this i am very excited to see more videos on your channel. I have a question that when we configure amplify we give aws IAM credentials. so where is credentials are saved and if in future i build my application then these are go with build or not please tell me.....

@hafidjs2974 3 жыл бұрын

Hello sir, i'm from Indonesia.. Thank you so much for the video!

@notjustdev 3 жыл бұрын

My pleasure!

@richpo9814 3 жыл бұрын

Just found this channel. Cool bro

@notjustdev 3 жыл бұрын

Thanks 👍

@christophermarshall3702 3 жыл бұрын

@@notjustdev Thiago Lanza In the end, with the problem with useEffect, the thing that can make it work is to put [messages] in the dependence array of UseEffect.

@notjustdev 3 жыл бұрын

📚 Enroll in "The Full-stack Mobile Developer" course and become a 6-figure dev in 2023: academy.notjust.dev/

@VikramSingh-qg3nh 2 жыл бұрын

sombeody come get her.. :D nice singing

@paulo.calazans 3 жыл бұрын

🙌👏👏👏👏👏

@devsmith948 3 жыл бұрын

Thanks for your good video. I think it is really really good job

@notjustdev 3 жыл бұрын

So nice of you

@explorerthaj1348 2 жыл бұрын

Hello Brother, thank you for this wonderful video. How can i get updated schema for graphql? older version doesn't support.

@sebastianwilliams8139 2 жыл бұрын

Great tutorial! Is there a way we can prevent creating multiple chatrooms with the same user? It looks like every time we click on the same user it is creating multiple chatrooms as well.

@lcd11001 2 жыл бұрын

Hello, my graphql doesn't require not null for lastMessageID. I can use ID without exclamation mark (47:38). Is it belongs to AWS amplify api version?

@rajpatel9406 3 жыл бұрын

Hey at which time have you shown the demo of this project,like chatting between two mobiles

@notjustdev 3 жыл бұрын

Somewhere at 1:44:30 I showed how I send messages from AWS (simulating another user) and receiving them realtime in the application

@alaabashiyi3346 3 жыл бұрын

Hello Vadim, while following your guide in the Chatroom subscrption, it works without the useEffect subscription function, it shows instantly on the other user. and when i add the subscription function it also works but it refreshes the chatroom screen, its a bit weird, what do you think ?

@alaabashiyi3346 3 жыл бұрын

its fixed now. XD but thanks a lot i really love your tutorials and all your projects on my ToDolist

@notjustdev 3 жыл бұрын

Awesome bro, keep building

@Ibrahim-fh6kv 3 жыл бұрын

Can you please continue with Instagram clone.

@amanguptadev 3 жыл бұрын

Hello vadim can you suggest me how can i rearrange ChatListItem depend on last message.....

@shubhamsood589 3 жыл бұрын

Hello sir. How to add video call functionality in this?

@sarcasticdna 3 жыл бұрын

I found gold in this channel !

@notjustdev 3 жыл бұрын

@lcd11001 2 жыл бұрын

Can you delete multiple chat rooms with condition like : ID not equal "abc" ? (52:23)

@odoohub5010 2 жыл бұрын

Hi vadim, i appreciate your effort in training us, but i have a question for you. from 1:18:21 on the video (kzfaq.info/get/bejne/i9ePqc6Gq9TWo6c.html). if we receive new notification about a new message, when any message is created, even when messages are created in a different room. Don't you think this may become a performance issue, when millions of people in different chatrooms are creating new messages? Dont you think that the millions of users will be receiving all the createdmessages that they dont need ,which needs to be ignored on their device, but can affect their device perfomance or slow the app on their devices? Is there no way to only subscribe for messages that belongs to a particular chatroom?

@richpo9814 3 жыл бұрын

Is it possible or you to do a Snapchat clone? I just subscribed.

@rob4fu17 3 жыл бұрын

Do the call functions work?

@benjaminbertagna3693 2 жыл бұрын

Hey @Vadim may I get some help ? When I implement subscription method with ".subscribe() " (1hour10min) I receive an error which is just "unknow". Even with a try catch I receive this error. I'm not able to fix taht, can you or someone help me ? Btw thanks for your tutorials, it's awesome !!!

@benjaminbertagna3693 2 жыл бұрын

I solved it

@bartoszbukowski6868 2 жыл бұрын

@@benjaminbertagna3693 how did you solve it? i have similar issue too and cannot get done with it...