ImmersiveAmbientModecolor: #e7ca7a (color 1)
Video Format : 22 (720p) openh264 ( https://github.com/cisco/openh264) mp4a.40.2 | 44100Hz
Audio Format: Opus - Normalized audio
PokeTubeEncryptID: 284e632fa1ed7185e58473fb169905d660551b110ac613fa75aea45d6dd51f2ca7c7a3709ea9587b5e43c7eecbd645c6
Proxy : eu-proxy.poketube.fun - refresh the page to change the proxy location
Date : 1715718781381 - unknown on Apple WebKit
Mystery text : SGRMYmF2dmZmbFEgaSAgbG92ICB1IGV1LXByb3h5LnBva2V0dWJlLmZ1bg==
143 : true
130,092 Views ā¢ Streamed live on Oct 16, 2020 ā¢ Click to toggle off description
youtube.com/live/mxXJSVW4tRY
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/WhatsappClone
š¬ Join the notJust Development gang and let's build together:
discord.gg/VpURUN2
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: www.linkedin.com/in/vadimsavin
IG: www.instagram.com/vadimsavin0
Twitter: twitter.com/SavinVadim_
#VadimSavin #notejust.dev #notJustDevelopment
Views : 130,092
Genre: Science & Technology
Date of upload: Streamed live on Oct 16, 2020 ^^
Rating : 4.963 (12/1,300 LTDR)
RYD date created : 2022-03-06T23:59:40.416777Z
See in json
YouTube Comments - 115 Comments
Top Comments of this video!! :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!
1 |
Great tutorial, Vadim! This is the second that I follow, I am learning much here!
1 |
This lesson is harder than first video, but it still very interesting! Thank you!
7 |
Great Work, congratulations!
1 |
Thank you very much for this !!! You just got new subscribers šš¤
1 |
You are amazing bro! Great content
1 |
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?
|
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?
|
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'
1 |
kindly help me bro, did expo supports video call,if supports can you provide any example for that
|
Hi Vad! I was wondering if you have a github example that is a AWS react Native/Expo that use microservices?
|
hello, I am Mr. Sonam I'm a newcomer to your channel. and happy to be part of this group
|
thanks so much for this tutorial
|
How to import a dynamic mutation and let the value entered get stored in the database?
|
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
|
And I can't see qureries.ts file in src folder.
Maybe I made mistake for amplify?
Can you explain the reason?
2 |
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!
|
Editou onde? Ficou muito bom
|
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.
|
@VikramSingh-qg3nh
2 years ago
I'm a newcomer to your channel. The content you've been putting out is truly amazing. So helpful while following it along. Kudos
2 |