Mobile App Development Course with React Native, Supabase, Next.js

Post Content

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 Read More freeCodeCamp.org

#programming #freecodecamp #learn #learncode #learncoding