Music

Made the music integration work, removed unused files, updated readme & .env.example

Author: System-End

.env.example

@@ -1,7 +1,9 @@
-# Spotify Configuration
-VITE_SPOTIFY_CLIENT_ID=your_client_id_here
-VITE_SPOTIFY_CLIENT_SECRET=your_client_secret_here
-VITE_SPOTIFY_REDIRECT_URI=http://localhost:3000/callback
+# Last.fm Configuration
+# Get your API key at: https://www.last.fm/api/account/create
+VITE_LASTFM_API_KEY=your_api_key_here
+VITE_LASTFM_USERNAME=your_lastfm_username
 
-# API Configuration
-VITE_WORKER_URL=http://localhost:8787
+# CloudFlare Configuration
+# Get these from your Cloudflare dashboard: https://dash.cloudflare.com/
+CLOUDFLARE_API_TOKEN=your_cloudflare_api_token
+CLOUDFLARE_ACCOUNT_ID=your_cloudflare_account_id

README.md

@@ -2,11 +2,10 @@
 
 ## 🏗️ Architecture Overview
 
-This project implements a modern web application architecture leveraging Cloudflare's edge computing capabilities. The architecture consists of three primary components:
+This project implements a modern web application architecture leveraging Cloudflare's edge computing capabilities. The architecture consists of two primary components:
 
-1. **React Frontend**: A Single Page Application (SPA) built with Create React App
-2. **Cloudflare Workers**: Serverless functions handling API integrations
-3. **Cloudflare Pages**: Static site hosting with global CDN distribution
+1. **React Frontend**: A Single Page Application (SPA) built with React and TypeScript
+2. **Cloudflare Pages**: Static site hosting with global CDN distribution
 
 ## 🚀 Getting Started
 
@@ -15,22 +14,37 @@ This project implements a modern web application architecture leveraging Cloudfl
 - Node.js (v16.0.0 or higher)
 - npm (v7.0.0 or higher)
 - Cloudflare account
-- Spotify Developer account
+- Last.fm account and API key
 - Git
 
