Multi-Modular Ecommerce App For Android & Ios (Kmp)

From Figma to KMP: Design & Build an E-Commerce App for Android & iOS using Firebase SDK & Compose Multiplatform.

What you'll learn

Build an Ecommerce App for Android & iOS

Share the UI Layer using Compose Multiplatform framework

From Figma to Jetpack Compose (UI Design process)

Multi-modular Architecture for Scalable Apps

Shopping Cart feature to allow Users to add Products

Automated Emails when a New Order is created

Admin Panel

Pay on Delivery feature

Pay with PayPal integration

Kotlin Multiplatform technology

Firebase KMP SDK

Firebase Firestore (+ Security rules)

Firebase Authentication

Firebase Storage

Firebase Cloud Functions

Firebase Cloud Messaging

Push Notifications

CRUD operations

and more!

Requirements

Knowledge of Jetpack Compose framework

Knowledge of Kotlin programming language

Knowledge of Android Development

Description

From Figma Design project, to the actual Android and iOS application.We're gonna build a complete E-commerce solution from scratch, and I mean truly from scratch. Together, we'll design the UI in Figma, and then bring that design to life using Jetpack Compose — for both Android and iOS — using Kotlin Multiplatform.What’s Inside?We’ll follow a clean, multi-modular architecture with the MVVM pattern to keep the project scalable, maintainable, and production-ready.Our app will be a food supplements store, featuring products from multiple categories. And yes — we’re building for real-world usage.Key FeaturesUser Authentication – Sign in with Google using Firebase Auth.Shopping Cart – Users can browse, select, and add products to their cart. Some products include customizable options like flavors.Checkout & Payments – We’ll implement two payment options:- Pay on Delivery- Pay with PayPal — and I’ll show you how to integrate the PayPal API to handle transactions securely.Email Order Confirmation – Once an order is placed, an automated email is sent with all the order details: product info, total price, payment method, and shipping details.Admin Panel – A secure area accessible only to store owners where you can add, update, or delete products.Backend with FirebaseWe’ll use a full suite of Firebase services:Authentication – Sign in with Google.Cloud Firestore – As our main database, with security rules.Firebase Storage – For storing product images.Cloud Functions – To automate email notifications.Cloud Messaging – For push notifications.30 Hours of Practical ContentThis course packs nearly 30 hours of high-quality, real-world development. I didn’t cut out the bugs, issues, or debugging moments — you'll see everything, so you can learn how to handle real development challenges.Who is this course for?This is not a beginner-level course. You should already be familiar with Kotlin and Jetpack Compose. If you're just starting out, I’d recommend learning the basics first.But if you're ready to take your skills to the next level and build a cross-platform, real-world E-commerce app using KMP, this course is packed with value and practical knowledge.Let's build something great!

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Is this course for you?

Lecture 3 Project Design Overview

Lecture 4 Project Architecture Overview

Lecture 5 Why Firebase?

Section 2: Introduction to Figma

Lecture 6 Getting Started with Figma

Lecture 7 Essential Design Tools & Techniques

Lecture 8 Variables and Tokens

Lecture 9 Styles

Lecture 10 Auto Layout

Lecture 11 Components and Variants

Section 3: Let's Design our NutriSport App!

Lecture 12 Clone my Design Project

Lecture 13 Choosing Font, Colors & Icons

Lecture 14 Design inspirations

Lecture 15 Authentication Screen

Lecture 16 BottomBar Component

Lecture 17 Spacing Principles in UI Design

Lecture 18 Secondary ProductCard Component

Lecture 19 Main ProductCard Component

Lecture 20 TopAppBar Component

Lecture 21 Shopping Cart Screen

Lecture 22 Empty Cart State

Lecture 23 Categories Screen

Lecture 24 Category Search Screen

Lecture 25 Empty Category Search State

Lecture 26 Button Component

Lecture 27 Details Screen

Lecture 28 Custom Navigation Drawer

Lecture 29 Profile Screen

