A product case study told through the features that make the experience useful, memorable, and complete.
Shipped
Oct 2026
Features
14
Visuals
51
Delivery
Web + Mobile
FantaBall — Sports Booking & Football Community
October 17, 2026// description
A full-stack sports platform that brings venue discovery, court booking, football teams, tournaments, match predictions, and a digital wallet into one connected experience. Members can discover football, basketball, padel, and tennis facilities, manage reservations, build their player identity, and stay involved with their sporting community. Built as a TypeScript monorepo with a React Native and Expo mobile application, TanStack Start web dashboards, and shared tRPC services. PostgreSQL and Drizzle ORM support bookings, wallet transactions, and competition records; Effect services, centralized permissions, durable events, and operational audit trails organize backend workflows. Arabic and English interfaces, RTL layouts, theme preferences, and push notifications connect the mobile experience with administration and venue operations. Technology Stack Frontend • Mobile: React Native, Expo, Expo Router, TypeScript, NativeWind, React Native Reanimated, and Gesture Handler. • Web: React, TanStack Start, TanStack Router, Vite, Tailwind CSS, and Leaflet. • Data & forms: TanStack Query, TanStack Form, tRPC Client, and Zod. • Mobile integrations: React Native Firebase, Expo Notifications, and Expo Secure Store. Backend • Runtime & services: Node.js, TypeScript, tRPC, Effect, and Zod. • Database: PostgreSQL and Drizzle ORM. • Authentication & messaging: JOSE, bcryptjs, and Firebase Admin. • Infrastructure & quality: Docker, Docker Compose, Turborepo, GitLab CI/CD, and Vitest.
A closer look at the decisions, interactions, and details that turn the idea into a real experience.
A personalized home brings upcoming activity, sports discovery, predictions, competitions, and account shortcuts together. Members can move directly from their overview to booking a court, checking their wallet, or exploring the community.
Phone-based sign-in and a guided registration flow introduce members to the platform. Account creation collects a display name and unique username, while password recovery starts with phone verification.
Discover facilities by sport, explore individual courts, and compare location, availability, and price. Court details introduce the venue, amenities, and available playing areas before the member selects a reservation.
Keep upcoming, completed, and cancelled bookings organized by sport. A reservation detail view combines the venue, court, date, payment breakdown, optional services, directions, contact actions, and cancellation controls in one place.
A football prediction experience organizes fixtures into rounds and tracks member performance through leaderboards. Friends can create their own leagues, choose competitions, and define participation limits and duration.
Members can access their team identity, inspect player rosters, and follow membership requests. Player roles and participation status connect the community layer to football competitions and team-based activity.
Search the football community, browse club cards, and inspect a club roster. Club detail pages combine membership context, player information, and account-specific joining status, while a separate requests view tracks pending activity.
A challenge hub separates a team's own challenges, incoming invitations, and open discovery. The creation flow captures the opposing team, playing venue, match date, duration, payment arrangement, and a message for the other captain.
Tournament discovery supports status filters and competition-format filters. Members can separate competitions they have joined from discovery and revisit tournament cards to follow fixtures, results, and participation context.
A member wallet connects booking and competition activity with an accessible balance and transaction ledger. The wallet separates transactions from top-up requests, identifies booking charges and refunds, and provides a Sham Cash top-up entry point.
A personalized player card presents the member's sporting identity, shirt number, preferred position, and playing foot. Profile views connect player details, availability, prediction performance, wallet access, and personal account information.
Security screens centralize password changes, phone-number changes, active devices, and account deactivation. Sensitive flows use staged verification, and the device list distinguishes the current session from other devices that can be revoked.
An in-app notification inbox brings booking confirmations, prediction reminders, tournament updates, wallet events, and account-security notices into one chronological view. Read-status filters and mark-all-read controls help members manage their activity.
Member settings expose Arabic language support, appearance preferences, and granular notification categories. Quiet hours use a selected timezone and start/end times, allowing members to tailor reminders and promotional notifications to their routine.