Wonderous Compose

Checkout live web version based on WASM here shreyashkore.github.io/wonderous-compose-wasm/

For the version based on JS see shreyashkore.github.io/wonderous-compose-js/

Note: Some gestures do not work on the web/desktop platforms. For scrolling horizontally use Shift + Scroll.

🚧 WORK IN PROGRESS 🚧

Contributions are welcome!

Wonderous Compose is a port of Wonderous in Compose Multiplatform. Wonderous Compose is a visual showcase of eight wonders of the world. The original project was built by team gskinner using Flutter. This project is a tribute to their original work, with an aim to explore the design possibilities with Compose.

Artworks and logos are taken from the original project's GitHub repo. Public-domain artwork from The Metropolitan Museum of Art, New Your. Photography from Unsplash.

Outline

• Home Screen shows the usage of HorizontalPager along with AnimatedVisibility for animating foreground and background elements.
• ArtifactList Screen uses ArtifactListViewModel view model for business logic.
• ArtifactDetails Screen demonstrates writing business logic in the UI layer itself.
• Editorial Screen uses LazyColumn layout and its scroll APIs to drive animations/transitions for elements when they appear on the screen.
• Map View demonstrates how KMP and Compose's interoperability layer can be used to embed native UIs in Compose.
  • For Android Google Map compose library is used.
  • For IOS MKMapView is used.
  • For web Wasm Html interop library is used to draw DOM elements on canvas. This allows us to use OpenLayers for displaying OpenStreet maps.
  • For desktop; mapview-desktop module is copied from the official compose samples. This sample uses OpenStreetMap data to draw map tiles on Compose Canvas.
• The Photo Gallery screen makes use of a custom layout and also uses a custom gesture detection modifier.
• Timeline screen uses TimelineState which is kind of a view controller for managing state of timeline. It manages conversion of year to scroll position and vice versa.

Libraries Used

• Ktor: HTTP networking
• AndroidX Navigation: Navigation
• Coil: Image Loading
• compose-webview-multiplatform: WebView for Android, IOS and Desktop
• maps-compose: Maps on Android

Source Sets

This project uses experimental DSL to configure custom hierarchy.

applyDefaultHierarchyTemplate {
    common {
        group("nonWeb") {
            withAndroidTarget()
            withNative()
            withJvm()
        }
        group("web") {
            withJs()
            withWasm()
        }
    }
}

Here 2 additional intermediate source sets are created to share code among web platforms.

• nonWeb contains all the targets except JS and WASM.
• web contains only the JS and WASM targets

TODO

• [x] WASM support

• [ ] Collectibles and My Collection Screen

• [ ] Localization

• [ ] Gesture support on Web and Desktop platforms

• [X] Shared Element Transition on the home screen

• [x] Haptics

Set up the environment

For compose multiplatform setup information checkout the documentation.

• Add Google Maps key in local.properties at the project root.

MAPS_API_KEY=YOUR_KEY

• Add key.properties at the project root (For the lazy ones like me; Just remove signingConfigs and keyProp block from composeApp/build.gradle.kts).

storePassword=storePassword
keyPassword=keyPassword
alias=myKey
path=path/To/key.jks