Implement Phase 2 Frontend with Ant Design and verify Data Ingestion

- Created `frontend/` React+Vite app using Ant Design (Dark Theme).
- Implemented `App.jsx` to display listening history and calculated "Vibes".
- Updated `backend/app/ingest.py` to fix ReccoBeats ID parsing.
- Updated `backend/app/schemas.py` to expose audio features to the API.
- Updated `README.md` with detailed Docker hosting instructions.
- Added `TODO.md` for Phase 3 roadmap.
- Cleaned up test scripts.

README.md

@@ -2,25 +2,16 @@
 
 A personal analytics dashboard for your music listening habits, powered by Python, FastAPI, React, and Google Gemini AI.
 
-## Project Structure
-
-- `backend/`: FastAPI backend for data ingestion and API.
-  - `app/ingest.py`: Background worker that polls Spotify and enriches data via ReccoBeats.
-  - `app/services/`: Logic for Spotify, ReccoBeats, and Gemini APIs.
-  - `app/models.py`: Database schema (Tracks, PlayHistory).
-- `frontend/`: React + Vite frontend for visualizing the dashboard.
-- `docker-compose.yml`: For easy deployment.
-
 ## Features
 
 - **Continuous Ingestion**: Polls Spotify every 60 seconds to record your listening history.
 - **Data Enrichment**: Automatically fetches **Genres** (via Spotify) and **Audio Features** (Energy, BPM, Mood via ReccoBeats).
-- **Dashboard**: A responsive UI to view your history and stats.
+- **Dashboard**: A responsive UI (Ant Design) to view your history, stats, and "Vibes".
 - **AI Ready**: Database schema and environment prepared for Gemini AI integration.
 
-## Hosting Guide (Docker)
+## Hosting Guide
 
-This application is designed to run via Docker Compose.
+You can run this application using Docker Compose. You have two options: using the pre-built image from GitHub Container Registry or building from source.
 
 ### 1. Prerequisites
 - Docker & Docker Compose installed.
@@ -28,48 +19,55 @@ This application is designed to run via Docker Compose.
 - **Spotify Refresh Token** (Run `backend/scripts/get_refresh_token.py` locally to generate this).
 - **Google Gemini API Key**.
 
-### 2. Deployment
+### 2. Configuration (`.env`)
 
-1.  **Clone the repository**.
-2.  **Create a `.env` file** in the root directory (or use environment variables directly):
+Create a `.env` file in the root directory (same level as `docker-compose.yml`). This file is used by Docker Compose to populate environment variables.
 
-    ```bash
-    SPOTIFY_CLIENT_ID="your_client_id"
-    SPOTIFY_CLIENT_SECRET="your_client_secret"
-    SPOTIFY_REFRESH_TOKEN="your_refresh_token"
-    GEMINI_API_KEY="your_gemini_key"
-    ```
+```bash
+SPOTIFY_CLIENT_ID="your_client_id"
+SPOTIFY_CLIENT_SECRET="your_client_secret"
+SPOTIFY_REFRESH_TOKEN="your_refresh_token"
+GEMINI_API_KEY="your_gemini_key"
+```
 
-3.  **Run with Docker Compose**:
+### 3. Run with Docker Compose
 
+#### Option A: Build from Source (Recommended for Dev/Modifications)
+
+Use this if you want to modify the code or ensure you are running the exact local version.
+
+1.  Clone the repository.
+2.  Ensure your `.env` file is set up.
+3.  Run:
     ```bash
     docker-compose up -d --build
     ```
 
-    This will:
-    - Build and start the **Backend** (port 8000).
-    - Build and start the **Frontend** (port 8991).
-    - Create a **Persistent Volume** at `/opt/mySpotify` (mapped to the container's database) to ensure **no data loss** during updates.
+#### Option B: Use Pre-built Image
 
-4.  **Access the Dashboard**:
-    Open your browser to `http://localhost:8991` (or your server IP).
+Use this if you just want to run the app without building locally.
 
-### 3. Data Persistence & Updates
+1.  Open `docker-compose.yml`.
+2.  Ensure the `backend` service uses the image: `ghcr.io/bnair123/musicanalyser:latest`.
+    *   *Note: If you want to force usage of the image and ignore local build context, you can comment out `build: context: ./backend` in the yaml, though Compose usually prefers build context if present.*
+3.  Ensure your `.env` file is set up.
+4.  Run:
+    ```bash
+    docker pull ghcr.io/bnair123/musicanalyser:latest
+    docker-compose up -d
+    ```
 
-- **Data**: All data is stored in `music.db` inside the container, which is mounted to `/opt/mySpotify/music.db` on your host machine.
-- **Migrations**: The project uses **Alembic** for database migrations. When you update the container image in the future, the backend will automatically apply any schema changes without deleting your data.
+### 4. Access the Dashboard
 
-### 4. Pulling from Registry (Alternative)
+Open your browser to:
+`http://localhost:8991`
 
-If you prefer to pull the pre-built image instead of building locally:
+### 5. Data Persistence
 
-```bash
-docker pull ghcr.io/bnair123/musicanalyser:latest
-```
+- **Database**: Stored in a named volume or host path mapped to `/app/music.db`.
+- **Migrations**: The backend uses Alembic. Schema changes are applied automatically on startup.
 
-(Note: You still need to mount the volume and pass environment variables as shown in `docker-compose.yml`).
-
-## Local Development
+## Local Development (Non-Docker)
 
 1.  **Backend**:
     ```bash
@@ -85,3 +83,4 @@ docker pull ghcr.io/bnair123/musicanalyser:latest
     npm install
     npm run dev
     ```
+    Access at `http://localhost:5173`.