Mobile Application

The BattlesBit mobile app is the primary user-facing application where players join trading challenges, compete, and win rewards.

Platforms

Platform	Technology
iOS	Capacitor
Android	Capacitor
Web	Vite + React

Tech Stack

Technology	Purpose
React 19	UI Framework
Ionic React	Mobile UI components
Capacitor 6	Native bridge
MUI 6	Material components
URQL	GraphQL client
Zustand	State management
React Hook Form	Form handling
Lightweight Charts	Trading charts
GSAP	Animations
Vite	Build tool
Storybook	Component development
Vitest	Unit testing

Features

User authentication (email OTP)
Challenge browsing and joining
Real-time trading interface
Live PnL tracking
Wallet management (deposit/withdraw)
Achievement system
Leaderboard
User profiles
Store for items
Referral system

Project Structure


public/
├── src/
│   ├── App.tsx              # App entry
│   ├── components/
│   │   ├── pages/           # Screen components
│   │   ├── organisms/       # Complex components
│   │   ├── molecules/       # Composite components
│   │   └── atoms/           # Base components
│   ├── config/
│   │   ├── routes/          # Route definitions
│   │   ├── theme/           # MUI theming
│   │   ├── zustand/         # State stores
│   │   └── urql-client/     # GraphQL client
│   ├── gql-codegen/         # Generated GraphQL types
│   │   ├── queries/         # GraphQL queries
│   │   └── mutations/       # GraphQL mutations
│   ├── providers/           # React context providers
│   └── types/               # TypeScript types
├── android/                 # Android native project
├── ios/                     # iOS native project
├── .storybook/              # Storybook config
└── public/                  # Static assets

Screens

Screen	Description
Home	Dashboard with challenges
Challenges	Challenge list
ChallengeDetail	Challenge info & join
MakeMatch	Matchmaking lobby
MatchLoading	Waiting for match
LiveChallenge	Active trading screen
ChallengeFacts	Post-match results
Profile	User profile
Wallet	Balance & transactions
Deposit	Deposit funds
Withdraw	Withdraw funds
Store	Item shop
Achievements	Achievement list
Leaderboard	Global rankings
Friends	Friend list
Referral	Referral program

Running Locally

Web


cd public
yarn install
yarn dev

Android


yarn dev:android

iOS


yarn dev:ios

Environment Variables


VITE_GRAPHQL_URI=http://localhost:8080/graphql
VITE_GRAPHQL_WS_URI=ws://localhost:8080/graphql

Current Progress

Overall: ~60%

See Feature Tracking for details.