Music Player - React Native App

🎥 Video Presentation

Check out the full video presentation of this project: https://youtu.be/drKzOdLaC9w

A modern, animated music player app built with React Native that demonstrates advanced UI interactions and state management.

✨ Features

• Modern UI Design: Clean, dark-themed interface with smooth animations
• Expandable Mini Player: Interactive mini player that expands to full-screen view
• Music Library: Browse and search through music tracks
• Infinite Scroll: Seamlessly load more tracks as you scroll
• State Management: Efficient state handling with Zustand
• Smooth Animations: Fluid transitions powered by React Native Reanimated
• Cross-Platform: Runs on both iOS and Android

🛠 Technical Stack

Core Technologies

• React Native (0.80.1) - Cross-platform mobile framework
• TypeScript (5.0.4) - Type-safe development
• React (19.1.0) - UI library

State Management & Data

• Zustand (5.0.6) - Lightweight state management
• TanStack Query (5.81.5) - Server state management and caching
• MusicBrainz API - Music metadata source

UI & Animations

• React Native Reanimated (3.18.0) - High-performance animations
• React Native Gesture Handler (2.27.1) - Native gesture handling
• React Native SVG (15.12.0) - Vector graphics support
• React Native Safe Area Context (5.5.1) - Safe area handling

Performance

• @legendapp/list (1.1.4) - Optimized list component with recycling

🚀 Getting Started

Prerequisites

• Node.js (≥18.0.0)
• React Native development environment set up
• iOS: Xcode and CocoaPods
• Android: Android Studio and SDK

Installation

1. Clone the repository

   git clone <repository-url>
   cd MusicPlayer

2. Install dependencies

   yarn install
   # or
   npm install

3. iOS Setup (iOS only)

   cd ios
   bundle install
   bundle exec pod install
   cd ..

4. Start Metro bundler

   yarn start
   # or
   npm start

5. Run the app

   For iOS:

   yarn ios
   # or
   npm run ios

   For Android:

   yarn android
   # or
   npm run android

🏗 Project Structure

src/
├── api/
│   └── queries.ts          # API calls and data fetching
├── assets/
│   ├── next.svg           # Navigation icons
│   ├── play-button.svg    # Play/pause button
│   └── previous.svg       # Previous button
├── components/
│   ├── MiniPlayer.tsx     # Expandable mini player component
│   └── SongListItem.tsx   # Individual song list item
├── screens/
│   └── MusicList.tsx      # Main music library screen
├── store/
│   └── index.ts           # Zustand store configuration
└── utils/
    ├── colors.ts          # Color palette
    └── consts.ts          # App constants and API URLs

🎯 Key Technical Decisions

1. State Management - Zustand

• Why: Lightweight alternative to Redux with minimal boilerplate
• Benefits: Simple API, TypeScript support, no providers needed
• Usage: Currently manages selected track information (id, title, artist)

2. Animations - React Native Reanimated

• Why: Native-level performance for complex animations
• Benefits: 60fps animations, gesture handling, layout transitions
• Usage: Mini player expansion, fade transitions, layout animations

3. Data Fetching - TanStack Query

• Why: Powerful server state management with caching
• Benefits: Automatic background updates, infinite scroll, error handling
• Usage: Fetches music data from MusicBrainz API with pagination

4. List Performance - @legendapp/list

• Why: Optimized for large datasets with item recycling
• Benefits: Better performance than FlatList for long lists
• Usage: Renders music tracks list with infinite scroll

5. Music Data Source - MusicBrainz API

• Why: Free, comprehensive music metadata database
• Benefits: No API key required, rich metadata, reliable service
• Usage: Fetches Swedish music tracks with artist credits

🎨 Design Patterns

Component Architecture

• Functional Components: Modern React patterns with hooks
• Custom Hooks: Reusable logic with useMusicStore
• Animated Components: Smooth transitions with Reanimated

State Structure

interface MusicTrack {
  id: string | null;
  title: string | null;
  artist: string | null;
}

Animation Strategy

• Layout Animations: Smooth transitions between collapsed/expanded states
• Gesture Handling: Touch interactions for player controls
• Performance: Native thread animations for 60fps experience

🔧 Development Scripts

# Start development server
yarn start

# Run on iOS simulator
yarn ios

# Run on Android emulator
yarn android

# Run tests
yarn test

# Lint code
yarn lint

# Start with logs
yarn start-logs

📱 App Flow

1. Launch: App loads with music library from MusicBrainz API
2. Browse: Infinite scroll through Swedish music tracks
3. Select: Tap a track to select it and show mini player
4. Expand: Tap mini player to expand to full-screen view
5. Controls: Access playback controls in expanded view
6. Navigate: Seamless transitions between views

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔗 API Reference

The app uses the MusicBrainz API for music metadata:

• Base URL: https://musicbrainz.org/ws/2/
• Format: JSON
• Rate Limiting: Please follow MusicBrainz guidelines
• User-Agent: Required for API requests