beat-app/
├── src/
│   ├── components/     # Reusable UI components (Player, TrackList, Search)
│   ├── pages/          # Route pages (Home, Album, Artist, Search)
│   ├── services/       # API communication layer (youtube-api.js)
│   ├── stores/         # Global state management (playerStore, searchStore)
│   ├── layouts/        # Page layout wrappers
│   └── App.jsx         # Root application component
├── public/             # Static assets
└── Dockerfile          # Production deployment config

import { playerStore, playerActions } from './stores/playerStore';
import { useStore } from '@nanostores/react';

function MusicPlayer() {
  const { currentTrack, isPlaying, queue } = useStore(playerStore);

  const handlePlayTrack = async (track) => {
    await playerActions.playTrack(track, [track]);
  };

  return (
    <div>
      <h2>{currentTrack?.title}</h2>
      <button onClick={playerActions.togglePause}>
        {isPlaying ? 'Pause' : 'Play'}
      </button>
      <p>Queue: {queue.length} tracks</p>
    </div>
  );
}