This project focuses on improving the components of the Mart.ps mobile application, a leading online sales platform in Palestine. The website offers a wide range of products including clothes, jewelry, shoes, household items, etc. We aimed to enhance the user experience by improving critical components such as the login and sign-up pages and the product search results page. We aimed to align our improvements with the existing design identity of Mart.ps while optimizing functionality.
- Improve User Experience: Enhance the usability of key components like login, sign-up, and search results pages.
- Preserve Brand Identity: Maintain the existing visual identity of Mart.ps while introducing modern design improvements.
- Optimize Performance: Ensure that all enhancements contribute to the overall performance and responsiveness of the application.
- Collaborative Development: Use a micro-frontend architecture for parallel development and easier maintenance.
In this project, we focused on redesigning the Mart.ps app to enhance the user experience while preserving the original identity and branding of the website. We used the same website colors The redesign included improvements to the user interface (UI) and use experience (UX) components, such as the login and sign-up pages, and the product search results page.
You can view our Figma design file here: Figma File - Mart.ps App Improvement.
The chosen microfrontend architecture combines Kotlin and Flutter to leverage their respective strengths in mobile development.
- Kotlin is used for native Android components, providing seamless integration with Android and strong performance.
- Flutter is utilized for developing other components of the application, offering cross-platform capabilities and rich UI/UX features.
This architecture enables modular and scalable development, allowing teams to work independently on different parts of the application. This promotes rapid development and simplifies maintenance.
The communication between microfrontends is managed through a Publish-Subscribe (Pub-Sub) pattern using communication channels.
- Publisher: A component that sends messages on specific topics without knowing which components will receive them.
- Subscriber: Components that listen for relevant messages and react accordingly.
This model decouples the components, ensuring that changes in one part of the application do not directly affect others. It enhances the robustness of the system and facilitates easy scaling or modifications.
Microfrontends are deployed and integrated into the main application through a single APK file.
- All microfrontends are developed, tested, and integrated together within the main application.
- During the build process, these components are combined and packaged into a single APK, ensuring a seamless and unified application experience for users.
This strategy allows each microfrontend to be updated independently, eliminating the need for a complete rebuild of the entire application. This approach speeds up the release cycle and simplifies the deployment process.
The chosen method for integrating microfrontends in the Mart.ps mobile application involves modular assembly using APK files. Each microfrontend is developed as an independent module, which is then integrated into the main application during the build process. This approach allows for the combination of native Android components written in Kotlin and cross-platform components developed in Flutter, ensuring seamless interaction within the application.
The specific points of integration within the main application include:
- User Interface Components: Integration of UI elements such as login, sign-up, and product search results pages, ensuring a consistent design language across microfrontends.
- Shared Services: Integration of shared services like authentication, data fetching, and state management to maintain coherence in user interactions across different parts of the application.
- Navigation: Seamless navigation between microfrontends is managed to provide a unified user experience, leveraging Flutter's Navigator and Kotlin's native navigation components.
While integrating microfrontends, several challenges may arise:
-
Inconsistent Design Language: Ensuring a cohesive look and feel across components developed in Kotlin and Flutter can be challenging.
Solution: Establish a unified design system with shared styles and components to maintain visual consistency. -
Performance Overhead: Combining different frameworks may introduce performance overhead, affecting the app's responsiveness.
Solution: Optimize performance by minimizing communication overhead between microfrontends and using lightweight data exchange formats.
By addressing these challenges with strategic solutions, the integration of microfrontends can enhance the Mart.ps mobile application's modularity and maintainability while providing a seamless user experience. .
The deployment of the Mart.ps microfrontend application follows a streamlined process to ensure efficient integration and release:
-
Build Process: The entire application, including all microfrontends developed in Kotlin and Flutter, is built together using Gradle. This unified build process ensures that all components are compiled and packaged simultaneously, maintaining compatibility and reducing complexity.
-
Integration: Microfrontends are integrated directly within the main application as part of the single APK build. This approach ensures that all components are seamlessly combined into one cohesive application without the need for independent modules.
-
Testing: The integrated APK undergoes testing, including UI tests, to verify that all features work as expected across the entire application.
-
Release: The finalized APK is deployed directly to the production environment. This ensures that users receive a single, consistent application experience with each update.
- Production Environment: The single deployment environment where the application is made available to end-users. This environment requires the highest level of stability and security to ensure a reliable and seamless user experience.
- Gradle: The primary tool used for building, integrating, and managing dependencies of all microfrontends. Gradle handles the entire process from compiling the source code to packaging the final APK, ensuring a smooth and efficient deployment pipeline.
Before you begin, ensure you have the following software and tools installed:
- Flutter SDK: Flutter Installation Guide
- Kotlin: Kotlin Setup
- Android Studio: For Android development Download Android Studio
- Clone the Repository
git clone https://github.com/CBSE-summer2024/team6.git
- Install Dependencies
- For Flutter:
flutter pub get
- For Kotlin: Open the project in Android Studio and sync the Gradle files.
- Running the Project
- Start the Flutter Application
flutter run
- Build the Kotlin Components Use Android Studio to run or debug the native Android modules.
Development Tools
- Flutter: For developing cross-platform components.
- Kotlin: For native Android components.
- Gradle: For build automation.
- Git: For version control.
- Deploying Flutter Apps Across Platforms: A comprehensive guide to deploying Flutter applications on iOS, Android, and the web.
Read the full article here
