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

Overview

Embark on a comprehensive mobile app development journey spanning nearly 12 hours, mastering React Native, Supabase, Stripe, and Next.js to build a complete gadgets-selling platform. Dive into Expo Router for efficient navigation, implement state management with Zustand, and create dynamic pages for categories, products, and orders. Explore Supabase for backend functionality, including authentication, SQL operations, and row-level security. Develop a NextJS admin panel with server-side rendering, route protection, and role-based authorization. Integrate React Query for data fetching, implement CRUD operations for products and categories, and set up real-time order management. Incorporate Stripe for payment processing, add push notifications, and create insightful charts for the admin dashboard. Conclude with building a landing page and deploying the entire application to Vercel, equipping you with end-to-end skills in modern mobile and web development.

Syllabus

Intro
Create a new React Native Expo Application
Expo Router tutorial
Expo Router File-based routing Create Pages
Master Layouts in Expo Router
Build Home Page
Dynamic Pages in Expo Category Page
Zustand in React Native Cart State
Product Details Page Build
Cart Page Build
Orders Page Build
Order Details Page Build
Auth Page Build
Supabase Intro
Supabase Auth Provider
Supabase Login in React Native
Supabase SQL, Triggers, Functions
Row Level Security Supabase
Bootstrap NextJS Application with Typescript
Master Routing in NextJS
Supabase, Server Side Rending and Supabase Types
Supabase Email and Password Authentication
Authorization and Routes Protection in NextJS
Role Level Security / Authorization
Layout in NextJS
Signout And Theming
Category Table Supabase
Fetch Category Server Action
Product Schema and Row Level Security
Category Page Setup
Code walkthrough
Category Page UI Implementation
Category Page UI Completion
Create Category And Supabase Storage
Update And Delete Category
Product Page Setup
Code walkthrough
Create product Schema
Product CRUD actions
Product Page Utility Setup
Product Page Layout
Project Walkthrough So Far
React Query
Fetching Products and Categories
Supabase types React Native
Displaying Categories
Display Product Details Page Data
Category Details Page
Cart Page Fixes
Orders Supabase
Display Orders
Create Order Function
Create Order Item function
Create Order Item
Order Details Page
Orders Page
Fetching Orders With Products
Fetching Orders Page Component
Orders Management Table
Order Action View Order Products
Order Status Select Dropdown
Order Status Change Server Action
Order Update Real-Time Subscription
Supabase Local Setup
Using Environment Variables in Expo
Stripe Integration and Edge Functions
Stripe Checkout
Supabase Migrations and User Schema Update
Create Stripe Customer
EAS Setup
Notification Setup
Testing Push Notification on A Real Device
Realtime Admin Order Status Notification
Orders Chart
Product Category Chart
Latest Users Chart
Landing Page Setup
Hero Section
Home Page Completion
Deployment To Vercel
Deployment Fixes