3 apps, 1 codebase

Pictodice is a mock-app where users can explore & play with dice sets, create custom designs and ultimately add dice to a cart.

The primary motivation here is to experiment with the concept of a "universal app" by leveraging Ionic Capacitor, and maintain open-ended "kitchen sink" project.

A single codebase powers multiple front-end clients:

• Web: typical web app (core)
• Android: hybrid native (Ionic)
• iOS: hybrid native (Ionic)

Beyond simple static pages

To flirt with limits, the user experience goes beyond simple static pages, and includes heavy use of HTML canvas for dice rendering and interactivity, as well leverages device features such as motion sensors. In later phases this would include a canvas drawing library, and integrate a device's files system and camera.

Tech features include...

• Vue/Nuxt SPA with transitions, etc
• HTML canvas
• Real-time physics
• Drawing layer (FabricJS)
• Motion sensors (if available)

These resources are intensive, and require extra scrutiny towards rendering & lifecycles. In the context of an SPA (single-page application), you don't have the benefit of a full browse refresh as the user moves through their journey, and memory leaks aside, without care it's easy to encounter issues where resources conflict or are unavailable at certain moments during the user experience.

Native-app or web-app, all paradigms have an unavoidable wrestling match: differences in device capabilities. This stands true here, as an example, dealing with motion sensors required some extra blood-and-sweat, as one device type (*cough* iPhone) needs different treatment for permissions and API use.

This project is publishable to 3 channels: Web, iOS and Android, via scripts. However, in practice, each channel has it's nuances and management needs to be planned for; there's no silver bullet.

Publishing challenges

This project is publishable to 3 channels: Web, iOS and Android, via scripts. However, in practice, each channel has it's nuances and management needs to be planned for; there's no silver bullet.

Publishing for web is a relative piece of cake, considering the project core is natively for-web to begin with. That being said, web still has it's complications however the tools, solutions and support are vast and anything is possible.

Both iOS and Android are complex ecosystems that have all kinds of mysterious options, and moreover, are curated systems with rules. Regardless of an app being native or hybrid, with any walled garden, there's a baseline familiarity that's required... thorns.

The "holy grail" (single codebase) does exist, but like any project or machine, with proper planning and management, it can be a "well-oiled".

What's next

There are current bugs to squash (ie iOS not publishing), I have on mind continuing to build this "kitchen sink" project.

• Dice customization (drawing)
• Photo upload (ie face-on-die)
• Search & filters
• Universal UI + Storybook
• Framework abstraction so it can be applied to other products (e.g. custom hats with 3d drawing)