Full Stack - Mobile App Development with React Native, Supabase, Next.js

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

⭐️ 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