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

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

--

[codewithlari]

Thank you so much for sharing ❤. I’m honored to contribute. 🎉

[billbrocker]

Lari, You have a vast knowledge of the entire React native mobile app dev stack. And you do an amazing job of diving right in and sharing all the details. This is, by far, the best online tutorial I've ever seen. Thanks so much!

[Allthingslearningg]

Can I just suggest one thing, please ask the instructors to explain as to why a certain line of code is being written, or if it is a lengthy topic please provide any resources with which the users can learn! This would emphasize learning while making the projects and not only copy pasting the code. But thanks for the hard work FCC ❤

[Kudadise]

Thank for sharing, this is so amazing. I will be here for more than 24 hrs.

[chabelbossa]

Thank you very much! From Benin 🇧🇯🇧🇯🇧🇯

[rahuljha]

I just completed the video and created my first project using react native.
It's time to get a job .
Thank you

[soumyajeetdas]

Please make a course on jetpack Compose with firebase and retrofit also

[mindless_b]

I want learn react native and here is masterpiece

[ijustseen-sth]

Hi! can someone please help me? i have a problem on 3:29:54, I'm trying to generate types but getting an error of unknown flag: --project-id. What is can be wrong?

[catherinebhicks]

Please put captions on your videos.. they're completely unaccessible to me without them and just good practice in general. YOu can't rely on the trash auto generated captions that are usually unrecognizable with high tech tutorials. You will reach way more people if you make your videos fully accessible.

[tabotcharlesbessong]

Follow this amazing tutorial almost till the end, but am having issues with the payment part

[saisaurav]

Hi, I have just started this course, Do we need to install android studio or other tools to simulate android device?

[abdulateefsakariyau]

Successfully just finished the whole course just now. And i can say it a really well thought out course

Now am just gonna àdd React native to my portfolio 😊

Thanks alot free code camp

[moussaf]

Hi, I'd like to follow this tutorial because I've already done Reactjs but there are other things I've never worked with like NextJs or Supabase. Is it necessary to have a basic knowledge of all the subjects covered or are we being taught? Thanks a lot!

[erikfrostnordquist]

Fantastic course! I made it all the way up to 2:52:24. Before adding this trigger, I can make an account. After the trigger, I get an error message like this:

LOG Supabase sign up response: {"authData": {"session": null, "user": null}, "error": [AuthApiError: Database error saving new user]}
ERROR Supabase sign up error: [AuthApiError: Database error saving new user]

I don't know what could possibly be the reason for it and ChatGPT or Cursor don't know either. Do you?

[dertsy]

Wouldn't it be better to use Zustand for the authentication state and not with React Context/Provider?

[Nori-sp]

Why is it showing me a blank black screen by default? Does somebody know how to fix it? i have followed everystep until 7:03

[babajideibiayo]

Hi, Just came accross this course and I'm excited to start it. However I use a windows 10 system, and I have no option to start expo using an IOS simulator, so I can follow along

[FlushItGolf]

Man, I watched this whole thing trying to see how the app is deployed via iOS and android with supabase backend— only shows the admin page being deployed. Are there specific changes in eas or app that need to be configured for production deployment ?

[DipChaudhary-pd]

product 1:21:07 [slug] not work i all ready reload the app but still not work