+### API Keys Setup
+
+1. **Last.fm API Key**:
+   - Visit [Last.fm API Account Creation](https://www.last.fm/api/account/create)
+   - Sign in with your Last.fm account
+   - Fill in the application details
+   - Save your API key
+   - Your username can be found in your profile URL: last.fm/user/YOUR_USERNAME
+
+2. **Cloudflare Setup**:
+   - Create an account at [Cloudflare](https://dash.cloudflare.com/sign-up)
+   - Get your Account ID from the dashboard
+   - Create an API token with Pages deployment permissions
+
 ### Environment Setup
 
 1. Clone the repository:
 ```bash
-git clone https://github.com/EndofTimee/My-website
-cd personal-website
+git clone https://github.com/EndofTimee/personal-site
+cd personal-site
 ```
 
 2. Create a `.env` file in the root directory:
 ```env
-SPOTIFY_CLIENT_ID=your_spotify_client_id
-SPOTIFY_CLIENT_SECRET=your_spotify_client_secret
-SPOTIFY_REDIRECT_URI=your_redirect_uri
+VITE_LASTFM_API_KEY=your_lastfm_api_key
+VITE_LASTFM_USERNAME=your_lastfm_username
+CLOUDFLARE_API_TOKEN=your_cloudflare_api_token
+CLOUDFLARE_ACCOUNT_ID=your_cloudflare_account_id
 ```
 
 3. Install dependencies:
@@ -40,19 +54,12 @@ npm install
 
 ## 💻 Local Development
 
-### Starting the Development Server
-
+Start the development server:
 ```bash
-# Start React development server
 npm start
-
-# In a separate terminal, start the Cloudflare Worker
-npx wrangler dev spotify-worker.js
 ```
 
-The application will be available at:
-- Frontend: http://localhost:3000
-- Worker: http://localhost:8787
+The application will be available at http://localhost:3000
 
 ### Component Structure
 
@@ -61,19 +68,19 @@ The project follows a modular component structure:
 ```
 src/
 ├── components/
-│   ├── SpotifyList/          # Spotify integration
-│   ├── GithubRepos/          # GitHub repository display
-│   ├── LoadingAnimation/     # Loading states
-│   └── ParallaxEffect/       # Visual effects
-├── App.js                    # Main application component
-└── index.js                  # Application entry point
+│   ├── LastFMTrack/       # Music integration
+│   ├── GithubRepos/       # GitHub repository display
+│   ├── LoadingFox/        # Loading states
+│   └── ParallaxEffect/    # Visual effects
+├── App.tsx                # Main application component
+└── index.tsx             # Application entry point
 ```
 
 ## 🌐 Deployment
 
 ### Automated Deployment
 
-The project includes a PowerShell deployment script that handles both frontend and worker deployment:
+The project includes a PowerShell deployment script:
 
 ```bash
 npm run deploy
@@ -84,22 +91,15 @@ This script:
 2. Installs dependencies
 3. Builds the React application
 4. Deploys to Cloudflare Pages
-5. Deploys the Spotify Worker
-6. Sets up environment secrets
+5. Sets up environment secrets
 
 ### Manual Deployment Steps
 
-If you need to deploy components individually:
+If you need to deploy manually:
 
-1. Frontend Deployment:
 ```bash
 npm run build
-npx wrangler pages deploy ./build
-```
-
-2. Worker Deployment:
-```bash
-npx wrangler deploy spotify-worker.js
+npx wrangler pages deploy ./dist
 ```
 
 ### Environment Configuration
@@ -108,52 +108,35 @@ npx wrangler deploy spotify-worker.js
 
 1. Build settings:
    - Build command: `npm run build`
-   - Build output directory: `build`
+   - Build output directory: `dist`
    - Node.js version: 16 (or higher)
 
 2. Environment variables:
    - Production branch: `main`
    - Preview branches: `dev/*`
 
-#### Worker Configuration:
-
-Required environment secrets:
-- `SPOTIFY_CLIENT_ID`
-- `SPOTIFY_CLIENT_SECRET`
-- `SPOTIFY_REDIRECT_URI`
-
 ## 🐛 Troubleshooting
 
 ### Common Issues
 
-1. Worker Deployment Failures:
-   ```bash
-   # Verify wrangler.toml configuration
-   npx wrangler config
-   
-   # Check worker status
-   npx wrangler tail
-   ```
-
-2. Build Issues:
+1. Build Issues:
    ```bash
    # Clear dependency cache
    rm -rf node_modules
    npm clean-cache --force
    npm install
    ```
 
-3. Environment Variables:
+2. Environment Variables:
    ```bash
    # Verify environment variables
    npx wrangler secret list
    ```
 
 ## 📚 Additional Resources
 
-- [Cloudflare Workers Documentation](https://developers.cloudflare.com/workers/)
 - [Cloudflare Pages Documentation](https://developers.cloudflare.com/pages/)
-- [Spotify Web API Documentation](https://developer.spotify.com/documentation/web-api/)
+- [Last.fm API Documentation](https://www.last.fm/api)
 - [React Documentation](https://reactjs.org/docs/getting-started.html)
 
 ## 🤝 Contributing
@@ -166,4 +149,4 @@ Required environment secrets:
 
 ## 📄 License
 
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details

cloudflare-worker.js

@@ -1,5 +1,4 @@
-# deploy-master.ps1
-#Requires -Version 5.1
+# deploy.ps1
 Set-StrictMode -Version Latest
 $ErrorActionPreference = 'Stop'
 
@@ -28,9 +27,6 @@ function Write-Status {
 
 function Test-Environment {
     $requiredVars = @{
-        "SPOTIFY_CLIENT_ID" = ""
-        "SPOTIFY_CLIENT_SECRET" = ""
-        "SPOTIFY_REDIRECT_URI" = ""
         "CLOUDFLARE_API_TOKEN" = "For Cloudflare API access"
         "CLOUDFLARE_ACCOUNT_ID" = "For Cloudflare account identification"
     }
@@ -47,21 +43,13 @@ function Test-Environment {
         }
     }
 
-    # Check for deprecated variables
-    if (Get-Item env:CF_API_TOKEN -ErrorAction SilentlyContinue) {
-        Write-Status "CF_API_TOKEN is deprecated. Please use CLOUDFLARE_API_TOKEN instead" "Warning"
-        # Automatically migrate the value
-        $env:CLOUDFLARE_API_TOKEN = $env:CF_API_TOKEN
-        Remove-Item env:CF_API_TOKEN
-    }
-    
     if ($missingVars.Count -gt 0) {
         throw "Missing required environment variables: $($missingVars -join ', ')"
     }
 }
 
 function Clear-BuildArtifacts {
-    $paths = @("dist", ".wrangler", "node_modules/.cache")
+    $paths = @("dist", "node_modules/.cache")
     foreach ($path in $paths) {
         if (Test-Path $path) {
             Remove-Item -Recurse -Force $path
@@ -82,33 +70,13 @@ function Install-Dependencies {
 
 function Start-Build {
     Write-Status "Building project..." "Info"
-
-    Write-Status "Building worker..." "Info"
-    npm run build:worker
-    if ($LASTEXITCODE -ne 0) { throw "Worker build failed" }
-
-    Write-Status "Building frontend..." "Info"
     npm run build
     if ($LASTEXITCODE -ne 0) { throw "Frontend build failed" }
 
     if (-not (Test-Path "dist")) { throw "Build failed - dist directory not created" }
     Write-Status "Build completed successfully" "Success"
 }
 
-function Deploy-Worker {
-    Write-Status "Deploying Cloudflare Worker..." "Info"
-    
-    # Set wrangler environment variables
-    $env:WRANGLER_AUTH_TOKEN = $env:CLOUDFLARE_API_TOKEN
-    
-    $deployEnv = if ($env:CI) { "production" } else { "development" }
-    
-    npx wrangler deploy src/worker/index.ts --env $deployEnv
-    if ($LASTEXITCODE -ne 0) { throw "Worker deployment failed" }
-    
-    Write-Status "Worker deployed successfully" "Success"
-}
-
 function Deploy-Frontend {
     Write-Status "Deploying to Cloudflare Pages..." "Info"
 
@@ -132,7 +100,6 @@ function Start-Deployment {
         Clear-BuildArtifacts
         Install-Dependencies
         Start-Build
-        Deploy-Worker
         Deploy-Frontend
 
         Write-Status "Deployment completed successfully!" "Success"

deploy-master.ps1

@@ -58,12 +58,9 @@ function Start-Development {
         # Start Vite
         $viteWindow = Start-Process powershell -ArgumentList "-NoExit", "-Command", "npm run dev" -PassThru
 
-        # Start Wrangler
-        $wranglerWindow = Start-Process powershell -ArgumentList "-NoExit", "-Command", "npx wrangler dev spotify-worker.ts" -PassThru
-
+        
         Write-Status "Development servers started successfully!" "Success"
         Write-Status "Vite running on: http://localhost:3000" "Info"
-        Write-Status "Worker running on: http://localhost:8787" "Info"
         Write-Status "Log file: $logFile" "Info"
 
         # Wait for user input to stop servers
@@ -72,14 +69,12 @@ function Start-Development {
 
         # Stop the servers
         if ($viteWindow) { Stop-Process -Id $viteWindow.Id -Force }
-        if ($wranglerWindow) { Stop-Process -Id $wranglerWindow.Id -Force }
 
         Write-Status "Development servers stopped" "Success"
     }
     catch {
         Write-Status "Error during development: $_" "Error"
         if ($viteWindow) { Stop-Process -Id $viteWindow.Id -Force }
-        if ($wranglerWindow) { Stop-Process -Id $wranglerWindow.Id -Force }
         exit 1
     }
     finally {