
Discover how Firebase streamlines cross-platform mobile apps with real-time updates, offline caching, authentication, Cloud Functions, and a generous free tier for rapid, scalable back-end development for Android and iOS.
Learn how to use variables in Figma, including color, text, number, and boolean types, and manage tokens for colors, typography, and spacing with a single source of truth.
Create a reusable bottom bar component in Figma for the home screen, adding home, cart, and categories icons, configuring auto layout, padding, color tokens, and selectable variants.
Create a secondary product card component that displays thumbnail, title, weight, price, and a truncated description for catalog items, with padding, borders, and responsive layout.
Polish the category search screen by hiding the empty cart action, setting the category title color, and displaying product cards with a top bar search to filter within the category.
Learn to fix icon rotation and implement a reusable button component for a detail screen in a multi-modular ecommerce app, including enabled/disabled states and optional icon support.
Create a new product screen in the admin panel with a thumbnail upload, and input fields for title, description, weight, flavors, and price, plus a bottom add new product button.
Design a checkout screen that shows user information and total price, with PayPal as the primary payment and pay on delivery as a secondary option, plus order detail emails.
Centralize fonts, colors, and font sizes in a shared module for a multi-modular app, add Bebas Neue and Roboto Condensed, and expose icons and images via a resources object.
Learn how to build an authentication screen for a multi-modular Android and iOS app using KMP, including a loading Google sign-in button, custom fonts, and alpha states.
Define the customer domain and cart item models, implement a Firestore repository, and wire sign-in flow via dependency injection to create a customer document with default null fields.
Enable edge-to-edge layout on Android by making the status bar and navigation bar transparent, allowing app content to fill the full screen and customize colors for system bars.
Introduce an info card component to show error and success messages in the profile screen, replace the error card, and implement postal code validation with a loading indicator.
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 Features
User 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 Firebase
We’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 Content
This 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!