Dreamhubb

A mobile interface for two platforms

Dreamhubb is a cross-platform mobile application for iOS and Android. My contribution was frontend development. I therefore present it as experience with the user-facing part of a mobile app, without claiming ownership of the entire product.

The challenge

Develop the user interface of a mobile application targeting both iOS and Android.

The solution

My work focused on the application frontend using Vue 3, Quasar and Capacitor. The technology stack also includes TypeScript and Pinia.

Vue in a mobile environment

The recorded stack combines Vue 3, Quasar and Capacitor with TypeScript and Pinia. This is a different technical approach from the React Native stack used in FitUp. I will add the specific screens and features I worked on based on the actual scope.

My contribution

Frontend development for a cross-platform mobile application using Vue 3, Quasar and Capacitor.

Predictable screen state

The example distinguishes loading, successful loading and failure. It gives an interface an explicit indication of what to display. It is not the actual Dreamhubb application data model.

// Illustrative example 
type ScreenState<T> =
  | { status: "loading" }
  | { status: "ready"; data: T }
  | { status: "error"; message: string };

async function loadScreen<T>(
  request: () => Promise<T>,
): Promise<ScreenState<T>> {
  try {
    return { status: "ready", data: await request() };
  } catch {
    return { status: "error", message: "Please try again." };
  }
}