Mobile App

Clooza Mobile

React Native mobile platform for events, creators, social discovery, commerce, and music.

My role

React Native engineer working on production mobile flows, app architecture, API integration, event operations, ticketing/check-in, and music playback systems.

Overview

Clooza Mobile is a cross-platform React Native app for discovering events, engaging with creators, publishing social content, managing event operations, and exploring music experiences. In my role as a React Native engineer, the work centers on building production-grade mobile flows that remain reliable across authentication boundaries, network conditions, media-heavy screens, and complex user journeys.

The app supports public onboarding and sign-in flows, then transitions authenticated users into a protected navigation tree with home/feed, post creation, messaging, profile, event management, explore, blog, and music routes. Users can discover events, view event details, RSVP or purchase tickets, complete attendee checkout, apply coupons, interact with event products, and access event-specific community content. Event organizers have management tools for overview, guests, registration, payment add-ons, blasts, products, sales, activities, promo codes, affiliates, QR codes, guest invites, and check-in.

The music experience includes search across songs, albums, podcasts, podcast episodes, and artists, album detail pages, a full-screen player, mini player, queue management, synced/plain lyrics support, stream manifest refresh, play/end/heartbeat analytics, background playback, and lock-screen metadata via expo-audio.

Key Features

Onboarding and Authentication

Sign-in, email creation, OTP verification, registration, Google social login, and personal details flow.
Interest selection used as an authenticated onboarding gate.
Session bootstrap through React Query and secure user/token storage.
Logout clears secure auth data, onboarding state, and session query cache.

Events and Ticketing

Event discovery through feed, explore, event lists, upcoming events, search, and deep-linked event details.
Event creation/update with media, category, physical/virtual format, location, timezone, capacity, recurrence, and privacy settings.
Ticket options, checkout, attendee forms, coupon application, payment initialization, and WebView payment callbacks.
Organizer management tools for guests, registration, payment add-ons, products, sales, activities, promo codes, affiliates, QR codes, and check-in.

Music Experience

API-backed music search across songs, albums, podcasts, episodes, and artists.
Album detail screen with album tracks, hero artwork, play/pause, shuffle, and queue construction.
Full-screen player, mini player, repeat/shuffle, queue behavior, synced/plain lyrics, and playback history.
Stream manifest fetching/refresh, stream heartbeat events, background playback, and lock-screen metadata.

Shared Mobile Systems

Central API layer with service modules and typed React Query hooks.
Zustand stores for event creation/cart/receipt state, playback state, and selected location.
Connectivity banner that detects offline or poor network states using Expo Network plus latency probing.
Reusable screen wrappers, cards, buttons, inputs, tabs, modals, bottom sheets, loaders, empty states, and toast provider.

Technical Highlights

Scalable React Native app structure with typed React Navigation stacks, bottom tabs, and material top tabs.
React Query hooks for session, events, users, posts, music, search, blog, products, payments, coupons, and affiliates.
QR ticket scanning with Vision Camera, camera permissions, torch support, attendee lookup, and check-in modals.
Music playback architecture with expo-audio, Zustand queue state, stream manifests, background audio, lock-screen metadata, and playback heartbeats.
Zod and React Hook Form validation across auth, event creation, tickets, profiles, attendees, approvals, and other forms.
Reusable design system with theme tokens, cards, bottom sheets, inputs, buttons, tabs, loaders, and error states.

Tech Stack

React Native
Expo modules
TypeScript
React Navigation
TanStack React Query
Axios
Zustand
React Native Keychain
MMKV
AsyncStorage
expo-audio
Vision Camera
React Hook Form
Zod
i18next
FlashList

Architecture

The codebase is organized around feature screens, shared UI components, typed navigation, API services, React Query hooks, Zustand stores, Zod schemas, theme utilities, translations, and reusable hooks. Screens consume hooks instead of calling Axios directly, while shared infrastructure such as auth storage, API clients, media upload, connectivity, theming, and translations is composed at the app root.

Challenges and Solutions

Keeping authenticated sessions reliable across app launches and route changes.

Solution: Centralized session state in React Query, secure token/user storage, and navigator remounting based on auth state.

Why it mattered: It prevents blank or stale auth states and keeps protected screens gated correctly.

Handling expired tokens safely under concurrent API traffic.

Solution: Axios response interceptor with a single refresh operation and a queue for requests waiting on the new token.

Why it mattered: Mobile apps often fire multiple requests after resume; this avoids refresh storms and accidental logout loops.

Building a music player that works beyond a single screen.

Solution: Global PlayerProvider, Zustand playback store, manifest refresh controller, heartbeat controller, mini player, queue controls, lyrics parser, and lock-screen metadata.

Why it mattered: Music playback must survive navigation, maintain queue state, report stream activity, and feel native.