◂ All projects
Mobile ProductDesign SystemFlutter

Serenia

2025 · [SHIPPED] · Founder · Full-Stack Engineer · UX/UI Designer

A guided meditation app with its own visual world, built solo end to end.

Serenia cover

01 The challenge

Flutter + Supabase meditation app with the V2 Blueberry + Cream Soda design system, seven original characters, 88 cataloged illustrations and an audio session that feels frictionless from the first tap.

02 What shipped

  • Tokens carried 1:1 into Flutter

    The design system is defined in Figma and mirrored exactly in code, characters and motion included.

  • AI wellness coach

    A chat served by a Supabase Edge Function calling the Claude API server-side, with history stored in Supabase.

  • Server-side gamification

    Streaks and achievements are calculated by an Edge Function, never trusted from client data.

  • Serenia Plus subscriptions

    Handled through RevenueCat behind a provider-agnostic schema.

  • Pre-launch security audit

    A 20-checkpoint audit found and fixed an IDOR vulnerability before production.

03 How it was built

04 What we learned

  • The background sound selector was decorative; the fix wired it to the real sound catalog in Supabase.
  • update-streak took user_id from the request body; it now derives the user from a server-side JWT.

05 Try it live

Working pieces from this project, rebuilt as demos you can use right here.

01

Serenia player

Meditation player with a breathing guide in Serenia's own palette, the one exception to Midnight Pro.

Serenia
SERENIA · SESSION 03

Paused

Deep breathing

Guided · 12 min
03:0012:00

Rendered with Serenia V2 tokens: blueberry night #0D1329, blueberry #6260FF, cream soda #FFD15C.

02

Streak engine

Serenia's streak logic as a pure function, with milestones at 3, 7 and 14 days. Skip a day and watch it reset.

Serenia
0day streak · best 0 · 0 min total
☆ 3d☆ 7d☆ 14d
streak(done, today=1) = 0  // computed server side
All 14 demos in the UI Lab ▸

06 The design system behind it

Blueberry + Cream SodaReplay how it was built, trace its tokens and ask it questions.Open the system ▸
NEXT_PROJECTMercado Pago POS coverMercado Pago POS ▸