React Native Full Stack Mobile Development Masterclass - 8 Hour Course

Overview

Embark on a comprehensive 8-hour masterclass in Full Stack Mobile Development, focusing on React Native and Supabase. Build a robust Food Ordering Application from scratch, covering both frontend and backend development. Learn essential skills including UI design, backend integration, authentication, CRUD operations, real-time data handling, payment processing with Stripe, and push notifications. Master TypeScript, Expo Router, and Supabase integration while following a structured approach through UI development, backend implementation, and production-ready features. Gain hands-on experience with practical assignments and explore advanced concepts like image handling, state management, and API integration. By the end of this intensive course, acquire the expertise to create scalable and feature-rich mobile applications using cutting-edge technologies.

Syllabus

Introduction and Structure
Module 1 Overview: UI
Module 2 Overview: Backend
Module 3 Overview: Production
Asset Bundle and Project Guide Download
Development Environment Configuration
Setting Up a Fresh Expo Project
UI Development
Text Rendering and Styling
Replacing Hardcoded Data
Image Rendering and Styling
Custom Component Creation
Fixing UI Issues
Implementing TypeScript Path Aliases
FlatList Implementation
Flatlist Edge Cases
Image Fixes
Expo Router Screens
Creating Screens with Expo Router
Code Structure for Screens
Product Details Screen
Select Size Component
Managing Selected Size with State
Shopping Cart Implementation
Using Modals
Sharing Data with React Context
Rendering Shopping Cart Items
Additional Shopping Cart Features
Application Overview
Admin Side Introduction
Admin Side Screens Structure
Creating a Product Screen
Working with Text Inputs and Forms
Image Picker Implementation
Product Screen Overview
Update and Delete Product
Module 1 Final Overview
Assignment 1 Solution
Assignment 2 Solution
Update Order Status Feature
Orders Top Tab Navigator
Module 2 Overview: Backend
Creating and Configuring Supabase
Configuring Supabase in React Native
User Session Management
Admin Side Authentication with Supabase
Product CRUD Operations
Products Table Creation
Reading Products by ID
Creating Products
Updating Products
Deleting Products
CRUD Operations Overview
Typescript Integration with Supabase
Orders CRUD Operations
Reading Orders
Creating Orders
Linking Order Items
Updating Orders
CRUD Operations Overview
Real-Time Data with Subscriptions
Enabling Real-Time Subscriptions
New Orders Subscription
Order Status Change Subscription
Testing Real-Time Updates
Storage with Supabase
Storage Implementation
Downloading Images
Image Scaling with CDN
Module 3 Overview: Production
Bug Fixes and Polish
User Logout Functionality
Local Supabase Setup
Admin Account Creation
Integrating Stripe Payments
Stripe Payments Resources
Payment Flow Explanation
Stripe Key Setup
Stripe Payment Intent Creation
Payment Collection Form
Stripe Customer Creation
Linking Stripe Customers
Creating Stripe Customer
Push Notifications Overview
Expo Application Services Integration
Push Notifications Services Comparison
Setting Expo Push Notifications
Implementing Remote Push Notifications
Sending Remote Notifications
Supabase Remote Env Variable Setup
Outro