Technology Stack

​

Mobile Application Stack

​

Core Framework

​

Why React 19?

• Fewer useMemo, useCallback, and React.memo calls
• Improved runtime performance
• Cleaner, more maintainable code

// babel.config.js includes React Compiler plugin
{
  "plugins": [
    "babel-plugin-react-compiler"
  ]
}

​

State Management

​

Why Zustand?

• Simplicity: No providers, no boilerplate
• Performance: Minimal re-renders with selector-based subscriptions
• DevTools: Integration with React DevTools and Rozenite profiler
• TypeScript: Excellent type inference

import { create } from 'zustand'

const usePlayerStore = create<PlayerState>((set) => ({
  currentTrack: null,
  isPlaying: false,
  play: () => set({ isPlaying: true }),
  pause: () => set({ isPlaying: false }),
}))

​

Why React Query?

• Automatic caching: Reduces redundant API calls to Bilibili
• Background refetching: Keeps data fresh
• Optimistic updates: Instant UI feedback
• Query invalidation: Precise cache management
• Offline support: Works seamlessly with local-first architecture

const { data, isLoading } = useQuery({
  queryKey: ['playlist', playlistId],
  queryFn: () => fetchPlaylist(playlistId),
  staleTime: 5 * 60 * 1000, // 5 minutes
})

​

Database & Storage

​

Why Drizzle ORM?

• Type safety: End-to-end TypeScript types from schema to queries
• Zero runtime overhead: No heavy ORM abstractions
• SQL-like syntax: Familiar to developers who know SQL
• Excellent DX: Automatic migrations, schema introspection

import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core'

export const playlists = sqliteTable('playlists', {
  id: text('id').primaryKey(),
  title: text('title').notNull(),
  createdAt: integer('created_at', { mode: 'timestamp' }).notNull(),
})

// Type-safe queries
const result = await db.select().from(playlists).where(eq(playlists.id, id))

​

Why MMKV?

• Synchronous API (no async overhead)
• Used for app settings, feature flags, and session data
• Automatic encryption support
• Memory-mapped I/O for maximum performance

​

UI Framework & Styling

​

Material Design 3 Integration

• Dynamic color: Monet color extraction from album artwork
• Color schemes: Automatic light/dark theme generation
• Custom themes: Using @bbplayer/image-theme-colors
• Edge-to-edge: Immersive full-screen layouts

import { MD3DarkTheme, MD3LightTheme } from 'react-native-paper'
import { useMaterial3Theme } from 'react-native-paper'

const theme = useMaterial3Theme({
  sourceColor: albumArtColor,
})

​

Navigation

​

File-Based Routing

app/
├── (tabs)/
│   ├── index.tsx        # Home screen
│   ├── library.tsx      # Library screen
│   └── downloads.tsx    # Downloads screen
├── player/
│   └── [id].tsx         # Dynamic player route
└── _layout.tsx          # Root layout

• Deep linking: Automatic URL handling
• Type-safe navigation: Generated route types
• Code splitting: Automatic route-based splitting

​

Audio Playback

​

Why Custom Audio Module?

• Background playback: Continues playing when app is backgrounded
• Queue management: Next/previous track handling
• Media session: Lock screen controls, notification integration
• Audio focus: Proper handling of phone calls, alarms
• Loudness normalization: Consistent volume across tracks
• Gapless playback: Seamless track transitions

import { OrpheusPlayer } from '@bbplayer/orpheus'

const player = OrpheusPlayer.getInstance()

await player.setSource({
  uri: 'https://example.com/audio.m4s',
  title: 'Track Title',
  artist: 'Artist Name',
  artwork: 'https://example.com/cover.jpg',
})

await player.play()

​

Performance Optimization

​

Rozenite Integration

• MMKV Plugin: Profile storage operations
• TanStack Query Plugin: Debug query performance
• Require Profiler: Analyze module load times

// metro.config.js
const { getDefaultConfig } = require('@rozenite/metro')

module.exports = getDefaultConfig(__dirname, {
  plugins: [
    '@rozenite/mmkv-plugin',
    '@rozenite/tanstack-query-plugin',
    '@rozenite/require-profiler-plugin',
  ],
})

​

Networking & API

​

Bilibili API Integration

• Authentication: Cookie-based login
• Video metadata: Fetch video info, thumbnails, uploader
• Audio streams: Extract audio URLs from video sources
• Danmaku: Fetch and parse comment streams (protobuf)
• Playlists: Access user favorites and collections

// Protobuf compilation
"prepare": "pbjs -t static-module -w commonjs -o src/lib/api/bilibili/proto/dm.js src/lib/api/bilibili/proto/dm.proto"

​

Developer Tools

​

Why Oxlint?

• Written in Rust for maximum performance
• Runs type-aware rules without TSC overhead
• Used alongside ESLint for complementary rules

{
  "lint": "oxlint --type-aware && eslint .",
  "lint:fix": "oxlint --type-aware --fix && eslint . --fix"
}

​

Testing

​

Monitoring & Analytics

​

Backend Stack

​

Runtime & Framework

​

Why Cloudflare Workers?

• Edge computing: Low latency worldwide
• Generous free tier: 100,000 requests/day
• Zero cold starts: Instant response times
• V8 isolates: Better than containers
• Native TypeScript: First-class TS support

​

Database

​

Validation

​

Why ArkType?

• Type inference with near-zero overhead
• Composable validation schemas
• Better error messages
• Smaller bundle size

import { type } from 'arktype'
import { arktypeValidator } from '@hono/arktype-validator'

const userSchema = type({
  id: 'string',
  email: 'email',
  age: 'number >= 0',
})

app.post('/users', arktypeValidator('json', userSchema), async (c) => {
  const user = c.req.valid('json') // Fully typed!
  // ...
})

​

Development Tools

​

Version Control

​

Package Management

​

Build & CI/CD

​

Mobile Builds

​

Code Quality

​

Utility Libraries

​

Platform-Specific Features

​

Android

• Material Design 3: Native Android design system
• Media3 ExoPlayer: Advanced audio playback
• Edge-to-Edge: Immersive display mode
• Gradle Plugin: Custom build configuration

​

iOS

• AVPlayer: Native audio playback
• Share Intent: Deep link handling
• Haptics: Native haptic feedback

​

Next Steps