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

  Переглядів 127,290

notJust․dev

notJust․dev

День тому

Check out the NEW updated version of this build:
ukposts.infomxXJSVW4tRY
Let's build a Real time Chat mobile application in React Native based on Whatsapp UI design.
📚 Enroll NOW for "The Full-stack Mobile Developer"
academy.notjust.dev/
🎒 Download the Asset Bundle (Images, Dummy data, PDF presentation): 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.
Timecodes
0:00 Intro
3:33 Demo of UI part
9:59 Intro to Amplify
12:17 Setup AWS Amplify project
22:22 Implement Authentication
34:24 GraphQL API - User Model
1:24:13 Display Users from API
1:34:50 Users Chat Rooms
2:43:45 Messages
3:20:30 Demo
LinkedIn: / vadimsavin
IG: / vadimsavin0
Twitter: / savinvadim_
#VadimSavin #notejust.dev #notJustDevelopment

КОМЕНТАРІ: 115
@bradike1
@bradike1 3 роки тому
Vad this is so great, man. I recently started using Amplify for my serverless backend with RN apps and i'm been checking out graphQL. I was trying to teach myself graphQL based on the AWS example chat app and its not nearly as helpful as this video. Your explanation of the schema and connections will really help others too because its hard to find good graphQL schemas online that really explain or work with AWS appsync. Thanks so much for making this video and keep up the good work!
@VikramSingh-qg3nh
@VikramSingh-qg3nh 2 роки тому
I'm a newcomer to your channel. The content you've been putting out is truly amazing. So helpful while following it along. Kudos
@endbringer121
@endbringer121 3 роки тому
Great tutorial, Vadim! This is the second that I follow, I am learning much here!
@notjustdev
@notjustdev 3 роки тому
Glad it was helpful!
@notjustdev
@notjustdev 3 роки тому
🎒 Download the Asset Bundle: assets.notjust.dev/whatsapp 📚 Enroll in "The Full-stack Mobile Developer" and become a 6-figure dev in 2021: academy.notjust.dev/
@FuN_n_Tech
@FuN_n_Tech 3 роки тому
file doent support
@isanioka
@isanioka 3 роки тому
This lesson is harder than first video, but it still very interesting! Thank you!
@notjustdev
@notjustdev 3 роки тому
Thanks
@ricardoperovano
@ricardoperovano 3 роки тому
Great Work, congratulations!
@notjustdev
@notjustdev 3 роки тому
thanks buddy
@brekele8070
@brekele8070 3 роки тому
You are amazing bro! Great content
@notjustdev
@notjustdev 3 роки тому
Thanks
@shodeolumide2140
@shodeolumide2140 2 роки тому
Thank you very much for this !!! You just got new subscribers 🙂🤗
@notjustdev
@notjustdev 2 роки тому
Thanks
@imPriyankCoder
@imPriyankCoder 3 роки тому
it's almost weekend wonder which new tutorial is coming :)
@lcd11001
@lcd11001 2 роки тому
1:21:18 Can we named the table in format proj_table_name for easier filter / recognize when we developed multiple projects? Or the DynamoDB will auto filter them by project?
@rosalindlawton
@rosalindlawton Місяць тому
thanks so much for this tutorial
@notjustdev
@notjustdev Місяць тому
You are welcome!
@sebastianwilliams8139
@sebastianwilliams8139 2 роки тому
Hey Vad just wondering, how can we be able to run the app per environment? Can we use react-native-config and define there the things needed like the graphql endpoint, region, etc so we can still run the app and choose whether to build it in dev, staging, or prod?
@MangoFlamingo
@MangoFlamingo 2 роки тому
Hi Vad! I was wondering if you have a github example that is a AWS react Native/Expo that use microservices?
@siddharthanelango6034
@siddharthanelango6034 3 роки тому
kindly help me bro, did expo supports video call,if supports can you provide any example for that
@Ibrahim-fh6kv
@Ibrahim-fh6kv 3 роки тому
Hey bro best react native tutorial on youtube and can you please continue with the Instagram app.
@usher7med1
@usher7med1 3 роки тому
do have a branch that contains only FrontEnd?? i want to make backend by myself i dont like AWS amplify. another think... its full of error kind of unable to resolve './aws-exports.js'
@nimbigo
@nimbigo 2 роки тому
How to import a dynamic mutation and let the value entered get stored in the database?
@sonamdorji5155
@sonamdorji5155 Місяць тому
hello, I am Mr. Sonam I'm a newcomer to your channel. and happy to be part of this group
@notjustdev
@notjustdev Місяць тому
Thanks and welcome!
@horaderelaxar4653
@horaderelaxar4653 2 роки тому
Editou onde? Ficou muito bom
@WinTunMMOCC
@WinTunMMOCC Рік тому
You have to use graphql via appsync and how to over come limit when the record are growing too many.
@junkaihwong8721
@junkaihwong8721 2 роки тому
Hi Vadim! Have been watching your content. it's super cool :D I have a qn. i want to add total number of unread messages by user for each chat (group chat too) and i am wondering how to go about doing it. Would appreciate any guidance. thanks :D
@ashwanipanchal7467
@ashwanipanchal7467 Рік тому
I love your all videos but i am not able to find your video call app. Can you please share the link of that playlist or video ? Thank you so much 🥰
@CarlosManuelGv
@CarlosManuelGv 2 роки тому
Hi Vadim, first of all, thank you very much for all of this!!! I have a question, did you know that there is a 100 subscriptions limit using Appsync from every client? A few users on your app would make it crash, because you can't subscribe to conversations. Did you think about it? do you have a solution for this? We are creating a chat service for our app and we just realized this, any suggestions or help would be much appreciated :) thank you very much.
@balajivenkatraman5271
@balajivenkatraman5271 2 роки тому
Can we detect online/offline status of a user from AWS Appsync. Because i tried to update a field to offline when the user goes offline. But i did not work since when i go offline my API will fail to update
@devsmith948
@devsmith948 3 роки тому
Really useful video!!! I have one question. Can I customize SignUp and Signin screen? for example, I want to add more information in siginUp screen.
@notjustdev
@notjustdev 3 роки тому
Yes you can design them on your own, and call the signIn method that you can import from 'aws-amplify'
@lcd11001
@lcd11001 2 роки тому
could you pls share your experience how to make a video call with AWS? Thank you
@mateonavarrette4864
@mateonavarrette4864 3 роки тому
Hi Vadim, great tutorials so far. I completed the frontend now I'm starting here on the backend. I had a question. So after I ran amplify api and set that up, I ran amplify push. It was all going well then I got an error. It popped up at 46:28, I never received a GraphQL endpoint: EROFS: read-only file system, mkdir '/graphql' An error occurred during the push operation: EROFS: read-only file system, mkdir '/graphql' I then ran sudo amplify push but then I got a new error: An error occurred during the push operation: EACCES: permission denied, unlink '/Users/mateonavarrette/Desktop/react-native-demo/WhatsAppClone/amplify/#current-cloud-backend/amplify-meta.json' I couldn't figure out how to get rid of these, so I just went to the next step which was amplify console api, and there doesn't seem to be anything wrong - as my screen looks like yours. Is this something I should still be concerned about? If anyone else has any idea too, please let me know. Thanks!
@mateonavarrette4864
@mateonavarrette4864 3 роки тому
I see a few minutes later you reference the src directory to access the queries.ts file. Looks like I didn't generate one because of my first error. If anyone has any tips let me know!
@sebastianwilliams8139
@sebastianwilliams8139 Рік тому
Is there an updated graphql schema for this one?
@maneeshmanorenj6311
@maneeshmanorenj6311 3 роки тому
Does it have audio message and notifications
@bellomayowa6993
@bellomayowa6993 2 роки тому
Hello, thanks so much for this tutorial, but I have a question, is it possible to add online functionality and when a user is typing? looking forward to your answer
@notjustdev
@notjustdev 2 роки тому
It would be possible to do it using state, as you provide a hook for the UI to know when to re-render your component. Give it a google search 😄
@bestelectrocity
@bestelectrocity 3 роки тому
You're the best Vadim :) , can you make tutorial on Uber Eats with Firebase BackEnd if its possible, I would greatly appreciate :)
@notjustdev
@notjustdev 3 роки тому
Thanks for the suggestion
@DuyTran-ss4lu
@DuyTran-ss4lu 2 роки тому
You're the best
@notjustdev
@notjustdev 2 роки тому
you are
@chakibsalah7287
@chakibsalah7287 3 роки тому
Nice contents and a lot of useful infos;It would be helpful if you provide timelines;
@notjustdev
@notjustdev 3 роки тому
Hey, thanks a lot for support. I will take some time and add timestamps to the videos
@shodeolumide2140
@shodeolumide2140 2 роки тому
Please what screen recording app did u use to achieve this. Or which can you recommend please?
@notjustdev
@notjustdev 2 роки тому
OBS
@devsmith948
@devsmith948 3 роки тому
And I can't see qureries.ts file in src folder. Maybe I made mistake for amplify? Can you explain the reason?
@notjustdev
@notjustdev 3 роки тому
Make sure that when asked "do you want to autogenerate code for amplify queries" you answer yes
@devsmith948
@devsmith948 3 роки тому
@@notjustdev Thanks for your response. I will check it soon.
@cubedev4838
@cubedev4838 3 роки тому
Can u make more functonalities like upload image, video
@ayodeleayoola9644
@ayodeleayoola9644 3 роки тому
Is there no package for parsing form data like it is in react which is formidable? Like uploading the profile picture from the front end into the backend instead of using image dummy data
@notjustdev
@notjustdev 3 роки тому
I could have implemented that, but for the sake of simplicity, I decided to go with dummy data images
@ayodeleayoola9644
@ayodeleayoola9644 3 роки тому
How do I do that?. Am interested.
@Blocker407
@Blocker407 2 роки тому
Does the app also have a web interface?
@techreeviews3671
@techreeviews3671 2 роки тому
you are super humen dude
@user-ws4rn9uz3k
@user-ws4rn9uz3k Місяць тому
error coming on UserChatRoom Failed to retrieve 35 record(s) 9 failed with the error: Field user cannot be set to null since its a required field. 35 failed with the error: Field chatRoom cannot be set to null since its a required field. What to do?
@imcoder5888
@imcoder5888 2 роки тому
help me! it running normal but have warning: WARN Possible Unhandled Promise Rejection (id: 0): Error: No credentials, applicationId or region
@creative-commons-videos
@creative-commons-videos 3 роки тому
please help me, i really want to use AWS Amplify for my existing application, it's in laravel now but want to try GraphQL and Amplify, but i don't know how can i implement queues, like in laravel it is super easy to use, My app is kind of Quizzing app where user join a quiz and submit it, and after a while ranking is calculated based on their score, so as soon as user join a quiz I want to notify them when quiz start, also when results are declare i want to notify them also, currently what i am doing is when any quiz is created, i add queues based on expiry, let say current time is 1:00 PM and quiz start at 5:00 PM, when quiz is created i add queue that will trigger on 5:00 PM to notify users to start quiz and also one more queue right after 15 minutes when results are declare
@notjustdev
@notjustdev 3 роки тому
The queues on AWS are implemented in the AWS SQS service, check it out. I integrated the laravel queues system with the SQS. The only downside is that SQS support delayed events for app to 24 hours (if I am not mistaken)
@sourabpramanik996
@sourabpramanik996 3 роки тому
Hey Vadim, hope you aredoing good. I am stuck in the backend, I am trying to push the User model but getting this error "EACCES: permission denied, open '../../../../../graphql/schema.json'". Please help out
@shashankpandey9978
@shashankpandey9978 3 роки тому
Try sudo amplify push. It will resolve the issue
@sourabpramanik996
@sourabpramanik996 3 роки тому
@@shashankpandey9978 I tried but not working
@naumanali8357
@naumanali8357 Рік тому
can you please update graphql schema
@852derek852
@852derek852 2 роки тому
Is it possible for a malicious user modify the app to read other people’s messages?
@mavhias
@mavhias 2 роки тому
Most of plugins are deprecated ! A bit difficult to follow,but still an extremly good quality content :) Strongly recommand this video to every fresh React dev
@notjustdev
@notjustdev 2 роки тому
Everything moves so fast in our industry that a lot of the plugins have been updated/deprecated from that time. Check out some of the newest builds
@ankushjoshi706
@ankushjoshi706 2 роки тому
Is the app completed?
@MangoFlamingo
@MangoFlamingo 2 роки тому
Could we have a tutorial with App Engine?
@siddhi.classes.jalgaon6685
@siddhi.classes.jalgaon6685 3 роки тому
Unable to resolve "./aws-exports" from "App.tsx" I am facing this issue please help
@sdljfgsdfg
@sdljfgsdfg 3 роки тому
I currently fixed this issue for myself. I am in VSCODE you need to rename src/aws-exports.js to src/aws-export.ts. then go into the .gitignore and change it to .ts there too. here is a post on github github.com/aws-amplify/amplify-js/issues/222
@TopAfghanMusic01
@TopAfghanMusic01 2 роки тому
Hi Vadim, thanks for this tutorial. I have an error about Aws amplify. Is this service free for using? I am from Afghanistan, we don't have any online banking account. I got an error about subscription, please reply
@notjustdev
@notjustdev 2 роки тому
You need a valid credit card when registering on AWS, though most services on aws have a free tier which is more than enough for testing the app while in development
@TopAfghanMusic01
@TopAfghanMusic01 2 роки тому
@@notjustdev OK. Thanks a lot 🙏
@dilan3159
@dilan3159 3 роки тому
Cool! Could use something like easybase.io too
@sourabpramanik996
@sourabpramanik996 3 роки тому
Hello, in ContactListItem the input of newChatRoomData is giving error "variable input has coerced Null value for NonNull tyoe ID!"
@notjustdev
@notjustdev 3 роки тому
That means that you are sending a undefined value to the ID. I can guess that it fails to create a chatRoom, and when you are trying to access the id of the chatRoom it gives undefined. Try to console log the result you receive from creating a new chatRoom
@sourabpramanik996
@sourabpramanik996 3 роки тому
@@notjustdev but in your code you also did the same thing, left the input blank. I really don't understand why it's not working here.
@notjustdev
@notjustdev 3 роки тому
@@sourabpramanik996 You might have done a type. Just console log and you will see
@nairgh
@nairgh 3 роки тому
@@notjustdev It gives me error first time i tried like your code. But when i use your repo code it worked createChatRoom, { input: { lastMessageID: " zz....16" } }
@FaisalKhan-ce2qu
@FaisalKhan-ce2qu 3 роки тому
*Headsup* things really start to turn after 1:38:00 when we work on schema! LOL!
@yogeshjadhav5851
@yogeshjadhav5851 3 роки тому
pls make one tutorial on Uber EATS - live location tracking of driver with map
@notjustdev
@notjustdev 3 роки тому
Thanks, I will take it into consideration
@ayodeleayoola9644
@ayodeleayoola9644 3 роки тому
Is there no need for package like socket.io?
@notjustdev
@notjustdev 3 роки тому
nope. we are using graphql subscriptions for that
@sebastianwilliams8139
@sebastianwilliams8139 2 роки тому
How can we implement the group messages?
@kugathajkangeswaran3876
@kugathajkangeswaran3876 2 роки тому
Hi.. Have you completed this?
@aamanimachani1715
@aamanimachani1715 2 роки тому
Please make a video on sending images and documents in whatsapp clone
@kugathajkangeswaran3876
@kugathajkangeswaran3876 2 роки тому
Hi... Have you completed this tutorial?
@amanguptadev
@amanguptadev 3 роки тому
bro i am trying to resolve the duplicate chatroom but still i don't have solution pls suggest me how can i solve it please help me....
@sebastianwilliams8139
@sebastianwilliams8139 2 роки тому
hey, have you resolved this already? I am also curious how to handle duplicate chatroom
@rajpatel9406
@rajpatel9406 3 роки тому
Is there any platflorm where i can ask doubts to you and you can reply me faster like slack
@notjustdev
@notjustdev 3 роки тому
Join our discord channel. Link in the description of the video
@rajpatel9406
@rajpatel9406 3 роки тому
@@notjustdev thanks
@poupCode
@poupCode 2 роки тому
But why dont have component CALL ??????????????????????????
@lcd11001
@lcd11001 2 роки тому
[1:23:14] How to remove "back" in navigation? ({ headerLeftLabelVisible: false })} >
@user-bc2lq6xb5h
@user-bc2lq6xb5h Місяць тому
2:02
@user-bc2lq6xb5h
@user-bc2lq6xb5h Місяць тому
3:17 การทำคว 5:21 5:21 5:21 ามสะอาดง่ายและสะดวกสบาย
@user-bc2lq6xb5h
@user-bc2lq6xb5h Місяць тому
😂🎉😢😅😊😊
@cartiktechnomechnobro9061
@cartiktechnomechnobro9061 Рік тому
51.13
@Mike252911
@Mike252911 3 роки тому
2:11:10
@mayadevikoli9290
@mayadevikoli9290 3 роки тому
heloo
@yi20860
@yi20860 8 днів тому
1
@danceshorts5801
@danceshorts5801 2 роки тому
Are you just teaching us,or the app is has functionalities
@poupCode
@poupCode 2 роки тому
Not screen call????????????????????????????? fk
@princepritam71
@princepritam71 Рік тому
Very very disappointed. You used AWS and I don't have any card so I couldn't complete the sign up process. I wasn't able to follow along the series any longer. You should have used firebase for this. I followed your frontend video with much hope that I would be able to deploy a fully working react - native application. But now all i am left with is a useless mere ui/ux. Not expected.. very disappointed
@notjustdev
@notjustdev Рік тому
Sorry to hear that. I am using the technologies that I love and I believe will bring you value in the market. I can recommend you some good tutorials using Firebase. There is a ton out there
@555pontifex
@555pontifex 3 роки тому
audio is awful on this video... boomy, far away..
@notjustdev
@notjustdev 3 роки тому
Agree. It was some time ago, now I bought a better mic
@AtikurRahman-im4gc
@AtikurRahman-im4gc 2 роки тому
The onerous gong gratifyingly risk because insect immunophenotypically bare an a thinkable liquor. like, glistening glorious harmony
@berkcan3475
@berkcan3475 2 роки тому
react native is obsolete, it is very bad investment, learn flutter or people who learning flutter will joke and kid with you in 2 years xD xD
🔴  Build the Uber clone in React Native (Tutorial for Beginners)
3:43:51
notJust․dev
Переглядів 778 тис.
How Shadcn/ui ACTUALLY Works
32:38
Theo - t3․gg
Переглядів 77 тис.
КАК ГЛОТАЮТ ШПАГУ?😳
00:33
Masomka
Переглядів 2,1 млн
Спектакль для окупантів та ждунів 🤯
00:47
Радіо Байрактар
Переглядів 520 тис.
I PUT MY ARMOR ON (Creeper) (PG Version)
00:19
Sam Green
Переглядів 5 млн
Godzilla Attacks Brawl Stars!!!
00:39
Brawl Stars
Переглядів 4 млн
Single Board Computers are lame
9:29
Raid Owl
Переглядів 20 тис.
Realtime Chat App in React Native and AWS (Backend 2) 🔴
2:09:50
notJust․dev
Переглядів 17 тис.
Building the Formula 1 App with React Native
3:58:45
notJust․dev
Переглядів 208 тис.
Best frontend and backend projects for resume
13:11
Hitesh Choudhary
Переглядів 125 тис.
Expo in 100 Seconds
2:39
Fireship
Переглядів 504 тис.
Клавиатура vs геймпад vs руль
0:47
Balance
Переглядів 459 тис.
Start from 0 at any point on the T1 Digital Tape Measure
0:14
REEKON Tools
Переглядів 19 млн
Самый маленький игровой ПК
0:46
ITMania - Сборка ПК
Переглядів 547 тис.
МОЙ ПЕРВЫЙ ТЕЛЕФОН - Sony Erricson T280i
18:02
ЗЕ МАККЕРС
Переглядів 65 тис.