Mô tả

Do you want to become an expert in building mobile apps using React Native/JavaScript? And how about Firebase as a database system? Do you want to build an instant messenger just like WhatsApp?

If so, you’re in the right place! This course will guide you step by step in creating your own WhatsApp clone COMPLETELY from scratch.

We’re talking the kind of app that will amaze anybody that sees it. The kind of app that will get you hired in no time!

Why let me teach you?

I work as a Software Engineer at Microsoft where I build products used by millions of people all over the world! I want to take the skills I’ve gained through years of working with some of the best developers in the world and transfer them directly to you!

I’ve taught tens of thousands of students here on Udemy and created some of the most popular development courses available!

Okay so what’s the course about?

I will personally guide you, step by step, in creating your own social network site just like WhatsApp complete with:

  • Instant messaging in real time

  • Sending image messages

  • Group chat support

  • Profile pictures

  • Group chat photos

  • Message replies

  • A full user search

  • Settings pages

  • and much more!

Whether you are a beginner* or an experienced programmer, this course will be massively beneficial to you.

Why should I take the course?

In the programming world, the “big 4” often consists of Google, Microsoft, Facebook and Amazon. To get a job at any of these companies, you absolutely MUST know the essentials like JavaScript. In addition to this, React Native is incredibly hot right now so learning this will be a huge deal to an employer.

If you take this course, you will have nothing to worry about because we use all of these skills extensively!

Support: 

By enrolling in this course, you will have the COMPLETE support of a Microsoft Software Engineer (me). I'm always ready to answer any question you may have. Programming issues, errors, feature requests, general programming advice - it doesn't matter, I'm always happy to help! I always aim to respond to questions within a few hours and it's also worth noting that I've answered EVERY SINGLE question asked so far.

Future course discounts:

By enrolling in this course, you will get access to ALL of my current and future courses for the lowest possible discount we as instructors are capable of offering on Udemy - FOREVER

Project portfolio:

The site you create in this course will be the highlight of your project portfolio! Any potential employer who see's this project on your resume will want to hear all about it. The reason? They know that a project like this means you're familiar with the wide range of technical skills they need their employees to know.  

Fun!

Finally, this project is a lot of fun and I know you'll have a great time implementing your own unique ideas as well as the ones we implement together. What are you waiting for? 


* Although this course is suitable for beginners, it is not an introduction to development course. I won't go into much detail when explaining the basic programming concepts but I'm here to help if you want more of an explanation - just let me know!

Bạn sẽ học được gì

Learn how to use react native to create mobile apps

Learn how to create an instant messaging system

Learn how to use Firebase to store data

Learn how to create registration systems allowing users to sign up to your app

Yêu cầu

  • A computer (Mac or Windows recommended)
  • Some knowledge of JavaScript and React is strongly recommended

Nội dung khoá học

26 sections

Introduction

10 lectures
Intro video (from course landing page)
01:16
How to ask questions
00:35
What is Expo?
02:05
Creating our project!
06:00
A quick rundown of the project structure
06:03
Where do I find the source code?
02:43
Some useful VS Code extensions
02:34
Running the app on a real device
02:34
Running the app on an Android emulator
06:03
Running the app on an iOS emulator
02:32

React Native basics - quick overview

6 lectures
Styling elements
03:57
Buttons
03:33
SafeArea
05:56
Hooks - useState
09:10
Hooks useEffect
05:13
Hooks - useCallback
07:11

Fonts and splashscreens

4 lectures
Picking a custom font
04:10
Showing a splash screen while loading
09:25
Adding a custom splash screen
02:17
Setting custom fonts
06:44

Adding the navigation system

10 lectures
Installing React Navigation
05:14
Creating the stack navigator
06:59
Fixing the screen display
02:38
Navigating to a screen on button press
04:17
Configuring the navigation options
04:43
Adding bottom tabs
06:24
Configuring the titles of our navigators
03:48
Displaying icons on our bottom tabs
10:39
Separating our navigator into its own file
04:22
Separating the 'logged in' navigator
05:51

Chat screen UI

