←

Bsheel

A gamified quest app: complete real-world challenges, submit photo or video proof, earn XP, level up through classes and compete with friends on a global leaderboard. Live on the App Store at bsheel.app.

bsheel.appApp StoreGoogle Play

Do the damn thing.

A gamified quest app: complete real-world challenges, submit photo or video proof, earn XP, level up through classes and compete with friends on a global leaderboard. Live on the App Store at bsheel.app.

live · personal project · iOS · Flutter · Supabase

  • v1.4Live on the App Store
  • 5Quest categories
  • 5Classes, Scout to Legend
  • Mar → Aug 2026Built in

The site

bsheel.app: the quest of the day, highlights, the live leaderboard, how it works and the manifesto.

bsheel.app home page: Do the damn thing, with the quest of the day on a phonebsheel.app, live. Click to open.

Founder and product developer

My own product, built from the first sketch: the concept, the UX plan, the design system, the iOS app, the admin dashboard, the backend and the release pipeline.

  • Concept, UX flows and screen outline
  • Design system in the Arcade style: tokens, type, pixel UI
  • iOS app in Flutter with Riverpod and GoRouter
  • Admin dashboard in Flutter Web
  • Supabase backend: schema, auth, storage, RPC, edge functions
  • App Store release pipeline and the bsheel.app site

Three people in the loop

  • The player

    Opens the app, picks one of three AI-generated quests, does it in the real world, submits proof, earns XP, levels up, posts to the feed.

  • The crowd

    Reacts and comments on completed quests, follows friends, chases them on the leaderboard.

  • The admin

    Reviews submissions, approves or rejects with a reason, handles appeals and reports, injects quests, sets the quest of the day, sends announcements.

UX plan: the loop, the outline, the screens

The whole product is one loop: get a quest, do it, prove it, get rewarded, show it off. Every screen exists to serve one step of that loop.

The core loop

  1. 1Pick a quest
  2. 2Do it in the real world
  3. 3Submit photo or video proof
  4. 4Moderation
  5. 5Earn XP, level up
  6. 6Post to the feed
  7. 7Friends react

Screen outline

Entry
  • Splash
  • Onboarding, four pages
  • Sign up and sign in
  • Legal
Play
  • Quests, three options across five categories
  • Active quest with countdown timer
  • Submit proof with preview, zoom and video thumbnails
  • Submissions and their status
Social
  • Feed of completed quests
  • Reactions, upvote and downvote
  • Comments
  • Follows
  • Search
  • Collab quests
Progress
  • Leaderboard, global XP
  • Profile: class, badges, stats, streak
  • Level-up celebration
  • Notifications
Admin dashboard
  • Dashboard
  • Moderation
  • Appeals and reports
  • Quest management, injection and quest of the day
  • Users and XP
  • Feed management
  • Announcements and auto-notifications
  • Web sign-ups and suggestions

Design system: the Arcade look

  • Paper#FFF9EE
  • Surface#FFF1D6
  • Ink#1A1330
  • Primary violet#6B3BFF
  • Accent yellow#FFC224
  • Red#FF5A6E
  • Success#17C27B
  • Cool#4CC9F0
Display
Syne, wide and heavy, for titles and the big numbers
Body
DM Sans for everything readable
Labels
JetBrains Mono, uppercase and tracked, for stats, timers and tags
Scale
12, 13, 14, 16, 20, 24, 30 and 38
Spacing
4, 8, 16, 24, 32 and 48
Shapes
Hard offset shadows, thick ink borders, pixel avatars and pixel confetti. An arcade cabinet, not a glass app.

The screens

The v1.1.6 release slides, straight from the app.

  • Cover, Bsheel v1.1.6
    Cover, Bsheel v1.1.6
  • App icon and branding
    App icon and branding
  • Social feed, completed quests with pixel reactions
    Social feed, completed quests with pixel reactions
  • Quests, pick from three AI-generated options across five categories
    Quests, pick from three AI-generated options across five categories
  • Leaderboard, global XP ranking
    Leaderboard, global XP ranking
  • Profile, class progression, badges and stats
    Profile, class progression, badges and stats
  • v1.1.6 release, fixes and refinements
    v1.1.6 release, fixes and refinements
  • Built with Flutter, Supabase and a lot of late nights
    Built with Flutter, Supabase and a lot of late nights

What it does

  1. 01

    Quest system

    AI generates quests across fitness, creativity, social, learning and adventure. Players pick one of three, complete it within a per-quest timer set by the admin, and submit photo or video proof.

  2. 02

    XP and leveling

    XP per quest tuned to real difficulty, levels with class progression from Scout through Warrior, Mage and Champion to Legend, seven badges with real unlock logic, and a pixel-confetti celebration on level up.

  3. 03

    Social feed

    An Instagram-style feed of completed quests with upvote and downvote reactions, comments, follows and search.

  4. 04

    Leaderboard and streaks

    A global ranking by XP, a friends view, and daily streaks with your longest run.

  5. 05

    Submit flow

    Preview before sending: full-screen photos, videos that play and pause, pinch to zoom, a clean remove, and real first-frame video thumbnails.

  6. 06

    Push notifications

    Real-time push through Firebase Cloud Messaging, sent by a Supabase edge function on every status change.

  7. 07

    Admin dashboard

    A Flutter Web panel at admin.bsheel.app: moderation queue, appeals, reports, quest management and injection, quest of the day, users and XP, feed management, announcements, auto-notifications, web sign-ups and quest suggestions.

  8. 08

    Localization

    English and Lebanese Arabizi, the way people in Beirut actually type.

How it was built

  1. Clean architecture, one monorepo

    A Melos monorepo. Five shared packages: contracts for table names, columns, statuses and RPC names; core for tokens and utilities; models; repositories with Supabase implementations; and shared UI with the Arcade primitives. Each feature has data, domain and presentation layers, and no feature imports another's presentation.

  2. The database contract

    One document and one package are the source of truth for every table: profiles, quests, submissions, comments, reactions, follows and more, with constraints like username rules, XP that never goes negative and the five categories and three difficulties as checked values. Row-level security on everything.

  3. Supabase backend

    Postgres with triggers that create a profile on sign-up and stamp updates, RPC functions for XP and leaderboard, storage for avatars, and ten edge functions: send-push, notify-on-insert, admin-manage-user, and a set of Telegram bots that notify the team on sign-ups, submissions, appeals and reports, with a daily summary.

  4. Media on Cloudflare R2

    Submission photos and videos go through a Cloudflare Workers upload pipeline into R2, far cheaper than storing media in Supabase at scale.

  5. Deploys by push

    A push to main runs analyze, test and format, then a GitHub Action rsyncs the edge functions, applies new migrations idempotently and rebuilds the admin dashboard on the self-hosted server behind Caddy. Nobody edits the server by hand.

  6. Store releases

    Two branches, two destinations: push to publish-test for a TestFlight build, push to publish-store to submit to Apple for review, both through the same signed release script.

Stack

Mobile
Flutter for iOS, Riverpod for state, GoRouter with deep links.
Admin
Flutter Web, served at admin.bsheel.app.
Backend
Supabase: Postgres, Auth, Storage, Edge Functions, self-hosted on a Contabo box at api.bsheel.app.
Push
Firebase Cloud Messaging, v1 API.
Media
Cloudflare R2 through Workers.
Site
bsheel.app, the marketing site with the quest of the day, highlights, leaderboard, how it works and a manifesto.