Multi-Modular Ecommerce App for Android & iOS (KMP)

Discover how Figma enables real-time collaboration in a cloud-based design tool, offering UI/UX design, wireframes, prototypes, design systems, and reusable components.

Explore essential Figma tools and shortcuts to design efficiently, including move, hand, scale, frame, and text tools, plus auto layout, guides, and padding for responsive mobile layouts.

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.

Explore how styles and variables in Figma differ, including how variables reference other variables while styles cannot, and how to organize colors, typography, and effects with tokens.

Master auto layout in Figma using frames to build dynamic, responsive components. Adjust padding, gap, alignment, and hug contents to create fill container layouts with min/max width and height.

Learn to create and manage reusable components and variants in Figma, using main components and instances to build scalable cards and buttons across your designs.

Explore typography, fonts, color palettes, and icons for the multi-modular ecommerce app, using Bebas Neue, Roboto Condensed, Roboto, feather icons, hero icons, and material icons.

Explore authentic, custom UI design for a multi-modular ecommerce app by studying related designs on Dribbble and Behance, and reusing proven components without copying.

Design the authentication screen for a multi-modular ecommerce app, creating splash and sign-in interfaces in Figma with frames, auto layout, typography, and a Google sign-in button.

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.

Learn spacing principles that impact usability, readability, and aesthetics across web and mobile. Apply the four point grid system with increments and design system guidance to create balanced interfaces.

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.

Implement the main product card at the top of the home screen with a dynamic 50% width and 80% side cards in a row, including a gradient overlay.

Learn to build a reusable top app bar for the home screen of a multi-modular ecommerce app, with a black gradient overlay for readable text and customizable icons.

Design a shopping cart screen as a top-level destination with a flexible top app bar and reusable cart item components that support plus/minus quantity controls, delete actions, and checkout.

Design the empty cart state with an icon and text, top-aligned item cards with a darker stroke, and a bottom bar indicator controlled by a show indicator property.

Create a categories screen in the bottom navigation to display product categories such as protein, creatine, gainers, pre-workouts, and accessories, and use reusable category components with color tokens and search.

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.

Duplicate the category search screen to its empty state, add an info box with 'we couldn't find any product' and a cat icon, rename to /empty, reuse Figma components.

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.

Design a detail screen that shows product thumbnail, price, weight, and description, enables quantity and flavor chips selection, and adds the product to cart.

Design a custom navigation drawer that slides and scales the main screen to 90%, revealing items like profile, blog, locations, contact us, sign out, and admin panel visible to admins.

Design profile screen for multi-modular ecommerce app, showing user info and shipping address, with a disabled button state and fields for name, email, city, postal code, address, country, and phone.

Turn the profile edit field into a clickable element that opens a material three dialog to search and select country dial codes, with a dial picker and icons.

Design and implement an admin panel screen that lists all products, supports search by title, and enables adding or updating products, with a floating action button and role-based access.

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.

Edit a product screen by duplicating the layout, updating the title, weight, description, price, and thumbnail, and adding a delete action via a vertical menu.

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.

Create a payment processed screen with success and error states, plus a disabled checkout variant for missing address or phone. This design blueprint guides Jetpack Compose implementation.

Set up a multiplatform development environment with Android Studio as the main IDE and Xcode for iOS on macOS, and verify readiness using k doctor.

Build a cross-platform Nutri Sport app for Android and iOS with Kotlin Multiplatform and the Compose Multiplatform UI. Share the shared UI and data strategy across platforms.

Create a new Google Cloud Platform project and link it to a new Firebase project, sign in with the same account, and set up analytics before starting Firebase authentication.

Learn to implement an Android splash screen: design a 240x240 SVG logo in Figma, import it as a vector asset, add the splash dependency, and apply the splash theme.

Learn to implement an iOS launch screen by creating an adaptive logo, adding and centering an image view, and linking the launch screen to support light and dark themes.

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.

Implement sign in with Google using Firebase for the multi-modular ecommerce app, configuring Google auth providers and Firebase initialization for Android and iOS.

Set up type-safe navigation for the multi-modular ecommerce app by implementing a never host with a nav controller, creating a serializable authentication screen, and updating iOS and Android testing flows.

Create a top-level dependency injection module and initialize the coin library across Android and iOS. Wire core, compose, and viewmodel dependencies to enable injection for modules and lifecycle-aware viewmodels.

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 remember-authenticated state to auto-navigate users to the home graph from the authentication screen using a start destination based on current user id.

Define a bottom bar destination enum (icon, title, screen), move the screen to shared module to avoid dependencies, and implement bar with 12 dp radius, surface color, and 24/36 padding.

Demonstrate nested navigation in a home graph with a bottom bar and nested destinations (products overview, cart, categories), using a nav controller, single top behavior, and state restoration.

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.

Construct a custom navigation drawer in a multi-modular android app, defining drawer state, items, and UI components, and integrate the 60/25 percent layout behind the home graph for later animation.

Animate the home graph with a custom drawer using screen width, offset, and scale, toggle icons, and color and shadow changes for a polished Android and iOS experience.

Sign out via a suspend repository function using Firebase authentication, navigate to the authentication screen on success, and define a request state sealed class with idle, loading, success, and error.

Create a custom text field for the profile screen in a Kotlin multiplatform project, implement error borders using color tokens, and align design tokens with Android Studio.

Build alert text field composable in Android Studio that opens an alert dialog to pick a dial code, then applies it on confirm, used across profile and manage product screens.

Create a reusable primary button component for the multi-modular app, with optional icon, enabled/disabled states, and material 3 styling, refactored into the shared module and used in the profile screen.

Design a reusable profile form composable in the shared module with custom text fields: first name, last name, email, city, postal code, address, country, and phone, plus an alert field.

Design and implement a country picker dialog for the multi-modular ecommerce app, featuring a selector, country items, flag icons, dial codes, search filtering, and animated selection in Compose.

Improve the country picker by fixing placeholder visibility, adding an empty state for missing dial codes, and implementing a reusable error card and dialog with stateful interaction.

Read and display the authenticated customer's core fields from Firestore on a profile screen, using a read customer flow and a profile view model with a request state.

Test the iOS app in Xcode and the iOS simulator, fix a Kotlin native cache issue in Gradle properties, and apply ignore safe area to match navigation colors.

Implement a suspend function to update a Firestore customer document with user validation and onsuccess/onerror handling, wiring the profile screen to update name, city, postal code, address, and phone.

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.