Client App

A mobile application built with React and Capacitor for iOS and Android. The app enables users to participate in the sports matchmaking platform, view matches, organize games, and interact with the community.

What It Does

The mobile app provides:

1. Authentication: Firebase-based login and user authentication
2. Onboarding: User profile setup with skill level, preferences, and calendar integration
3. Home Screen: View upcoming matches, streaks, and friend activity
4. Organize Matches: Create new matches by selecting friends, sport, and time
5. Timeline: Social feed with posts from completed matches
6. Profile: Manage user profile, skills, and preferences
7. Push Notifications: Receive match invitations and question prompts from the AI agent

Tech Stack

• React 19 with TypeScript
• Vite for build tooling
• Capacitor for native iOS/Android support
• Tailwind CSS for styling
• Zustand for state management
• Firebase for authentication
• Capacitor Plugins: Push notifications, geolocation, contacts, haptics

Running the App

# Install dependencies
npm install

# Development mode (web)
npm run dev

# Build for production
npm run build

# Sync with native projects
npm run cap:sync

# Open in native IDE
npx cap open ios
npx cap open android

Project Structure

• src/screens/ - Main application screens
• src/components/ - Reusable UI components
• src/api/ - API client functions
• src/store/ - State management with Zustand
• src/config/ - Firebase and app configuration

Native Features

• Push notifications for match updates and AI questions
• Geolocation for finding nearby players
• Contacts integration for inviting friends
• Haptic feedback for better UX