9 lectures
Creating the chat screen
03:35
Setting the background image
03:54
Handling the chat safe area
03:56
Buttons with icons
06:03
Styling the textbox and buttons
04:32
Showing a send button as the user types
05:14
Styling the send button
03:14
Handing a message being submitted
02:37
Fixing the textbox being hidden behind the keyboard
05:15

Sign up screen

12 lectures
Creating the sign up screen
03:37
Adding a page container component
07:30
Creating a custom input component
05:33
Adding an icon to the input
07:30
Styling the label
02:05
Styling the textbox
02:16
Displaying error text
05:27
Creating a custom submit button
07:09
Submit button title, onPress and remaining style
03:21
Switching between sign up and sign in forms
09:55
Setting the form image
04:29
Prevent keyboard from hiding the form
04:31

Form validation

12 lectures
Handling text changed
06:04
Validation demo
05:02
First name and last name validation
07:20
Refactoring the validation functionality
03:14
Improving the return value
01:14
Validating emails and passwords
03:16
Improving our textboxes
03:22
Validating the sign in form values
05:32
Managing form state with useReducer
08:40
Evaluating the whole form's validity
05:06
Evaluating the whole sign in form validity
04:40
Displaying the error messages
03:20

Creating the user's account (signing up)

25 lectures
Getting the form values
05:51
Creating our Firebase project
06:33
Firebase helper file
02:34
Authenticating a user with Firebase
05:49
Handing 'email already in use' errors
04:29
Displaying errors
04:34
Adding a loading spinner
03:13
Sending user data to the database
11:19
Using Redux toolkit to manage app state
04:14
Configuring out auth slice
03:53
Saving auth info to the state
07:52
Accessing data from the state
02:57
Going to the main page when they sign up
01:54
Saving sign in data to storage
05:12
Creating the start up screen
05:36
Handling when storage is empty
05:31
Handling an expired token
03:50
Auto logging in if a token exists
05:20
Clearing the storage - forcing the log out
01:54
Signing in
08:11
Handling sign in errors
04:37
Fixing error: "Can't perform a React state update on an unmounted component"
00:52
Logout timer
05:53
Loading spinner for the sign in form
01:40
'test mode' for quick sign in
03:15

Settings page

20 lectures
Adding a custom page title element
04:38
Fixing the margin of the settings page
01:39
Adding the input fields
10:17
Setting the initial values of the input fields
04:59
Adding the save button
04:03
Updating the user in the database
08:08
Logout button
04:00
Updating the state with the new data
05:48
Hiding the submit button when there are no changes
05:35
Outputting the default user profile image
04:39
Styling the user image
03:12
Adding an 'edit' icon
04:56
Requesting permission to access the user's images
10:21
Opening the image picker
04:11
Updating the page to show the new image
05:21
Getting the image blob data
07:58
Uploading images using Firebase Storage
12:47
Saving the uploaded image to the user's database data
05:40
Updating the state data with the new profile picture
02:56
Image upload loading spinner
04:53

Searching for users to chat with

11 lectures
Adding the 'create chat' header button
08:16
Opening the new chat page
08:56
Creating our user search box
04:53
Showing a message when no results were found
06:23
Searching after the user stops typing
06:43
Searching for users
10:23
Outputting search results
05:54
Adding fake users
03:42
Creating our search result component
05:24
Styling the search results
06:31
Hiding the profile image edit button
04:17

Creating a new chat

6 lectures
Selecting the user we want to chat with
06:43
Storing found users in the state
11:39
Getting the user data from the stored users
06:10
Showing a message when it's a new chat
05:13
Styling the new chat message bubble
06:10
Creating the chat when a message is sent
12:18

Retrieving chats

9 lectures
Getting the user chats when the app starts
07:29
Unsubscribing the firebase listeners
04:46
Getting the data for each of the user's chats
03:50
Saving the chat data to state
07:42
Showing a loading spinner while we load the chats
03:26
Iterating the chat list
06:39
Setting the stored users on login
08:51
Outputting the user data
06:39
Navigating to the chats on press
04:05

Sending messages

4 lectures
Sending text based messages
06:47
Updating chat data when message is sent
03:06
Adding messages to app state when the app loads
07:25
Displaying the latest message text underneath the chat
03:57