Lecture 30 Dialog component

Lecture 31 Admin Panel Screen

Lecture 32 Add New Product

Lecture 33 Edit Product

Lecture 34 Checkout Screen

Lecture 35 Payment Processed Screen (Paypal)

Section 4: Project Setup

Lecture 36 Project Source Code

Lecture 37 Development Environment requirements

Lecture 38 Dependencies

Lecture 39 Firebase Setup

Lecture 40 Splash Screen on Android

Lecture 41 Splash Screen on iOS

Lecture 42 Fonts, Colors and Resources

Section 5: Authentication

Lecture 43 Authentication Screen

Lecture 44 Sign in with Google implementation

Section 6: Navigation

Lecture 45 Navigation Setup

Section 7: Dependency Injection

Lecture 46 DI Setup

Lecture 47 Create a Customer

Section 8: Nested Bottom Bar Navigation

Lecture 48 Remember Authenticated state

Lecture 49 Bottom Bar component

Lecture 50 Nested Navigation

Section 9: Custom Navigation Drawer

Lecture 51 Update System Bars

Lecture 52 Custom Drawer component

Lecture 53 Animate CustomDrawer & HomeGraph

Lecture 54 Sign out the User

Section 10: Profile Screen

Lecture 55 Custom TextField component

Lecture 56 Alert TextFIeld component

Lecture 57 Primary Button component

Lecture 58 Profile Form

Lecture 59 Country Picker Dialog component

Lecture 60 Country Picker implementation

Lecture 61 Read the Customer information

Lecture 62 Test the iOS App

Lecture 63 Update a Customer information

Lecture 64 Info Card component

Section 11: Admin Panel

Lecture 65 Admin Panel feature

Lecture 66 Manage Product feature

Lecture 67 Category Dialog

Lecture 68 Photo Picker (Platform-specific) logic

Lecture 69 Create the Customer

Lecture 70 Upload a Thumbnail to Storage

Lecture 71 Update a Design in Figma - Photo Picker component

Lecture 72 Delete a Thumbnail from Storage

Lecture 73 Product Card

Lecture 74 Read the Last 10 Products

Lecture 75 Read Selected Product

Lecture 76 Update Selected Product

Lecture 77 Delete Selected Product

Lecture 78 Search Products

Lecture 79 Hide/Show AdminPanel navigation option

Lecture 80 3 Switch components

Section 12: Products Overview Screen

Lecture 81 Read Discounted products

Lecture 82 Main Product Card component

Lecture 83 Read New products

Section 13: Details Screen

Lecture 84 Details Screen

Lecture 85 Quantity Counter

Lecture 86 Add to Cart

Section 14: Cart Screen

Lecture 87 Cart Item Card component

Lecture 88 Read Cart Items and Products together

Lecture 89 Update the CartItem Quantity

Lecture 90 Delete CartItem from Customer

Lecture 91 Cart indicator

Section 15: Categories Screen

Lecture 92 Categories Screen

Lecture 93 Read Products by Category

Lecture 94 Search Category Products by Title

Section 16: Checkout Screen - Pay on Delivery

Lecture 95 Calculate the Total Amount from Cart

Lecture 96 Update Profile Information

Lecture 97 Create the Order

Lecture 98 Install Email Extension & Functions Setup

Lecture 99 Write & Upload the JS Script for Sending Emails

Section 17: Checkout Screen - Pay with PayPal

Lecture 100 Fetch an Access Token

Lecture 101 Start the Checkout process

Lecture 102 Handle an Intent on Android

Lecture 103 Create the Order for PayPal payment

Lecture 104 Handle a Deep Link on iOS

Section 18: Push Notifications

Lecture 105 Implement Push Notifications

Section 19: Security Rules

Lecture 106 Secure your Firestore Database

Kotlin programmers,Mobile developers,Android developers,iOS developers,Anyone who wants to build real Startup ideas,Anyone who wants to improve their Tech-Stack,Anyone interested in KMP Technology