Android shopping app built with MVVM Clean Architecture (as a proof of concept).
This application was developed as a freelance project during my summer stint with Freelancer.com. The client of the application envisioned a comprehensive e-commerce application designed to provide an exceptional online shopping experience for their brand, ChillnCharm. ChillnCharm is a dynamic lifestyle brand dedicated to providing customers with the latest in technology, electronics, and casual fashion. Their goal was to offer customers a platform that seamlessly integrates robust functionality with a user-friendly interface, ensuring a smooth and engaging shopping journey for users.
To ensure the application's interface was intuitive and visually appealing, I utilized Figma to design the user interface. From wireframes to high-fidelity prototypes, I crafted a cohesive design system tailored to the client's brand identity. The design process involved creating interactive prototypes to test user flows, such as registration, product browsing, and checkout, ensuring the UI aligned with both user needs and modern e-commerce design standards. This collaborative process helped refine the app’s aesthetics, enhancing the shopping experience through clean layouts, responsive elements, and seamless navigation.
Breakdown:
- Wireframes and High-Fidelity Prototypes: I created low-fidelity wireframes to map out user flows (e.g., registration, product browsing, checkout) and then transitioned to high-fidelity prototypes for interactive testing.
- Design System: Developed a scalable design system with reusable components (buttons, typography, and color palettes) aligned with ChillnCharm's branding for consistency across screens.
- Responsive and Adaptive Design: Ensured seamless functionality across devices with varying screen sizes by adhering to Material Design principles, focusing on responsive layouts and interactive elements.
- Developer Handoff: Used Figma’s export and specification tools to streamline the integration of UI assets into Android Studio, ensuring efficient handoff and alignment between the design and implementation phases.
| Splash Screen | Login Screen | Sign-up Screen |
|---|---|---|
 |
 |
 |
| All Products Screen | Electronics Products Screen | Jewelery Products Screen |
|---|---|---|
 |
 |
 |
| Men's Clothing Products Screen | Product Details Screen | Shopping Cart Screen |
|---|---|---|
 |
 |
 |
| Wishlist Screen | Searching Screen | Profile Screen |
|---|---|---|
 |
 |
 |
| Edit Profile Screen 1 | Edit Profile Screen 2 |
|---|---|
 |
 |
The application employs a combination of Model-View-ViewModel (MVVM) architecture, the Repository pattern, and Clean Architecture principles. These methodologies were integrated to ensure a modular, scalable, and maintainable codebase with minimal coupling between components.
The project is organized into three distinct layers, implemented within a single module:
-
Data Layer: Manages data retrieval from various sources, including both local and remote. For this project, the remote data source is accessed via the FAKE STORE API using Retrofit, while the local data source utilizes ROOM Database for persistent storage.
-
Domain Layer: Contains the core business logic of the application. This layer interacts with the Data Layer through an abstraction, the Repository Interface, and processes data before passing it to the UI Layer.
-
Presentation Layer: Handles the display of content to the user. The ViewModel in this layer coordinates with the Domain Layer through use-case classes, managing data flow and reacting to user interactions.
A short walkthrough of the application is available below.
The screenshots, demo video, and design assets showcased in this repository are shared with the explicit permission of ChillnCharm, the client and owner of the application. These materials are intended solely for promotional purposes.
Intellectual Property: The client retains all rights to the ChillnCharm brand, application code, and proprietary content. Usage Restrictions: The shared materials (screenshots, video, etc.) may not be reproduced or reused without separate written consent from the client.
© ChillnCharm – Screenshots and demo video shared with permission. The app code is proprietary and not included in this repository.