Let's build WhatsApp with React Native and AWS Amplify [p2] 🔴
Вставка
- Опубліковано 16 чер 2024
- Let's build a Realtime Chat mobile application in React Native based on WhatsApp UI design.
📚 Join the waitlist for "The Full-stack Mobile Developer" course
academy.notjust.dev/
🎒 Get the step-by-step guide and Asset Bundle
assets.notjust.dev/whatsapp2
Part 1: • Let's build WhatsApp w...
If you are a beginner that wants to learn javascript and React Native, or an advanced javascript developer that wants to get into mobile development using react native then this tutorial 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.
We will start building the WhatsApp clone from scratch, starting by setting up a React Native project using Expo all the way to building the 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 real-time chat functionalities
Doing the Whatsapp clone yourself is a great opportunity to practice React Native, modern Javascript, and 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.
🐱💻 Source code
github.com/notJust-dev/whatsapp
💬 Join the notJust Development gang and let's build together
/ discord
Tag me on social media when you finish this build, and I will give you feedback on your project.
Twitter: / vadimnotjustdev
IG: / vadimnotjustdev
LinkedIn: / vadimsavin
Timecodes:
0:00 Introduction
0:38 Todays build
06:03 prerequisite
07:26 Create the amplify app
15:19 Setup authentication
43:23 Data model
01:21:10 Users
01:47:08 Chat rooms
02:50:40 Chat
03:16:47 Next week build ideas
03:18:00 Outro
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.
#notjustdev #whatsappclone #reactnative - Наука та технологія
![Build a TikTok Clone in React Native and AWS Backend [Tutorial for Beginners] 🔴](http://i.ytimg.com/vi/7okW52MQgSE/mqdefault.jpg)
Great Project, Great Pedagogical programming approach . A true Project Based Learning. Accessible for all beginner and even intermediate programmers. For the Backend part, I suggest Melt all the AWS DynamoBD Database schema into a SINGLE TABLE and use Partition Keys , SK and Even GSK to get rid of all those tables relations . Thanks
Thank you very much, frankly I learned a lot following along, coding, making mistakes searching for problem source & correcting them, really it's was wonderful learning time
So happy to hear :) You rock
Thank you for the detail in every video. Extraordinarily elaborate!
Great like always. Using ts would help with object fields and typos a lot, but I understand that you want to keep it as much simple as possible for new devs. You're doing awesome work here! Waiting for part 3
I love your work. Nice work. I suggest adding the link to this video in the pt one description
Man, thank you! your work is amazing
Thank you please continue
Nice work!! Waiting 3 part Greetings from Colombia
Great tutorial, are you planning on creating a course about the lambda function to combine the authenticated users with the users in the database?
Nice Video! Looking forward your new update this Friday😄
Would love to see a stocktwits clone next would be very interesting and something different!
such a great video
loved your efforts ♥♥♥
Big GG
Awesome man 👍. By the way can we use this one for production? And how to check and verify the scalibility, performance etc? If I wanted to check if it's applicable for production mode.
Really a good video but can you set this up using code not using the console of gui?
Hi there, great work! I would like to know if it's possible for two people or groups to chat on whatsApp then display on a QuickSight dashboard and for those same people in that group to also see the dashboard. Additionally, can others in another group see only their own dashboard? Is this possible?
It would be great to see you TDD a project like this.
Hi Vadim, I very much like your courses, I have watched many. Do you have a recorded course (even if it's a paid course) where you teach the backend implementation without shortcuts? I was left wondering how to do the proper linking between Cognito and Dynamo. I look forward to hearing from you. Thanks
Hey mate. Love the React Native videos!!! Can you do a few Web 3.0 React Native apps please? Would love to see this :)
Awesome video as always! I found that Amplify Content management page does not have view for selecting table and automatically generate data anymore, it only shows graphiql view, they have launched this new change on Nov 22, 2022 after your video, is there any other way to generate the test data in Amplify, so it would be easier for other viewers to follow.
hey, any update?
Great tutorial. I highly suggest to make Group screen and show the functionality of Mentioning people of that group. Reply on specific message and add reaction to message.
Amazing Content! Please can you make read/unread messages? The blue tick that appear on the home screen saying that you have unread messages
You are красавчик!
Hello Vadim! I'm a bit late, but I'm still here!
I'm thinking about signing up to your Senior plan, but first can you tell me what clones you have prepared in the future?
Please, can you do a video about subscriptions and referral programs, is there a way to integrate referral programs with RevenuCat
I'm also having problem with code at 2:01:40
when creating userChatRoom
new chat room is created, I have Id
but when I'm adding user to that chat room, I get :
Possible Unhandled Promise Rejection (id: 4):
Object {
"data": null,
"errors": Array [
Object {
"locations": null,
"message": "The variables input contains a field name 'chatRoomID' that is not defined for input object type 'CreateUserChatRoomInput' ",
"path": null,
},
],
}
and on amplify studio -> content-> chatRoom I see new room created....but no users in it
I've also tried chatRoomId as name of the variable in input... but to no avail
I also had this error and spent ages trying to find the solution. My solution was that 'chatRoomID' is no longer a field as of the date I am writing this comment, but instead you should use 'chatRoomId' with a small d. You can see this when you go into AWS AppSync -> Queries and when you open MyMutations and createUserChatRoom, you need to use the exact names of the fields. In other words: when Vadim made the video the fields for createUserChatRoom had 'chatRoomID' and 'userID', but now they are 'chatRoomId' and 'userId' so you need to use that instead (just change the big D into a small d in their names in your code). I spent way too long figuring this out cos I'm stupid.
@@Sydrooo worked for me as well
@@Sydrooothank you!!😊
@@Sydrooo Thanks a lot mate
😁
@@Sydrooo Yes, this worked for me as well. Thank you for explaining this to us!
hI iI'm getting an error for "Possible Unhandled Promise Rejection" at time 2:01:42. It's not navigating to the chat room and it's not creating a log in the AWS database
I have the same problem, have you figured out what was wrong???
Please add video calling voice calling and story uploading please complete it
how to create aws account without debit or credit card?
can we have the timestamps, please?
Will i make any money after making this app.?
how to resolve this error message : The variables input contains a field that is not defined for input object type 'CreateUserInput'
you might want to ensure that you're passing a string for the fields in `CreateUserInput`. I think the phone number as the name field is kinda troublesome since that value would be recognized as an integer and not a string. This was how I found my solution.
Hi! How you fix the message input text problem when keyboard show? 2:55:25
I see that no issue in minute 3:08:48 but I didn't see where you fix that. Thank you in advance! 🤗
are you use android platform??
if yes, i can give my keyboardAvoidingView to you