Back to Portfolio

Selfie Time Kiosk Tablet: Flutter Refactor + New UI/UX + Backend Migration

Client

Selfie Time (PT Intinya Technology)

My Role

Fullstack Developer (Flutter + Electron/Express)

Duration

2 months

Tech Stack

Flutter (BLoC, Dio, AutoRoute, GetIt), Firebase Remote Config/Crashlytics/Analytics, Shorebird, kiosk-mode hardening, Electron + Express (backend)

Project Type

Internal / Private codebase

Private Repository
Selfie Time Kiosk Tablet - Home Screen

Project Overview & Business Context

This project is a full refactor of a legacy kiosk that previously ran on Meteor.js. The kiosk is revenue-critical and runs outside mobile app stores, so stability, recoverability, and controlled rollouts are as important as the user experience.

Over 2 months, I rebuilt the kiosk tablet application in Flutter with a new UI/UX and modernized the supporting backend server layer by migrating from Meteor to an Electron + Express architecture.

Primary User Flow

Home
  -> Scan QR / Input PIN
  -> Load transaction + validate
  -> Editing flow (collage/editor or auto-crop depending on product)
  -> Order/payment review (promo/voucher depending on config)
  -> Export/render + queue/print handoff
  -> Reset to Home (kiosk session hygiene)

Editing & Review UI

The editor flow is built to be guided and predictable for kiosk usage: users move through orientation, filters, layouts, backgrounds, and review, with clear navigation and session safety.

Selfie Time Kiosk Tablet - Editor Screen

My Role & Key Contributions

  • Rebuilt the kiosk app in Flutter (not a 1:1 migration): redesigned UI/UX and interaction patterns based on RnD and UI/UX team requests.
  • Implemented guided flows for transaction intake (QR/PIN), editor/canvas experiences, and stable navigation between screens.
  • Added operational guardrails: kiosk-mode lockdown, landscape orientation enforcement, error reporting, and configurable feature flags.
  • Migrated the backend server in parallel from Meteor to Electron + Express to reduce legacy coupling and make APIs easier to evolve.

Architecture & Tech Decisions

Flutter Kiosk App

  • BLoC for predictable state machines across multi-step flows (scan -> edit -> pay -> export).
  • AutoRoute for explicit, testable routing between kiosk screens.
  • GetIt DI to keep features modular and reduce wiring in UI layers.
  • Firebase Remote Config for feature flags and emergency control without redeploying.
  • Crashlytics + Analytics for crash-free monitoring and rollout confidence.

Backend Server (Electron + Express)

  • Migrated away from Meteor to reduce framework constraints and simplify debugging and deployment.
  • Express provides clear REST boundaries that match kiosk transaction flows and are easier to version.
  • Electron packaging supports desktop-like distribution where needed, while keeping the runtime familiar (Node.js).

Outcome

  • Delivered a refreshed kiosk experience with a new UI/UX that better fits the product direction.
  • Reduced legacy dependency by refactoring both the kiosk client and the backend server in parallel.
  • Improved operational readiness with feature flags, observability, and safer update strategies.