Let's build WhatsApp with React Native and AWS Amplify [p3] 🔴
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...
Part 2: • 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
01:54 Getting started
05:20 Changes to data model
08:00 Sorting messages
52:05 Listening to new messages using GraphQL subscription
01:05:00 Listen for chat room updates
01:25:30 Creating groups
01:59:51 Displaying group information
02:10:11 Delete a user from a group
02:41:35 Adding a user to a group chat
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! I need to spend like 6 hours to follow up 3 hours tutorial :D Worth it. Thanks!
Love the series! I am coding along adding my own layout and styling and learn so much especially on the backend side since I am new to aws amplify.. Would be cool if you could add voice and video call function and make it 100% production ready. I appreciate your effort, keep up the great work, we are all learning so much here!
Greenting from Villa Nueva, Guatemala. Thank you for your great way to explain and make this code understandable.
Love this series! Thank you so much for this series.
Please add audio and video calling features also status as well. I really appreciate your effort. Thank you so much.
Add video call voice call and status as well
nice man keep up the work!
Yes please add voice call and video call
I have a question about the sorting in graphql... how to sort by any field I want? It's not very clear to me that GSI with sorting... like in sql query you simply write "... ORDER BY columnName" for example, I need to have the option to sort stores by createDate, name, or rating and so on whats the equivalent of this in the graphql api?! And of course thank you so so much for all the great information you provide.
the series is awesome but i want to know how to video and audio call using my own server could you help me out
Is there a way we can sort the main message screen to display the latest message and then use the pagination?
Yes, it is possible to sort the main message screen to display the latest message and then use pagination. One way to do this is to query the messages from the backend using a timestamp sorting order, and then implement pagination by using the "offset" and "limit" parameters to retrieve a specific page of messages. Another way is to use the AWS AppSync GraphQL service which allows you to sort and paginate the messages.
@@notjustdev do we need to update something in the schema to implement the sort and pagination? Because in the tutorial, the list of messages was sorted manually using const sortedRooms = rooms.sort( (r1, r2) => new Date(r2.chatRoom.updatedAt) - new Date(r1.chatRoom.updatedAt) );
@@notjustdev Can you please do a tutorial for this?
@@notjustdev will there be any adjustment in the graph schema to handle the sorting of type ChatRoom @model by updatedAt?
@@notjustdev In this schema, is there a way to sort ChatRooms using the ChatRoom updatedAt field? type User @model @auth(rules: [{allow: public}]) { id: ID! name: String! status: String image: String Messages: [Message] @hasMany(indexName: "byUser", fields: ["id"]) ChatRooms: [ChatRoom] @manyToMany(relationName: "UserChatRoom") }
i getting a weird response. if I start a chat, it appear on chatsscreen, then if a create a group the previous chat appear again but if a log out and return everything is okay
And the group name don´t appear on the chatscreen, just the name of one participant even if I deleted it.
Чел ты же русский? У тебя акцент наш.
I am from Moldova