KZhead
Ғылым және технология

Let's build WhatsApp with React Native and AWS Amplify [p2] 🔴

notJust․dev
2024 ж. 24 Сәу.
105 921 Рет қаралды
Жүктеу

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

Пікірлер

  • 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

    @SAMAmUrl@SAMAmUrl8 ай бұрын

  • 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

    @adelelsayedgamal@adelelsayedgamal8 ай бұрын

    • So happy to hear :) You rock

      @notjustdev@notjustdev8 ай бұрын

  • Thank you for the detail in every video. Extraordinarily elaborate!

    @ntindaSnyper@ntindaSnyper Жыл бұрын

  • Great tutorial, are you planning on creating a course about the lambda function to combine the authenticated users with the users in the database?

    @joshbleijenberg4000@joshbleijenberg40007 ай бұрын

  • I love your work. Nice work. I suggest adding the link to this video in the pt one description

    @thetechbrojoe@thetechbrojoe Жыл бұрын

  • 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

    @ukaszmodzelewski7687@ukaszmodzelewski7687 Жыл бұрын

  • Man, thank you! your work is amazing

    @StefanoOrtisi@StefanoOrtisi Жыл бұрын

  • 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.

    @anilkumarpandey2294@anilkumarpandey2294 Жыл бұрын

  • Thank you please continue

    @shahnawazattar7991@shahnawazattar7991 Жыл бұрын

  • 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

    @felipemelendez5741@felipemelendez5741 Жыл бұрын

  • 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?

    @kaydenangel3742@kaydenangel3742Ай бұрын

  • Really a good video but can you set this up using code not using the console of gui?

    @bugsbunny3354@bugsbunny33546 ай бұрын

  • Big GG

    @francoismonfret8108@francoismonfret81086 ай бұрын

  • Would love to see a stocktwits clone next would be very interesting and something different!

    @trevordavlin2162@trevordavlin2162 Жыл бұрын

  • It would be great to see you TDD a project like this.

    @SonAyoD@SonAyoD Жыл бұрын

  • Nice work!! Waiting 3 part Greetings from Colombia

    @nicolas17649@nicolas17649 Жыл бұрын

  • such a great video loved your efforts ♥♥♥

    @RohitKumar-rm3kc@RohitKumar-rm3kc10 ай бұрын

  • Hey mate. Love the React Native videos!!! Can you do a few Web 3.0 React Native apps please? Would love to see this :)

    @kyegoullet2585@kyegoullet2585 Жыл бұрын

  • 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.

    @b4uloveme515@b4uloveme515 Жыл бұрын

    • hey, any update?

      @dunyadanbkanceyda2243@dunyadanbkanceyda22434 ай бұрын

  • Nice Video! Looking forward your new update this Friday😄

    @user-oq7rd2eu8r@user-oq7rd2eu8r Жыл бұрын

  • Amazing Content! Please can you make read/unread messages? The blue tick that appear on the home screen saying that you have unread messages

    @jimmynoujaim4914@jimmynoujaim4914 Жыл бұрын

  • I'm thinking about signing up to your Senior plan, but first can you tell me what clones you have prepared in the future?

    @polyrhythmm@polyrhythmm Жыл бұрын

  • 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.

    @thechief4568@thechief4568 Жыл бұрын

  • You are красавчик!

    @eminzeynalov3395@eminzeynalov3395 Жыл бұрын

  • Hello Vadim! I'm a bit late, but I'm still here!

    @vitorpeixoto2324@vitorpeixoto2324 Жыл бұрын

  • Please, can you do a video about subscriptions and referral programs, is there a way to integrate referral programs with RevenuCat

    @beyabdenour3271@beyabdenour3271 Жыл бұрын

  • 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

    @Wolfwarshadow@Wolfwarshadow Жыл бұрын

    • 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@Sydrooo Жыл бұрын

    • @@Sydrooo worked for me as well

      @Adiislive@Adiislive Жыл бұрын

    • @@Sydrooothank you!!😊

      @happyppah@happyppah Жыл бұрын

    • @@Sydrooo Thanks a lot mate 😁

      @Ving-ex9yn@Ving-ex9yn11 ай бұрын

    • @@Sydrooo Yes, this worked for me as well. Thank you for explaining this to us!

      @GregT-gf9ny@GregT-gf9ny9 ай бұрын

  • 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

    @wandanichikanda5567@wandanichikanda5567 Жыл бұрын

    • I have the same problem, have you figured out what was wrong???

      @Sydrooo@Sydrooo Жыл бұрын

  • Please add video calling voice calling and story uploading please complete it

    @shahnawazattar7991@shahnawazattar7991 Жыл бұрын

  • can we have the timestamps, please?

    @tomcat1112k@tomcat1112k Жыл бұрын

  • how to create aws account without debit or credit card?

    @wildanyazidziddan284@wildanyazidziddan284 Жыл бұрын

  • how to resolve this error message : The variables input contains a field that is not defined for input object type 'CreateUserInput'

    @BhoomikaR-rr1tt@BhoomikaR-rr1tt Жыл бұрын

    • 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.

      @the_southlander475@the_southlander475 Жыл бұрын

  • Hi! How you fix the message input text problem when keyboard show? 2:55:25

    @fperez.-@fperez.- Жыл бұрын

    • I see that no issue in minute 3:08:48 but I didn't see where you fix that. Thank you in advance! 🤗

      @fperez.-@fperez.- Жыл бұрын

    • are you use android platform?? if yes, i can give my keyboardAvoidingView to you

      @wildanyazidziddan284@wildanyazidziddan284 Жыл бұрын

  • Will i make any money after making this app.?

    @marioanduha7152@marioanduha715210 ай бұрын
KZhead