ASRNOVA

Loading Experience

← Back to Projects
Case Study

Almarai MIT — Field Execution Competition Platform

A mobile-first competition platform where Almarai employee teams claim retail stores, complete in-store merchandising tasks, submit before/after photo evidence and compete on a live leaderboard — backed by an admin console for moderation, photo auditing and reporting.

StatusDelivered (Supabase edition, 2026)
RoleFull-Stack Developer
PlatformsMobile Web (Participants) • Web (Admin Console)

!Problem Statement

Running a multi-country field competition by hand leaves photo evidence scattered and rules hard to enforce. Organisers could not reliably tell which team did what, where and when, or stop teams from bending the rules once prizes were involved.

  • Shelf photos shared over chat couldn't be tied to a team, store or activity
  • Teams could swap members, drop hard stores or share one login
  • Many teams crowding into the same convenient outlets
  • Activity lists and points differ per country and store type
  • Several people uploading for one visit with no shared state
  • Reporting on registrations, activity and time spent was manual

✓The Solution

We built a participant web app and a separate admin console on Supabase. Teams claim stores, record before/after photos per activity and submit visits under rules the system enforces. Team state stays synchronised across every member's phone through live updates, while organisers moderate content, audit every photo and export reports.

Team Leader / Member RolesFour-Phase Competition LifecycleStore Claiming & CapacityBefore/After Photo EvidenceLive Team SyncAdmin Audit & Reports

Key Features

Teams & Access Control

  • Team Leaders register with a company email; members are added by their leader
  • Roster changes run through server-side Edge Functions with role checks
  • Single-device sessions — signing in elsewhere logs out the older device
  • Privacy consent captured per team

System-Enforced Competition Rules

  • Four phases (Registration → Location Selection → Activity Live → Ended) pushed live
  • Team size, minimum locations and store capacity configurable without code changes
  • First-come-first-served store capacity
  • Permanent team lock triggered by the team selfie

Store Visits & Photo Evidence

  • Before/after photos per activity, grouped by product category
  • Country-specific activity lists, with a KSA ice-cream store split
  • Every teammate sees uploads as they happen
  • Visit duration recorded from start to submission

Engagement

  • Weekly quiz with a 15-second timer and speed-based scoring
  • Moderated social feed with likes and comments
  • Leaderboard filterable by country, shown as a percentile bracket

Admin Console

  • Feed moderation with status filters
  • Drill-down audit from team to visit to before/after images
  • Separate deployment so it releases on its own schedule

Reporting

  • Eight reports: registrations, eligibility, quiz, feed, activity, leaderboard, man-hours
  • Filter by country or date range
  • Excel and PDF export with charts
  • Offline analytics in Google Colab against the live database

Tech Stack

Frontend

React 19TypeScriptViteTailwind CSSshadcn/uiRedux ToolkitZustandReact Hook Form + Zod

Backend

SupabasePostgreSQLRow Level SecurityRealtimeEdge Functions (Deno)

Services

Firebase HostingRechartsExcelJSjsPDFPlaywrightGoogle Colab

Architecture

Multi-Tenancy

Team-scoped Row Level Security via Postgres helper functions, with country-specific activity catalogues

Realtime

Row-filtered Supabase Realtime channels for phases, team locks, visit submission, photos and session takeover

Data Model

Profiles → Teams → Locations → Store Visits → Activity Images → Quizzes → Feed → App Settings

My Responsibilities

  • 1Participant app and admin console architecture
  • 2Relational data model, views and triggers on Supabase Postgres
  • 3Row Level Security and team-scoped access design
  • 4Realtime sync for phases, team locks, visits and photos
  • 5Edge Functions for server-side roster management
  • 6Reporting suite with Excel and PDF export
  • 7Migration of the first edition from Firebase to Supabase
  • 8End-to-end testing with Playwright

Challenges Overcome

Keeping one visit consistent across several teammates' phonesIrreversible integrity rules once real work beginsPer-market activity catalogues resolved per storeRemodelling the Firestore edition into a relational Supabase schemaAdmin reporting reads under participant-scoped RLS

Outcome

Delivered

Roadmap

  • Move report aggregation into SQL views and RPCs
  • Client-side image compression for mobile networks
  • Server-authoritative quiz scoring and team locking

Impact

  • ✓Structured evidence — every photo linked to a team, store, visit, activity and before/after slot
  • ✓Contest rules enforced by the system and configurable without a release
  • ✓Organisers moderate, audit every visit and export eight reports, including field man-hours
  • ✓Multiple markets served from one deployment with country-specific task sets
Get In Touch

Ready to Build Something Real?