Mobile App Overview
The TrickBook mobile app is built with React Native, Expo SDK 54, and TypeScript. It uses Expo Router for file-based navigation and NativeWind for Tailwind CSS styling.
Quick Start
cd TrickList
npm install
npx expo start --dev-client
Project Structure
TrickList/
├── app/ # Expo Router app directory
│ ├── _layout.tsx # Root layout (providers, auth gate)
│ ├── notifications.tsx # Notifications screen
│ │
│ ├── (auth)/ # Auth group (unauthenticated users)
│ │ ├── _layout.tsx # Auth navigation layout
│ │ ├── welcome.tsx # Landing/intro screen
│ │ ├── login.tsx # Email/password + SSO login
│ │ └── register.tsx # New user registration
│ │
│ ├── (tabs)/ # Main tab navigation
│ │ ├── _layout.tsx # Tab bar configuration
│ │ ├── index.tsx # Home/Dashboard
│ │ ├── trickbook/ # TrickBook screens
│ │ ├── spots/ # Spots screens
│ │ ├── homies/ # Homies screens
│ │ ├── media/ # Feed/Media screens
│ │ └── profile/ # Profile (hidden from tab bar)
│ │
│ ├── profile/ # Profile settings screens
│ │ ├── index.tsx # Profile view
│ │ ├── edit.tsx # Edit profile
│ │ ├── settings.tsx # App settings
│ │ ├── account.tsx # Account management
│ │ ├── change-password.tsx # Password update
│ │ ├── notifications.tsx # Notification preferences
│ │ ├── privacy.tsx # Privacy settings
│ │ ├── theme.tsx # Theme selection
│ │ └── support.tsx # Help/support
│ │
│ ├── api/ # Legacy API layer (migration in progress)
│ ├── auth/ # Legacy auth context
│ ├── config/ # Styling configuration
│ └── assets/ # Images, icons, splash screen
│
├── src/ # New TypeScript source structure
│ ├── components/ # Reusable UI components
│ │ ├── ui/ # Base: Button, Card, Avatar, Badge, ProgressBar
│ │ ├── home/ # GoalCard, StatsCard, QuickActions, ActivityCard
│ │ ├── trickbook/ # TrickCard, TrickRow, TrickListCard, StatusBadge
│ │ ├── spots/ # SpotMap, SpotCard, ReviewCard, StarRatingInput
│ │ ├── feed/ # CommentsBottomSheet
│ │ ├── homies/ # Homie components
│ │ ├── media/ # Media components
│ │ ├── layout/ # Layout wrappers
│ │ └── share/ # ShareToHomieModal
│ │
│ ├── lib/ # Business logic and utilities
│ │ ├── api/ # API service layer
│ │ │ ├── client.ts # HTTP client (auth token handling)
│ │ │ ├── auth.ts # Authentication endpoints
│ │ │ ├── trickbook.ts # TrickBook CRUD operations
│ │ │ ├── feed.ts # Feed/social content API
│ │ │ ├── homies.ts # Friends/homies API
│ │ │ ├── spots.ts # Spots/locations API
│ │ │ ├── spotReviews.ts # Spot reviews API
│ │ │ ├── spotlists.ts # Spot lists API
│ │ │ ├── messages.ts # Direct messaging API
│ │ │ ├── couch.ts # "The Couch" curated media API
│ │ │ ├── user.ts # User profile API
│ │ │ └── upload.ts # File upload API
│ │ │
│ │ ├── stores/ # Zustand state management
│ │ │ └── authStore.ts # Authentication state
│ │ │
│ │ ├── hooks/ # Custom React hooks
│ │ ├── providers/ # Context providers
│ │ │ └── ThemeProvider.tsx # Dark/Light theme provider
│ │ └── utils.ts # Utility functions
│ │
│ ├── types/ # TypeScript type definitions
│ │ ├── trickbook.ts # TrickList, Trick, TrickStatus types
│ │ └── spots.ts # Spot, SpotList types
│ │
│ ├── constants/ # App constants
│ │ ├── api.ts # API endpoints and configuration
│ │ ├── colors.ts # Color system and theme
│ │ └── layout.ts # Layout constants
│ │
│ └── assets/ # Images and static assets
│
├── android/ # Android native configuration
├── ios/ # iOS native configuration
├── patches/ # Patch-package patches
├── plugins/ # Expo plugins
│
├── package.json # Dependencies and scripts
├── app.json # Expo configuration
├── tsconfig.json # TypeScript configuration
├── tailwind.config.js # Tailwind CSS configuration
├── metro.config.js # Metro bundler (with NativeWind)
├── babel.config.js # Babel transpiler
├── eas.json # EAS build profiles
└── index.js # Entry point
Key Features
TrickBook
- Create and manage personal trick lists
- Track progress: "Not Started" → "Learning" → "Landed" → "Mastered"
- Browse Trickipedia (global trick encyclopedia with tutorials)
- Public/private trick list sharing
Spots
- Discover skate spots on a map
- Find spots near current location (GPS)
- Leave reviews and star ratings
- Organize spots into collections (spot lists)
- Google Places integration for search
Homies
- Find and connect with friends
- Send/accept homie requests
- View friends' profiles, stats, and trick lists
- Toggle discoverable network status
Feed/Media
- Upload videos and photos
- React with "Love" and "Respect"
- Comments and threaded replies
- Trending/algorithmic feed
- Filter by sport type
- Post visibility: public, homies-only, private
The Couch
- Curated action sports video library
- Browse films, documentaries, and edits
- Stream via Bunny.net CDN
Direct Messages
- Real-time chat with homies (Socket.IO)
- Share tricks, spots, and videos in messages
- Read receipts and unread counts
User Features
- Customizable profiles with avatar and stats
- Multi-auth: Email/password, Apple Sign-In, Google SSO
- Dark/Light theme toggle
- Notification preferences and privacy settings
- Stripe subscription management
Design System
Color Palette
| Color | Hex | Usage |
|---|---|---|
| Primary (Gold) | #FCF150 | Brand color, mastered status |
| Secondary (Dark) | #1f1f1f | Secondary brand |
| Accent (Blue) | #1976D2 | Links, actions |
| Not Started | #666666 | Gray status |
| Learning | #FF9800 | Orange status |
| Landed | #4CAF50 | Green status |
Themes
| Theme | Background | Surface |
|---|---|---|
| Dark | #121212 | #1E1E1E |
| Light | #FFFFFF | #F5F5F5 |
Dependencies Overview
Core
- React Native 0.81.5
- Expo SDK 54.0.0
- TypeScript 5.9.2
Navigation
- Expo Router 6.x (file-based)
State & Data
- Zustand 5.x (auth state)
- React Query 5.x (server state)
- React Hook Form 7.x + Zod (forms)
Styling
- NativeWind 4.x (Tailwind CSS)
Real-time
- Socket.IO Client 4.8.3
Node.js
- 20.18.0 (via .nvmrc)
Build Profiles
| Profile | Purpose |
|---|---|
development | Local dev builds with dev-client |
preview | Internal testing distribution |
production | Generic production build |
testflight | iOS App Store submission |
playstore | Google Play submission |