GauravChaddha1996 / Phantom-Android

A fashion e-commerce app made with Jetpack Compose, Koin, Moshi, Material Design 3 and Coil.

Phantom-Android

A fashion e-commerce app made with Jetpack Compose, Koin, Moshi, Material Design 3 and Coil.

It's powered by a Golang backend using MySQL as database and Redis cache for querying and filtering.

The backend repository is hosted .

The app

Learnings

• Jetpack Compose
  • It is wonderful to use, it's easy to grasp, reduces lines of code, offers many setups outside the box, it will definitely be how android engineers make their app's UI one-day.
  • But it's not fully mature as the current Android UI framework.
  • The framework is a fundamental different way of modelling UI, it resembles what engineers today try with their current UI framework, but Compose ensures that the rules are enforced in architectural fashion.
  • It was also easy to implement multi-theme support and dark-mode.
• Koin, a powerful DI solution, which can cater to a small single module application.
• Material design 3
  • Offers a new breath of UI and integrations in Jetpack Compose making it easier to implement.
  • But not all components are present in implementation form in either frameworks, the old or the new ones.
• Coil, the coroutine driven image loader, is very easy to use and offers everything Glide does, just better with sweet kotlin syntax.
• buildSrc from Gradle
  • A pretty-way to maintain dependencies separate from main-code modules
  • But any change requries a full-sync, which works for a project this size, but not a multi-module large project.
• Moshi, while powerful, is very opioninated compared to GSON which parsed any structure.

Code-structure

The dependencies of the project are described in buildSrc, a special module for gradle.

The app module code is divided into following packages and files:

1. Database layer
   • Holds the DB Data models, DAO’s to access them to maintain saved products cart
2. Koin
   • Holds different modules for DI.
3. Network
   • Configurations of Moshi, Retrofit and OkHttp lives here
4. Screens
   • Base folder holds the base components like activity (supporting for bottom sheet on any page), curator, view model with basic setups etc.
   • Other screens like splash, home page, category, product and cart live here with their specific logic
   • Each screen follows the basic principle of MVVM and folder separation
5. Theme
   • Holds the AppTheme and Color and Font helpers, and dark-mode and multi-theme support.
6. UI
   • Holds different folders containing UI composables for basic components text, list, grid, button, ghost, card, commons etc.
   • Snippets folder contains snippets composables that can be used on any screen

Some things to note:

1. Each base data like text, font, color, button, image etc. offers a setDefault method, they only override if backend data isn't present.
2. Each snippet data can set their default UI in their setDefault overridden method
3. The curator calls setDefault on each snippet data it processes, ensuring app-side defaults take thier place if needed i.e. backend value wasn't present.
4. Clicks of snippets are driven using ClickData, which are handled with best effort generically across the app.