Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Multi-Modular Ecommerce App for Android & iOS (KMP)
Introduction
Introduction (2:33)
Is this course for you?
Project Design Overview (13:21)
Project Architecture Overview (7:58)
Why Firebase? (3:56)
Introduction to Figma
Getting Started with Figma (12:05)
Essential Design Tools & Techniques (22:09)
Variables and Tokens (25:55)
Styles (5:46)
Auto Layout (19:42)
Components & Variants (14:33)
Let's Design our NutriSport App!
Clone my Design Project
Choosing Font, Colors & Icons (7:02)
Design Inspirations (6:19)
Authentication Screen (17:45)
BottomBar Component (12:09)
Spacing Principles in UI Design (10:29)
Secondary ProductCard Component (29:48)
Main ProductCard Component (17:29)
TopAppBar Component (17:41)
Shopping Cart Screen (25:10)
Empty Cart State (12:48)
Categories Screen (8:58)
Category Search Screen (5:37)
Empty Category Search State (1:16)
Button Component (11:11)
Details Screen (21:03)
Custom Navigation Drawer (17:05)
Profile Screen (9:41)
Dialog component (23:38)
Admin Panel Screen (7:07)
Add New Product (6:56)
Edit Product (6:53)
Checkout Screen (11:48)
Payment Processed Screen (Paypal) (7:58)
Project Setup
Project Source Code
Development Environment requirements (7:08)
Dependencies (13:27)
Firebase Setup (4:18)
Splash Screen on Android (11:00)
Splash Screen on iOS (6:12)
Fonts, Colors and Resources (26:20)
Authentication
Authentication Screen (27:46)
Sign in with Google implementation (39:40)
Navigation
Navigation Setup (8:34)
Dependency Injection
DI Setup (7:27)
Create a Customer (28:33)
Nested Bottom Bar Navigation
Remember Authenticated state (12:52)
Bottom Bar component (16:43)
Nested Navigation (16:31)
Custom Navigation Drawer
Update System Bars (1:53)
Custom Drawer component (22:55)
Animate CustomDrawer & HomeGraph (15:13)
Sign out the User (11:43)
Profile Screen
Custom TextField component (22:20)
Alert TextField component (13:24)
Primary Button component (15:51)
Profile Form component (23:18)
Country Picker Dialog component (41:27)
Country Picker implementation (15:33)
Read the Customer information (44:23)
Test the iOS App (5:06)
Update a Customer information (18:59)
Info Card component (11:09)
Admin Panel
Admin Panel feature (14:20)
Manage Product feature (21:43)
Category Dialog (19:49)
Photo Picker (Platform-specific) logic (17:03)
Create the Customer (24:15)
Upload a Thumbnail to Storage (30:26)
Update a Design in Figma - Photo Picker component (7:41)
Delete a Thumbnail from Storage (17:31)
Product Card (13:52)
Read the Last 10 Products (28:03)
Read Selected Product (12:33)
Update Selected Product (25:17)
Delete Selected Product (13:20)
Search Products (30:44)
Hide/Show AdminPanel navigation option (12:25)
3 Switch components (17:07)
Products Overview Screen
Read Discounted products (22:37)
Main Product Card component (14:53)
Read New products (17:43)
Details Screen
Details Screen (38:57)
Quantity Counter (12:43)
Add to Cart (16:25)
Cart Screen
Cart Item Card component (13:32)
Read Cart Items and Products together (26:36)
Update the CartItem Quantity (12:52)
Delete CartItem from Customer (3:12)
Cart indicator (6:04)
Categories Screen
Categories Screen (12:28)
Read Products by Category (21:16)
Search Category Products by Title (12:24)
Checkout Screen - Pay on Delivery
Calculate the Total Amount from Cart (17:26)
Update Profile Information (15:58)
Create the Order (27:56)
Install Email Extension & Functions Setup (16:14)
Write & Upload the JS Script for Sending Emails (18:16)
Checkout Screen - Pay with PayPal
Fetch an Access Token (20:08)
Start the Checkout process (27:06)
Handle an Intent on Android (29:32)
Create the Order for PayPal payment (25:12)
Handle a Deep Link on iOS (32:08)
Push Notifications
Implement Push Notifications (9:46)
Security Rules
Secure your Firestore Database (32:06)
Photo Picker (Platform-specific) logic
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock