Let’s build a Realtime Chat mobile application in React Native based on Whatsapp UI design.
📚 Enroll NOW for “The Full-stack Mobile Developer” and save 30%
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/WhatsappClone
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
Tag me on social media when you finish the Whatsapp Clone, and I will give you feedback on your code.
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)
#VadimSavin #notejust.dev #notJustDevelopment