Welcome to the documentation for the Jetpack Compose Multiplatform Shopping Application! This is a cross-platform application that is built using Jetpack Compose Multiplatform, a declarative framework for sharing UIs across multiple platforms with Kotlin. The application allows users to browse, search, and purchase products from a shopping catalog on Android, iOS, Desktop, Web, Automotive and AndroidTV.
1402-10-21.18.37.00.mp4
1404-01-15.16.22.38.mp4
1404-01-16.23.11.59.mp4
1404-01-22.13.07.55.mp4
If you like or are using this project to learn or start your solution, please give it a star. Thanks!
How to handle error in best practice
How to set up Convention Gradle Plugin in CMP
How to create custom Number Formatting in CMP
How to upload in CMP Using Ktor
| Feature | Status |
|---|---|
| Login, Sign Up | ✔️ Implemented |
| Home | ✔️ Implemented |
| Product Detail and Comments | ✔️ Implemented |
| Wishlist | ✔️ Implemented |
| Cart | ✔️ Implemented |
| Profile | ✔️ Implemented |
| Search | ✔️ Implemented |
| Category | ✔️ Implemented |
| Edit Profile | ✔️ Implemented |
| Manage Address | ✔️ Implemented |
| Payment Method | ✔️ Implemented |
| My Orders | ✔️ Implemented |
| My Coupons | ✔️ Implemented |
| Notifications | ✔️ Implemented |
| Setting | ✔️ Implemented |
Obviously it would be more updates, What we are working on these days?
- Product Comparison: Easily compare features, prices, and reviews of two products side by side for a smarter shopping choice.
Added AutomotiveApp — the application is now compatible with Android Automotive OS, making it available for in-car systems.
Introduced WebApp — access the app directly from your browser.
Added TvApp — enjoy the app on Android TV devices.
Introduced DesktopApp — the app now runs on desktop environments (Windows, macOS, Linux).
Improved the splash screen UI with smoother animations for a better user experience.
Integrated GoogleMap for enhanced address input.
Users can now select their location on the map before filling out address details, ensuring greater precision.
- Kotlin Multiplatform
- Kotlin Coroutines
- Compose Multiplatform
- Material3
- Ktor
- Datastore
- Compose Navigation and Type safety
- Koin
- Coil3
- Kotest
- Fake Data
Firs, let me say the backend is also in progress. You can find the backend source code here.
We appreciate any feedback or suggestions that you may have to help us improve the project.
We plan to add more features, improve the code quality, and make the application more user-friendly.
Our goal is to create a high-quality, multiplatform shopping application that demonstrates the power and flexibility of Jetpack Compose.
Please stay tuned for updates and feel free to contribute to the project by submitting pull requests or opening issues. Together, we can create a great shopping application that meets the needs of users across multiple platforms.
During the development of this project, i encountered several challenges that required creative solutions. Some of the key challenges I addressed include:
- Native Functionality Challenges: Implementing native functionalities posed challenges in image selection, camera access permissions, location access permissions, google maps, status bar customization, and image upload via Ktor.
- UI Testing: Developing comprehensive UI tests across multiple platforms presented challenges in ensuring consistent behavior and visual presentation.
- Unit Testing: Writing unit tests for shared code and platform-specific implementations required careful consideration of differences in testing frameworks and environments.
- User Session Management: Securely managing user sessions across platforms involved implementing robust authentication mechanisms while prioritizing privacy and security.
- UI/UX Design: Crafting an intuitive and visually appealing UI/UX for diverse devices presented creative challenges, driving iterative design processes.
These challenges underscored the complexity of developing a cross-platform shopping application and pushed us to innovate and refine our solutions continually.
The Jetpack Compose Multiplatform Shopping Application is built using the Clean Architecture and the MVI (Model-View-Intent) pattern.
Testing is a crucial aspect of software development to ensure the reliability and functionality of the application. In the Shopping-By-KMP project, we utilize various testing frameworks and tools to maintain the quality of our codebase.
This project features two powerful backend implementations: a Kotlin-based backend using Ktor for modern connected applications, and a Laravel + Livewire backend for managing an admin panel.
The Kotlin backend is built with Ktor, a modern framework for creating asynchronous web applications and services. It leverages Kotlin Coroutines for non-blocking execution and includes a set of carefully selected libraries to ensure security, scalability, and maintainability.
- Ktor – Framework to build asynchronous connected applications using Kotlin Coroutines.
- Exposed – Lightweight SQL library with a typesafe DSL and DAO support for PostgreSQL.
- PostgreSQL – Open-source, advanced object-relational database.
- Koin – Pragmatic and lightweight dependency injection framework for Kotlin.
- kotlinx-datetime – Multiplatform date and time library.
- Bcrypt – Java-based implementation of the bcrypt password hashing algorithm.
- Apache Commons Email – Simplified email-sending library built on JavaMail.
- ktor-openapi-tools – Plugin to generate OpenAPI specs with Swagger UI and ReDoc.
- Valiktor – Type-safe, fluent DSL for validating Kotlin objects.
This stack enables building reactive APIs, secure user management, and robust database interactions, all with a clean and maintainable architecture.
Alongside the Kotlin backend, the project also provides a Laravel + Livewire admin panel for managing the e-commerce platform.
- Admin Dashboard: Manage products, categories, orders, and customers seamlessly.
- Laravel & Livewire: Combine Laravel’s backend power with Livewire’s reactive UI components.
- Comprehensive API: Designed for extensibility and easy integration with the shopping platform.
✅ For development:
./gradlew :webApp:jsBrowserDevelopmentRun
✅ For production:
./gradlew :webApp:jsBrowserProductionRun
Contributions are welcome! If you have any feedback or suggestions, please don't hesitate to let us know. We appreciate your contributions and support. Also if you find a bug or would like to create a new feature, please submit a pull request.
This library is licensed under the MIT License. See LICENSE.txt
https://github.com/JetBrains/compose-multiplatform-ios-android-template https://github.com/JetBrains/compose-multiplatform
Developed by Mahdi Razzaghi Ghaleh
