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 🚧

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

• For navigation, the PreCompose library is used. This has a similar API to the AndroidX navigation library.
• Home Screen shows the usage of HorizontalPager along with AnimatedVisibility for animating foreground and background elements
• ArtifactList Screen uses a ViewModel to store business logic.
• ArtifactDetails Screen demonstrates writing business logic in the UI layer itself.
• Editorial Screen uses LazyColumn layout and usage of scroll APIs to drive animations 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 leaflet.js and an iframe(for the satellite view) to show the map.
  • 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.

Source Sets

This project uses experimental DSL to configure custom hierarchy.

applyDefaultHierarchyTemplate {
    common {
        group("nonWeb") {
            withAndroidTarget()
            withNative()
            withJvm()
        }
        group("jsWasm") {
            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.
• jsWasm contains only the JS and WASM targets

TODO

• ~~WASM support~~
• Collectibles and My Collection Screen
• Localization
• Gesture support on Web and Desktop platforms
• Shared Element Transition on the home screen
• ~~Haptics~~

Set up the environment

Warning You need a Mac with macOS to write and run iOS-specific code on simulated or real devices. This is an Apple requirement.

For compose multiplatform setup information checkout its template repo.

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

MAPS_API_KEY=YOUR_KEY