šŸ’ŽUnlock Premium Features
By - freeCodeCamp.org

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

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

freeCodeCamp.org

0 mins
53377+ students

šŸ“ About This Course

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

šŸš€ What You'll Learn

āœ“

Complete understanding of the topic

āœ“

Hands-on practical knowledge

āœ“

Real-world examples and use cases

āœ“

Industry best practices

Premium

Get Full Course Access

Take your learning to the next level with premium features

Unlimited access to all chapters
Interactive quizzes & assessments
Downloadable certificate