React Native Crash Course for Beginners – Build 4 Apps in 14 Hours (Redux, Tailwind + More) [2023]

Sonny Sangha

🚨 Join the world’s BEST developer community “Zero to Full Stack Hero” NOW: https://www.papareact.com/course

🖥️ Join me as I build 4 Apps using React Native:

1️⃣ DELIVEROO with SanityCMS, GROQ, Redux, TailwindCSS & Navigation
2️⃣ UBER with Navigation, Redux, Tailwind CSS & Google Autocomplete
3️⃣ TINDER with Messaging, ContextAPI, Tailwind, Google Auth & Firebase
4️⃣ SIGNAL with 1 -1 Messaging, Navigation, Expo & Firebase

🕐 TABLE OF CONTENTS:

INTRODUCTION
00:00 Intro
01:39 Zero to Full Stack Hero
03:05 Sanity Sponsorship

1️⃣ DELIVEROO BUILD
05:23 Build Showcase & Explanation
12:03 Expo Explanation
13:03 Setting Up Expo & Tailwind CSS
26:30 Setting Up React Native Navigation
30:21 Building the Home Screen
36:18 Adding Heroicons
44:16 Building the Body Section
44:46 Building the Categories of the Body Section
46:19 Live Debugging
58:12 Building the Featured Rows
01:12:13 Adding Sanity
01:18:20 Adding and Changing Sanity Schemas
01:24:17 Adding Data in Sanity Studio
01:33:38 Querying & Pulling Data from Sanity Studio
01:51:01 Building the Restaurant & Restaurant Info Screen
02:04:19 Building the Menu Section
02:04:50 Building the Dish Rows
02:17:36 Explaining and Implementing Redux
02:25:19 Adding Add to Basket Functionality
02:34:19 Building the Basket Pop Up
02:41:49 Building the Basket Screen
02:47:51 Adding Grouping Menu Items Functionality
03:05:35 Building the Placing Order Screen with Animations
03:13:07 Building the Delivery Screen
03:19:11 Adding Map & Pin Functionality
03:26:00 Final Build Explanation and Demo

03:29:26 Intermission 1

2️⃣ UBER BUILD
03:30:41 Build Showcase & Explanation
03:35:22 Setting up Expo
03:47:34 Adding Redux
04:04:29 Building the HomeScreen Component
04:13:38 Building the NavOptions Component
04:22:23 Adding React Native Elements & React Native Navigation
04:40:16 Adding Google Autocomplete Library
05:06:26 Udemy Courses Suck!
05:12:56 Adding React Native Maps Library
05:26:25 Building the NavigateCard Component (1/2)
05:35:31 Adding the Directions API
05:44:00 Building the NavFavourites Component
05:51:15 Adding Keyboard Avoiding View
05:54:09 Building the NavigateCard Component (2/2)
06:00:11 Building the RideOptionsCard Component
06:16:56 Adding the Travel Time Calculation
06:25:51 Adding the Price Calculation
06:31:05 Building the Menu Icon
06:33:54 Live Debugging
06:35:05 Final Build Demo

06:36:47 Intermission 2

3️⃣ TINDER BUILD
06:39:17 Build Showcase
06:41:52 Build Explanation
06:44:08 Setting up & Explaining Expo
06:49:10 Setting up Tailwind React Native
06:55:51 Setting up & Adding React Native Navigation
07:05:17 Building the Home Screen (1/2)
07:07:35 Building the Login Functionality (1/2)
07:10:53 Creating a useAuth Custom Hook
07:14:27 Adding the Context API
07:19:23 Building the Login Functionality (2/2)
07:23:30 Setting up Firebase
07:23:59 Adding Firebase to the App
07:28:57 Adding Google Authentication
08:10:05 Optimising using useMemo
08:13:50 Building the Login Screen
08:22:02 Building the Header Section
08:37:24 Building the Cards Section
09:03:51 Building the Modal Screen
09:25:45 Building the Home Screen (2/2)
09:42:29 Adding the Swipe Functionality
09:57:36 Adding the Matching Functionality
10:09:48 Building the Match Screen
10:18:29 Building the Chat Screen
10:19:27 Building the Header Section
10:23:58 Building the Chat List/Row Section
10:42:41 Building the Message Screen (1/2)
10:45:24 Live Debugging
10:54:15 Building the Message Screen (2/2)
11:04:45 Adding the Sender & Receiver Message Functionality
11:18:18 Adding the Last Message Functionality
11:22:20 Final Build Demo

11:24:20 Intermission 3

4️⃣ SIGNAL BUILD
11:25:19 Build Showcase & Explanation
11:31:45 Setting up Firebase
11:32:19 Adding Firebase to the App
11:33:01 Starting the Build
11:37:48 Adding React Native Navigation
11:41:45 Building the Login Screen
11:46:05 Adding React Native Elements
11:58:27 Building the Register Screen
12:13:05 Adding Authentication
12:31:50 Building the Home Screen
12:56:27 Building the Add a New Chat Screen
13:11:48 Building the Chat Screen
14:02:35 Deploying the Final Demo App
14:11:26 Outro

#reactnative #javascript #beginner #tutorial #crashcourse #reactjs #redux