Outputting chat messages

4 lectures
Showing an error message when messages fail to send
05:29
Only retrieving messages for the chat we're looking at
05:18
Styling message that we sent
06:16
Styling the messages sent by others
02:45

Message context menu (additional message actions)

4 lectures
Reacting to long presses on the messages
07:29
Opening the context menu on long press
09:57
Copy to clipboard menu option
04:35
Customising the menu item components
07:17

Starring messages

7 lectures
Calling the star message function
07:33
Adding starred messages to the database
04:02
Adding and removing starred messages in the app state
04:51
Setting the initial starred messages state
04:29
Updating the menu option for star and unstar
04:25
Showing a star icon next to the message
02:04
Outputting the date next to the message
06:00

Replying to messages

7 lectures
Selecting a message to reply to
05:04
Creating our reply component
04:53
Styling the reply section
02:40
Cancelling the reply
02:21
Sending the reply to the database
03:03
Showing the message we're replying to
05:00
Finishing touches to the replies
03:06

Sending image messages

8 lectures
Opening the image picker
03:56
Showing the popup image confirmation
07:53
Uploading chat images
09:25
Sending the image message
06:41
Outputting uploaded images
04:32
Bug fix: Creating a new chat by sending a message
02:57
Sending pictures from your camera
05:08
Scrolling the chat to the bottom on new message
03:58

Creating group chats

14 lectures
Creating a 'new group' button
02:49
Creating the chat name textbox
05:42
Adding the 'create' button
04:57
Creating the user checkboxes
06:31
Selecting users for our group chat
06:17
Outputting the selected users
07:37
Removing a selected user when pressed
02:26
Styling the selected users list items
05:49
Scrolling the selected users list to the end
02:38
Handling the 'create' button press
07:41
Opening an existing chat if one with that user exists
04:06
[Bug fix]: Fixing space at bottom of screen when on a new chat
03:48
Some small UI updates when it's a group chat
04:49
Outputting the sender name when it's a group chat
03:23

Chat user settings page

6 lectures
Creating the chat settings button
03:38
Creating the contact screen
03:16
Showing the contact's name and profile image
06:44
Getting the common chats
05:32
Outputting the common chats
04:13
Navigating to the common chats when clicked
03:35

Chat settings page

8 lectures
Navigating to the chat settings page
04:54
Changing the group chat image
08:54
Using the chat image elsewhere
01:26
Creating the form handler for updating the chat name
07:33
Updating the chat name
06:48
Showing a success message when the name is updated
01:27
Creating a section for displaying the chat users
06:57
Outputting chat users
06:15

Removing users from chats

8 lectures
Showing the remove from chat button
02:53
Showing a loading spinner while a user is bring removed
03:40
Removing the user from the chat in the database
04:07
Removing the chat from the user's chat list
07:04
Sending info message 'User A removed User B from the chat'
05:17
Styling the info messages
03:49
Leaving chats
10:05
Bug fix: Prevent remove from chat button showing when not in group chat
00:48

Viewing all chat users on a separate page

5 lectures
Adding the view all users button
03:37
Navigating to the data list screen
02:17
Setting the title of the data list screen
02:38
Outputting all the users of the chat
05:41
Data list item on press
03:15

Adding new users to a chat

6 lectures
Excluding existing participants from search results
04:28
Updating the UI if we're adding users to an existing chat
04:02
Passing the selected users to the previous screen
03:52
Adding the chat to the user's chat list
05:16
Saving new users in the chat data
02:24
Sending a confirmation message when a user has been added
06:16

Viewing starred messages

3 lectures
Showing the button to view start messages
02:28
Outputting the starred messages
05:44
Showing starred messages on the settings page
04:50

Sending push notifications

8 lectures
Configuring the app for push notifications
10:21
Sending test push notifications
03:30
Storing the device push tokens on sign in
10:40
Removing push tokens on logout
07:10
Bug fix: Can't logout when auth token has expired
01:32
Sending push notifications when a message is sent
08:29
Sending push notifications when an image is sent
01:54
Handing the notification click event
04:57

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.