Chapters (79)
- 0:00Intro
- 7:06Create a new React Native Expo Application
- 8:47Expo Router tutorial
- 12:32Expo Router File-based routing (Create Pages)
- 17:56Master Layouts in Expo Router
- 35:50Build Home Page
- 58:13Dynamic Pages in Expo (Category Page)
- 1:05:11Zustand in React Native (Cart State)
- 1:19:15Product Details Page Build
- 1:32:48Cart Page Build
- 1:44:20Orders Page Build
- 1:51:58Order Details Page Build
- 1:57:52Auth Page Build
- 2:09:34Supabase Intro
- 2:14:21Supabase Auth Provider
- 2:32:06Supabase Login in React Native
- 2:39:35Supabase SQL, Triggers, Functions
- 2:56:30Row Level Security Supabase
- 3:01:30Bootstrap NextJS Application with Typescript
- 3:10:06Master Routing in NextJS
- 3:17:46Supabase, Server Side Rending and Supabase Types
- 3:31:25Supabase Email and Password Authentication
- 3:44:02Authorization and Routes Protection in NextJS
- 3:51:01Role Level Security / Authorization
- 3:57:48Layout in NextJS
- 4:09:45Signout And Theming
- 4:13:25Category Table Supabase
- 4:21:51Fetch Category Server Action
- 4:28:03Product Schema and Row Level Security
- 4:36:02Category Page Setup
- 4:48:05Code walkthrough
- 4:55:41Category Page UI Implementation
- 5:04:02Category Page UI Completion
- 5:58:16Create Category And Supabase Storage
- 5:24:14Update And Delete Category
- 5:37:51Product Page Setup
- 5:44:30Code walkthrough
- 5:53:38Create product Schema
- 5:59:25Product CRUD actions
- 6:09:58Product Page Utility Setup
- 6:24:29Product Page Layout
- 6:39:55Project Walkthrough So Far
- 6:42:12React Query
- 6:45:40Fetching Products and Categories
- 6:51:06Supabase types React Native
- 6:56:57Displaying Categories
- 6:59:01Display Product Details Page Data
- 7:04:05Category Details Page
- 7:09:31Cart Page Fixes
- 7:14:28Orders Supabase
- 7:20:33Display Orders
- 7:29:01Create Order Function
- 7:33:36Create Order Item function
- 7:40:11Create Order Item
- 7:52:46Order Details Page
- 8:03:59Orders Page
- 8:05:55Fetching Orders With Products
- 8:11:00Fetching Orders Page Component
- 8:15:13Orders Management Table
- 8:21:16Order Action View Order Products
- 8:31:06Order Status Select Dropdown
- 8:34:19Order Status Change Server Action
- 8:37:47Order Update Real-Time Subscription
- 8:45:16Supabase Local Setup
- 8:58:56Using Environment Variables in Expo
- 9:03:26Stripe Integration and Edge Functions
- 9:20:13Stripe Checkout
- 9:34:53Supabase Migrations and User Schema Update
- 9:41:37Create Stripe Customer
- 10:06:41EAS Setup
- 10:09:44Notification Setup
- 10:18:38Testing Push Notification on A Real Device
- 10:23:26Product Category Chart
- 10:39:58Latest Users Chart
- 10:50:32Landing Page Setup
- 10:59:08Hero Section
- 11:05:35Home Page Completion
- 11:11:28Deployment To Vercel
- 11:22:02Deployment Fixes
Show the creator's full description
Learn native mobile app development using React Native, Supabase, Stripe, and Next.js. In this course from @codewithlari, you'll learn to build a complete gadgets-selling platform. This course will help you master both front-end and back-end development.
💻 Code (ADMIN): https://github.com/laribright/gadgets-shop-admin
💻 Code (React Native Shop): https://github.com/laribright/gadgets-app-react-native
❤️ Try interactive React courses we love, right in your browser: https://scrimba.com/freeCodeCamp-React (Made possible by a grant from our friends at Scrimba)
⭐️ Contents ⭐️
0:00:00 Intro
React Native Section
0:07:06 Create a new React Native Expo Application
0:08:47 Expo Router tutorial
0:12:32 Expo Router File-based routing (Create Pages)
0:17:56 Master Layouts in Expo Router
0:35:50 Build Home Page
0:58:13 Dynamic Pages in Expo (Category Page)
1:05:11 Zustand in React Native (Cart State)
1:19:15 Product Details Page Build
1:32:48 Cart Page Build
1:44:20 Orders Page Build
1:51:58 Order Details Page Build
1:57:52 Auth Page Build
Supabase Section
2:09:34 Supabase Intro
2:14:21 Supabase Auth Provider
2:32:06 Supabase Login in React Native
2:39:35 Supabase SQL, Triggers, Functions
2:56:30 Row Level Security Supabase
NextJS Admin Panel
3:01:30 Bootstrap NextJS Application with Typescript
3:10:06 Master Routing in NextJS
3:17:46 Supabase, Server Side Rending and Supabase Types
3:31:25 Supabase Email and Password Authentication
3:44:02 Authorization and Routes Protection in NextJS
3:51:01 Role Level Security / Authorization
3:57:48 Layout in NextJS
4:09:45 Signout And Theming
4:13:25 Category Table Supabase
4:21:51 Fetch Category Server Action
4:28:03 Product Schema and Row Level Security
4:36:02 Category Page Setup
4:48:05 Code walkthrough
4:55:41 Category Page UI Implementation
5:04:02 Category Page UI Completion
5:58:16 Create Category And Supabase Storage
5:24:14 Update And Delete Category
5:37:51 Product Page Setup
5:44:30 Code walkthrough
5:53:38 Create product Schema
5:59:25 Product CRUD actions
6:09:58 Product Page Utility Setup
6:24:29 Product Page Layout
6:39:55 Project Walkthrough So Far
Dynamic Contents In React Native
6:42:12 React Query
6:45:40 Fetching Products and Categories
6:51:06 Supabase types React Native
6:56:57 Displaying Categories
6:59:01 Display Product Details Page Data
7:04:05 Category Details Page
7:09:31 Cart Page Fixes
7:14:28 Orders Supabase
7:20:33 Display Orders
7:29:01 Create Order Function
7:33:36 Create Order Item function
7:40:11 Create Order Item
ADMIN ORDERS MANAGEMENT
7:52:46 Order Details Page
8:03:59 Orders Page
8:05:55 Fetching Orders With Products
8:11:00 Fetching Orders Page Component
8:15:13 Orders Management Table
8:21:16 Order Action View Order Products
8:31:06 Order Status Select Dropdown
8:34:19 Order Status Change Server Action
8:37:47 Order Update Real-Time Subscription
PAYMENT INTEGRATION
8:45:16 Supabase Local Setup
8:58:56 Using Environment Variables in Expo
9:03:26 Stripe Integration and Edge Functions
9:20:13 Stripe Checkout
9:34:53 Supabase Migrations and User Schema Update
9:41:37 Create Stripe Customer
PUSH NOTIFICATIONS
10:06:41 EAS Setup
10:09:44 Notification Setup
10:18:38 Testing Push Notification on A Real Device
10:09:44 Realtime Admin Order Status Notification
FINAL ADMIN BUILD
10:18:38 Orders Chart
10:23:26 Product Category Chart
10:39:58 Latest Users Chart
LANDING PAGE BUILD
10:50:32 Landing Page Setup
10:59:08 Hero Section
11:05:35 Home Page Completion
DEPLOYMENT
11:11:28 Deployment To Vercel
11:22:02 Deployment Fixes
🎉 Thanks to our Champion and Sponsor supporters:
👾 Drake Milly
👾 Ulises Moralez
👾 Goddard Tan
👾 David MG
👾 Matthew Springman
👾 Claudio
👾 Oscar R.
👾 jedi-or-sith
👾 Nattira Maneerat
👾 Justin Hual
--
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
Description and video by freeCodeCamp.org. This page is an independent companion view; the video is embedded from YouTube.