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

Sonny Sangha

📩 Want coding problems (with solutions!) delivered to your inbox daily!?
Sign Up Here: https://www.papareact.com/universityofcode

I asked Sanity to hook up some free stuff for this video… They made a custom 🔥 boosted free plan 👉 https://www.sanity.io/sonny

🚨 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

DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Deliveroo, Uber, Tinder, Signal or their subsidiaries in any form. Copyright Disclaimer under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for education purposes.

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