Okebiz Video Search



Title:Build a Realtime Chat App in React Native (tutorial for beginners) πŸ”΄
Duration:03:49:50
Viewed:625,141
Published:10-10-2020
Source:Youtube

Let's build a Realtime Chat mobile application in React Native based on Whatsapp UI design.
πŸ“šEnroll in "The Full-stack Mobile Developer" and become a 6-figure dev in 2021: https://academy.notjust.dev/

Download the Asset Bundle (Images, Dummy data, PDF presentation): https://assets.notjust.dev/whatsapp

Join the notJust Development gang and let's build together: https://discord.gg/VpURUN2
Source code: https://github.com/Savinvadim1312/Wha...

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.

LinkedIn: https://www.linkedin.com/in/vadimsavin
IG: https://www.instagram.com/vadimsavin0
Twitter: https://twitter.com/SavinVadim_

Timecodes
0:00 Intro
9:47 Initialize the React Native project
15:22 Project structure
16:35 React Navigation
50:57 Chat List Item Component
1:31:05 Chat Rooms List (FlatList)
1:48:34 Chat Screen
2:51:17 Chat Input Component
3:23:16 Floating Button (New Chat Room)
3:45:52 Demo

#VadimSavin #notejust.dev #notJustDevelopment

SHARE TO YOUR FRIENDS


Download Server 1


DOWNLOAD MP4

Download Server 2


DOWNLOAD MP4

Alternative Download :



SPONSORED
Loading...
RELATED VIDEOS
πŸ”΄ Let's build Uber 2.0 with REACT NATIVE! (Navigation, Redux, Tailwind CSS & Google Autocomplete) πŸ”΄ Let's build Uber 2.0 with REACT NATIVE! (N...
45:06 | 342,876
Build a Secure Realtime Chat App in React Native [3] (tutorial for beginners) πŸ”΄ Build a Secure Realtime Chat App in React Nativ...
59:46 | 16,736
PALESTRA DE ABERTURA | XI ENCONTRO NACIONAL DE EDUCAÇÃO PALESTRA DE ABERTURA | XI ENCONTRO NACIONAL DE ...
07:25 | 645
πŸ”΄ Let's build Whatsapp 2.0 with NEXT.JS! (1-1 Messaging, Live Status, Styled-Components, React.JS) πŸ”΄ Let's build Whatsapp 2.0 with NEXT.JS! (1-...
48:00 | 266,474
πŸ”₯ App de Agendamento para Barbeiros em React Native para iniciantes πŸ”₯ App de Agendamento para Barbeiros em React...
50:42 | 654,419
πŸ”΄  Build the Uber clone in React Native (Tutorial for Beginners) πŸ”΄ Build the Uber clone in React Native (Tut...
43:51 | 309,165
πŸ”΄ Build the Airbnb app in React Native [ Advance UI ] πŸ”΄ Build the Airbnb app in React Native [ Adv...
19:05 | 43,715
Realtime Chat App in React Native and AWS (Backend) πŸ”΄ Realtime Chat App in React Native and AWS (Back...
29:01 | 56,330

shopee ads

coinpayu