Imaginarie App

Imaginarie is a fun, imagination-focused meditation app, available on the App Store & Google Play. It's a hybrid mobile app built mostly in Vue, with custom Java and Swift code for key features like audio playback and subscriptions.

Founder, Full-stack Developer, Designer, Branding

JavaScript, Java, Swift

Vue, Vuex, Vue Router, Vuetify, Sass
Firebase (Firestore, Cloud Functions, Auth, Storage, & more)
Ionic Capacitor, Android Studio, Xcode
Revenue Cat, Google Analytics
Hammer.js, Lottie
Figma, Illustrator

This project started when my mom started writing "imagination cards" to help people think kinder, happier thoughts. After prototyping on index cards and passing them around to friends, I volunteered to use my new coding skills to turn them into an app. After several name-changes, redesigns, and pivots, it's now live on the app stores.

See the Imaginarie Marketing Site page to learn more about the Webflow website & blog.

Made with Vue,
built for iOS & Android

• Build native apps for iOS & Android using one codebase and my favorite JavaScript framework—Vue.
• Get accepted by the app stores.

• Built the web app using Vue for the frontend and Firebase for the database and backend functions.
• Added Capacitor as the native wrapper to turn the web app into an installable hybrid app. It worked even better than I expected, I'm a big fan.
• Figured out Xcode and Android Studio, and learned enough Swift and Java to write my own plugins for advanced native functionality.

Seemless audio playback

• Native audio that can play in the background and be controlled with lock screen controls and Now Playing widgets.
• Support for playlists, autoplay, and sleep timers.

• For native audio, there weren't any existing Capacitor plugins that met all my requirements, so I built my own using Exoplayer for Android and the Apple Media Player API. This was definitely the most challenging feature in the entire app, and the one that had me dive the furthest into Java and Swift.
• Since the audio can be controlled either from the lock screen/widget or within the app, the Vue app is in constant communication with the native layer.
• Users can change tracks, turn auto-play on and off, or change the sleep timer at any time, so the Vuex state tracks which tracks should play and when they should stop and syncs with the native player.

Responsive swipe navigation

• Horizontally swipe between pages in the app in a way that feels native—handling quick swipes, longer pans, and reversing direction.
• Lazily render as few items in the DOM as possible, so the total number of items doesn’t affect performance
  
• Programmatic navigation—with every swipe, update the route, send data to Analytics, etc.

• Built a custom swipe component that tracks the user's gesture using Hammer.JS and updates the state and renders items accordingly.
• There are a lot of edge cases to handle with gestures, so the implementation is fairly complex. I wrote a tutorial with exactly how I did it if you're curious!

Welcoming sign-up flow

• Don't lose users before they've had a chance to try out the app. But encourage them to create an account eventually.
• Cover all authentication scenarios and errors in a friendly way.

• Used Firebase Authentication with native plugins to handles Google and Apple sign-in.
• Custom UI with over 20 screens to cover all scenarios.
  (Using the pre-built Firebase UI is way easier, but wouldn't work well for my hybrid scenario).
• Added anonymous sign in so users can try out the app, and then upgrade to a permanent account.

Cross-platform subscriptions

• Add in-app purchase subscriptions for iOS and Android as easily as possible.
• Don't get rejected by the App Store.

• This is just a plug for RevenueCat, which makes it way easier to implement subscriptions and manage them in one place.
• Created a Capacitor plugin to use their native SDKs for making and tracking purchases.

Relaxing & fun design

• Create a design and visual language that makes the app feel like a welcoming place to use your imagination.
• Keep the app simple and usable for all tech savviness levels

• From the beginning, the cards were categorized and the colors came naturally. The background reminds me of layers of rolling hills, and goes from light to deep, like our categories.
• Prototyped and designed the app in Figma.
• Many iterations and a few total redesigns. The app icon went through the most, and was the last piece of our visual design puzzle.