A React Native mobile app built with Expo for music discovery, sharing, and earnings tracking. This app takes inspiration from the Farcaster webapp structure in /webApp/src/app/(farcaster)/farcaster/ but is designed as a general music platform.
This mobile app replicates the webapp's structure and functionality while adapting it for native mobile interactions. The app includes music discovery, earnings tracking, song shares management, and rankings features.
- Home Feed: Featured songs, new releases, and recent activity
- Earnings Dashboard: Track earnings, portfolio value, and transaction history
- SongShares Management: View and manage owned song shares
- Rankings: Leaderboards and trending content
- User Authentication: Login system with wallet connection
- Audio Playback: Native audio player integration (planned)
src/
├── components/ # Reusable UI components
│ ├── forms/ # Form components
│ ├── layout/ # Layout components
│ ├── media/ # Media-related components
│ └── shared/ # Shared utility components
├── contexts/ # React contexts for state management
│ └── AppContext.tsx # Main app state and user management
├── hooks/ # Custom React hooks
├── navigation/ # Navigation configuration
│ └── BottomTabNavigator.tsx
├── screens/ # Screen components
│ ├── Home/ # Home screen with music feed
│ ├── Earnings/ # Earnings tracking
│ ├── SongShares/ # Song shares management
│ ├── Profile/ # User profile
│ └── Rankings/ # Leaderboards
├── types/ # TypeScript type definitions
├── ui-components/ # Design system components
│ ├── atoms/ # Basic UI elements
│ ├── molecules/ # Composed components
│ ├── organisms/ # Complex components
│ └── Typography.tsx # Typography system
└── utils/ # Utility functions
The app uses a consistent typography system matching the webapp:
- Headlines:
Headline1,Headline2,Headline3,Headline4 - Body Text:
Body1,Body2,Body3 - Colors: Consistent with webapp color scheme
- Spacing: Mobile-optimized spacing system
- Atoms: Basic elements (buttons, inputs, typography)
- Molecules: Composed components (cards, form groups)
- Organisms: Complex components (navigation, forms)
The app uses bottom tab navigation matching the webapp routes:
- Home (
/) - Main feed with featured content - Earnings (
/earnings) - Earnings dashboard and transactions - SongShares (
/songshares) - Owned song shares management - Rankings (
/rankings) - Leaderboards and trending
| Mobile Screen | Webapp Route | Description |
|---|---|---|
| HomeScreen | /farcaster |
Music feed with featured songs, new releases, recent activity |
| EarningsScreen | /farcaster/earnings |
Earnings tracking, portfolio value, transaction history |
| SongSharesScreen | /farcaster/songshares |
Song shares management and portfolio |
| RankingsScreen | /farcaster/rankings |
Leaderboards and trending content |
Primary state management for the entire app:
- User Management: Authentication, profile data
- Music Data: Songs, artists, metadata
- Earnings Data: Portfolio, transactions, earnings
- UI State: Dark mode, loading states
Key features:
- Mock data for development
- Wallet connection management
- User authentication
- Data refresh functionality
- Mobile app navigation structure
- Typography system implementation
- Context providers (AppContext)
- Home screen with featured content sections
- Component cards (FeaturedSongCard, SongCard, ActivityItem)
- Mock data infrastructure
- Bottom tab navigation
- Documentation
- Real API integration
- User authentication system
- Wallet connection functionality
- Audio player integration using Expo AV
- Enhanced Earnings, SongShares, and Rankings screens
- Real-time data updates
- Push notifications
- Offline support
- Node.js v20.15.0 (specified in
.nvmrc) - nvm (Node Version Manager) - recommended for version management
- Expo CLI (
npm install -g @expo/cli) - iOS Simulator or Android Emulator
- Navigate to the mobile app directory:
cd mobileApp- Use the automated setup script:
# This will automatically:
# - Load correct Node.js version from .nvmrc
# - Configure environment variables
# - Install dependencies
# - Start the development server
./start.sh- Configure Node.js version:
# Use nvm to load the correct version
nvm use
# If version not installed, install it first
nvm install v20.15.0
nvm use v20.15.0- Configure environment:
# Run environment setup
npm run setup- Install dependencies:
npm install --legacy-peer-deps- Start the development server:
npm start
# OR use the enhanced script
npm run devnpm run dev- Start with automated environment setupnpm run start:nvm- Start using nvm with .nvmrcnpm run setup- Configure environment variablesnpm start- Standard Expo startnpm run android- Start for Androidnpm run ios- Start for iOSnpm run web- Start web version
Once the server is running:
- Press
ifor iOS Simulator - Press
afor Android Emulator - Press
wfor web version - Scan QR code with Expo Go app for physical device
- Framework: Expo React Native
- Language: TypeScript
- Navigation: React Navigation v6
- State Management: React Context + React Query
- Styling: StyleSheet (React Native)
- Images: Expo Image
- Icons: Expo Vector Icons
- HTTP Client: TanStack Query (React Query)
The app is designed to integrate with the existing backend:
- User authentication endpoints
- Music metadata APIs
- Earnings and transaction APIs
- Real-time updates via WebSocket
Planned wallet connection using:
- WalletConnect for mobile wallets
- Ethereum/blockchain integration
- Transaction signing and management
Planned audio playback using:
- Expo AV for audio playback
- Background audio support
- Playback controls and queue management
- Follow the existing code style and structure
- Use TypeScript for all new code
- Follow the component architecture (atoms/molecules/organisms)
- Update tests and documentation for new features
- Use the existing design system components
- Keep components small and focused
- Use descriptive file names
- Group related files in directories
- Export components from index files where appropriate
- Use TypeScript interfaces for all props and data structures