Portfoldio

Six platforms from one codebase

Portfoldio is my own product — which means it’s also the project where I had the most architectural freedom. The uncompromising choice: one codebase for six platforms. iOS, Android, web, macOS, Windows, Linux all run from the same Flutter repo, with minimal platform-specific logic (mainly in-app purchase and biometric auth, both behind abstractions).

This isn’t a “well, the app sort of runs on a Mac” promise — it means a new feature is implemented in one session and ships to all six platforms. That’s the only way a solo developer can take six platforms seriously.

The architecture splits into three cleanly separated layers:

1. State layer (BLoC): all state transitions are events, all reads are pure functions over state. With the sheer number of async flows (auth ↔ sync ↔ IAP ↔ subscription ↔ watchlist ↔ live prices), BLoC’s strictness pays off — Provider/Riverpod would be more flexible, but with this many cross-cutting effects it would have become unmanageable.
2. Data layer (repository + Hive + GraphQL): every data type has a repository that combines Hive (local cache) and Supabase (cloud source). Writes go out optimistically locally and are synced in the background.
3. Presentation layer: widgets that listen directly to BLoC state. No ViewModels, no controllers — the state is the model, the widget renders it.

Approach

The app is organised around three clear axes. The BLoC pattern for state management (especially for the many async flows — auth, sync, subscriptions, in-app purchases). GraphQL codegen against Supabase pg_graphql for type-safe queries and mutations, plus live prices as a GraphQL subscription. Hive as a local cache layer so the app stays usable in airplane mode. Sensitive actions (login, revealing values) are gated behind local_auth (FaceID / TouchID).

On top of that there’s a less visible but equally important block: the build and release pipeline. A Flutter app on six platforms means six chances to get lost in code-signing rabbit holes. We scripted this early — for each platform, one clearly documented path from flutter build to “artifact in the relevant store / distribution pipeline”.

// Sync bloc: coordinates auth state, online state and last sync timestamp.
on<SyncRequested>((event, emit) async {
  if (!await _auth.isSignedIn()) return emit(SyncIdle.signedOut());
  emit(SyncRunning(startedAt: DateTime.now()));
  try {
    final remote = await _gql.fetchPortfolio(userId: _auth.userId);
    await _cache.replaceAll(remote);                // last-write-wins
    emit(SyncIdle.success(at: DateTime.now()));
  } on NetworkException catch (e) {
    emit(SyncIdle.offline(lastSyncAt: await _cache.lastSyncAt()));
  } catch (e, s) {
    emit(SyncIdle.failed(error: e.toString()));
  }
});

Highlights

@freezed
class PortfolioState with _$PortfolioState {
  const factory PortfolioState.loading() = _Loading;

  const factory PortfolioState.loaded({
    required List<Position> positions,
    required Money totalValue,
    required Map<String, Decimal> dailyChange,
    required SyncStatus syncStatus,
  }) = _Loaded;

  const factory PortfolioState.error(String message) = _Error;
}

// Exhaustive switch in the UI — the compiler forces every case.
Widget build(BuildContext context) =>
  state.when(
    loading: () => const Shimmer(),
    loaded: (positions, total, change, sync) =>
        PortfolioView(positions, total, change, sync),
    error: (msg) => ErrorView(msg),
  );

// GraphQL subscription per watchlist — pg_graphql streams.
Stream<Price> watchPrices(List<String> symbols) {
  final result = _client.subscribe(
    SubscriptionOptions(
      document: gql(r"""
        subscription WatchPrices($symbols: [String!]!) {
          prices(where: { symbol: { in: $symbols } }) {
            symbol price change_24h currency updated_at
          }
        }
      """),
      variables: {'symbols': symbols},
    ),
  );

  return result
      .where((r) => r.data != null)
      .map((r) => Price.fromJson(r.data!['prices']));
}

class PriceCache {
  final Box<Price> _box;

  PriceCache(this._box);

  Future<Price?> get(String symbol) async => _box.get(symbol);

  Future<void> put(Price p) async => _box.put(p.symbol, p);

  // UI subscribes directly: sync layer writes, widget re-renders.
  Stream<Price?> watch(String symbol) =>
      _box
          .watch(key: symbol)
          .map((e) => e.value as Price?)
          .startWith(_box.get(symbol));
}

serve(async (req) => {
  const { receipt, platform, user_id } = await req.json();
  const verified = platform === 'ios'
    ? await verifyApple(receipt)
    : await verifyGoogle(receipt);

  if (!verified.valid) {
    return new Response(JSON.stringify({ tier: 'free' }), { status: 200 });
  }

  await supabase.from('subscriptions').upsert({
    user_id,
    tier: verified.tier,        // 'plus' | 'pro' | 'family'
    expires_at: verified.expiresAt,
    platform,
    original_transaction_id: verified.txId,
  });

  return new Response(JSON.stringify({ tier: verified.tier }), { status: 200 });
});

#: lib/portfolio/widgets/position_count.dart:24
#, dart-format
msgid "{count, plural, one {1 position} other {{count} positions}}"
msgstr ""

#: lib/portfolio/widgets/last_synced.dart:18
#, dart-format
msgid "Last synced {minutes} min ago"
msgstr ""

#: lib/iap/paywall.dart:42
msgid "Unlock Portfoldio Plus"
msgstr ""

What two years in production have shown

Three points I was unsure about at the start, which the operation has clearly settled.

Web is the most important platform, not iOS. Sounds absurd for a “mobile-first” app, but: many users arrive via the web app, try it out, and only install the mobile version afterwards. The web variant therefore has to be of equal quality. Flutter Web is fine for that in 2024+ as long as you build with a frame-budget mindset — no lists with hundreds of rendered items without ListView.builder, no setState at the root of the tree.

Offline-first completely changes the perceived responsiveness. When the user never sees a spinner and instead immediately gets the last known data with the refresh happening in the background, it feels like a native iOS app. That was an architectural premise from day one — and it’s the single biggest reason users stay.

Subscription logic is 5% of the codebase and 30% of the bug reports. Server-side verification, family-plan sharing, restore purchase, in-tier subscription changes, cross-platform subscriptions (someone buys on iOS, wants to use on web) — each of these has its own edge cases. Lesson learned: testable pure functions for “from this receipt follows this tier”, plus a small matrix of integration tests covering the common paths.