Enhance audio playback and implement glassmorphic UI design

.babelrc

@@ -1,7 +1,4 @@
 {
   "presets": ["next/babel"],
-  "plugins": [
-    ["@babel/plugin-proposal-decorators", { "legacy": true }],
-    ["@babel/plugin-proposal-class-properties", { "loose": true }]
-  ]
+  "plugins": ["@babel/plugin-transform-class-properties", "@babel/plugin-proposal-class-properties"]
 }

.env.example

@@ -0,0 +1,189 @@
+# Environment Variables Template
+# Copy this file to .env.local and fill in your values
+# DO NOT commit .env.local to version control!
+
+# =============================================================================
+# DATABASE
+# =============================================================================
+# PostgreSQL connection string
+# Format: postgresql://username:password@host:port/database?schema=public
+# 
+# Local development:
+# DATABASE_URL="postgresql://postgres:password@localhost:5432/salsabeatmachine?schema=public"
+#
+# Production (Supabase example):
+# DATABASE_URL="postgresql://postgres:[YOUR-PASSWORD]@db.xxxxx.supabase.co:5432/postgres"
+#
+# Production (PlanetScale example):
+# DATABASE_URL="mysql://xxxxx:pscale_pw_xxxxx@xxxxx.us-east-3.psdb.cloud/salsabeatmachine?sslaccept=strict"
+
+DATABASE_URL="postgresql://postgres:password@localhost:5432/salsabeatmachine?schema=public"
+
+# =============================================================================
+# AUTHENTICATION
+# =============================================================================
+# JWT Secret Key - used to sign authentication tokens
+# Generate a secure random string: openssl rand -base64 32
+# IMPORTANT: Keep this secret and use a different value in production!
+
+JWT_SECRET="your-super-secret-jwt-key-change-this-in-production-use-openssl-rand-base64-32"
+
+# JWT Token Expiration (in seconds or zeit/ms format)
+# Examples: "30d", "7d", "24h", "3600" (seconds)
+JWT_EXPIRES_IN="30d"
+
+# Password hashing bcrypt rounds (10-12 recommended for production)
+BCRYPT_ROUNDS="10"
+
+# =============================================================================
+# OAUTH PROVIDERS (Optional)
+# =============================================================================
+# Google OAuth
+# Get credentials from: https://console.cloud.google.com/apis/credentials
+GOOGLE_CLIENT_ID=""
+GOOGLE_CLIENT_SECRET=""
+
+# Facebook OAuth
+# Get credentials from: https://developers.facebook.com/apps/
+FACEBOOK_APP_ID=""
+FACEBOOK_APP_SECRET=""
+
+# Apple OAuth
+# Get credentials from: https://developer.apple.com/
+APPLE_CLIENT_ID=""
+APPLE_TEAM_ID=""
+APPLE_KEY_ID=""
+APPLE_PRIVATE_KEY=""
+
+# =============================================================================
+# EMAIL SERVICE (Optional - for verification and password reset)
+# =============================================================================
+# SendGrid
+SENDGRID_API_KEY=""
+SENDGRID_FROM_EMAIL="noreply@salsabeatmachine.org"
+
+# Alternative: AWS SES
+# AWS_SES_ACCESS_KEY=""
+# AWS_SES_SECRET_KEY=""
+# AWS_SES_REGION="us-east-1"
+
+# Alternative: Mailgun
+# MAILGUN_API_KEY=""
+# MAILGUN_DOMAIN=""
+
+# =============================================================================
+# FILE STORAGE
+# =============================================================================
+# AWS S3 (for audio files, avatars, thumbnails)
+AWS_ACCESS_KEY_ID=""
+AWS_SECRET_ACCESS_KEY=""
+AWS_S3_BUCKET="salsabeatmachine-assets"
+AWS_S3_REGION="us-east-1"
+
+# Alternative: Vercel Blob Storage
+# BLOB_READ_WRITE_TOKEN=""
+
+# Alternative: Firebase Storage
+# FIREBASE_STORAGE_BUCKET=""
+
+# =============================================================================
+# REDIS (Optional - for caching and session management)
+# =============================================================================
+# Local Redis
+# REDIS_URL="redis://localhost:6379"
+
+# Upstash Redis (recommended for serverless)
+# Get from: https://console.upstash.com/
+# REDIS_URL="rediss://default:xxxxx@xxxxx.upstash.io:6379"
+
+REDIS_URL=""
+
+# =============================================================================
+# APPLICATION SETTINGS
+# =============================================================================
+# Node environment
+NODE_ENV="development"
+
+# Application URL (used for email links, OAuth callbacks)
+NEXT_PUBLIC_APP_URL="http://localhost:3009"
+
+# API Base URL (for frontend API calls)
+NEXT_PUBLIC_API_URL="http://localhost:3009/api"
+
+# =============================================================================
+# RATE LIMITING
+# =============================================================================
+# Requests per window for anonymous users
+RATE_LIMIT_ANONYMOUS="100"
+
+# Requests per window for authenticated users
+RATE_LIMIT_AUTHENTICATED="1000"
+
+# Rate limit window in seconds
+RATE_LIMIT_WINDOW="900"
+
+# =============================================================================
+# MONITORING & ANALYTICS (Optional)
+# =============================================================================
+# Sentry (error tracking)
+# Get from: https://sentry.io/
+SENTRY_DSN=""
+
+# Google Analytics
+NEXT_PUBLIC_GA_MEASUREMENT_ID=""
+
+# PostHog (product analytics)
+NEXT_PUBLIC_POSTHOG_KEY=""
+NEXT_PUBLIC_POSTHOG_HOST=""
+
+# =============================================================================
+# CDN (Optional)
+# =============================================================================
+# CloudFront Distribution ID (AWS CDN)
+CDN_DISTRIBUTION_ID=""
+
+# CloudFlare CDN
+CLOUDFLARE_ZONE_ID=""
+CLOUDFLARE_API_TOKEN=""
+
+# =============================================================================
+# FEATURE FLAGS (Optional)
+# =============================================================================
+# Enable/disable features
+ENABLE_OAUTH="false"
+ENABLE_EMAIL_VERIFICATION="false"
+ENABLE_SOCIAL_FEATURES="true"
+ENABLE_ANALYTICS="true"
+ENABLE_COMMENTS="true"
+
+# =============================================================================
+# ADMIN SETTINGS
+# =============================================================================
+# Admin email addresses (comma-separated)
+ADMIN_EMAILS="admin@salsabeatmachine.org"
+
+# =============================================================================
+# WEBHOOKS (Optional)
+# =============================================================================
+# Webhook secret for verifying webhook requests
+WEBHOOK_SECRET=""
+
+# =============================================================================
+# PRODUCTION ONLY
+# =============================================================================
+# Database connection pooling (for production)
+# DATABASE_CONNECTION_LIMIT="10"
+
+# Session secret (for production)
+# SESSION_SECRET=""
+
+# =============================================================================
+# NOTES
+# =============================================================================
+# 1. Never commit this file with real values to version control
+# 2. Use different values for development, staging, and production
+# 3. Store production secrets in your hosting platform's environment variables
+#    (Vercel, Railway, AWS Secrets Manager, etc.)
+# 4. Rotate secrets regularly, especially after team member departures
+# 5. Use strong, randomly generated values for all secrets
+# 6. Keep a secure backup of production environment variables

.eslintrc.json

@@ -0,0 +1,49 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2022,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "plugins": ["react", "jsx-a11y", "import", "@typescript-eslint"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:import/typescript",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off",
+    "import/no-unresolved": "error",
+    "import/named": "error",
+    "import/default": "error",
+    "import/no-named-as-default": "warn",
+    "import/no-named-as-default-member": "warn",
+    "no-unused-vars": "warn",
+    "@typescript-eslint/no-unused-vars": ["warn"],
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-explicit-any": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    },
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  }
+}

.gitignore

@@ -36,3 +36,5 @@ yarn-error.log*
 # firebase
 .firebase
 firebase-debug.log
+package.json
+next.config.js

.vscode/extensions.json

@@ -6,6 +6,14 @@
     "esbenp.prettier-vscode",
     "dbaeumer.vscode-eslint",
     "clinyong.vscode-css-modules"
+    "dbaeumer.vscode-eslint",         // ESLint linting
+    "ms-vscode.vscode-typescript-next", // rask TS server
+    "formulahendry.auto-close-tag",
+    "formulahendry.auto-rename-tag",
+    "streetsidesoftware.code-spell-checker",
+    "eamodio.gitlens",                // Git superpowers
+    "orta.vscode-jest",               // hvis du kjører Jest-tester
+    "msjsdiag.debugger-for-chrome"    // Chrome-debug
   ],
 
   // List of extensions recommended by VS Code that should not be recommended for users of this workspace.

.vscode/launch.json

@@ -0,0 +1,14 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+      {
+        "name": "Next.js Debug (Chrome)",
+        "type": "pwa-chrome",
+        "request": "launch",
+        "url": "http://localhost:3009",
+        "webRoot": "${workspaceFolder}",
+        "breakOnLoad": true
+      }
+    ]
+  }
+

.vscode/settings.json

@@ -0,0 +1,20 @@
+{
+    // Bruk Volta-installert Node 14 til scripts i terminalen
+    "terminal.integrated.env.osx": {
+      "PATH": "${env:HOME}/.volta/bin:${env:PATH}"
+    },
+
+    // Prettier som format-motor
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true,
+
+    // ESLint fixer på lagring
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "explicit"
+    },
+
+    // Snu på disable-varsling for useLayoutEffect (valgfritt)
+    "javascript.inlayHints.parameterNames.enabled": "all",
+    "typescript.tsdk": "node_modules/typescript/lib"
+  }
+

.vscode/tasks.json

@@ -0,0 +1,26 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+      {
+        "label": "dev",
+        "type": "npm",
+        "script": "dev",
+        "group": "build",
+        "problemMatcher": []
+      },
+      {
+        "label": "build",
+        "type": "npm",
+        "script": "build",
+        "group": "build",
+        "problemMatcher": []
+      },
+      {
+        "label": "vite-bundle",
+        "type": "npm",
+        "script": "bundle",
+        "detail": "Bygg standalone-widgeten til WordPress"
+      }
+    ]
+  }
+

README.md

@@ -24,3 +24,40 @@ npm run dev
 ```
 
 Then go to http://localhost:3009/ and start hacking!
+
+## Backend Features
+
+This repository includes comprehensive documentation for adding backend functionality to the SalsaNor Beat Machine. The backend would enable user accounts, pattern saving, social features, and analytics.
+
+### 📚 Backend Documentation
+
+- **[Quick Start Guide](./docs/QUICK_START.md)** - ⚡ Get started in 5 minutes
+- **[Backend Summary](./docs/BACKEND_SUMMARY.md)** - High-level overview of proposed backend features
+- **[Backend Architecture](./docs/BACKEND_ARCHITECTURE.md)** - Technical architecture and technology stack
+- **[API Specification](./docs/API_SPECIFICATION.md)** - Complete API endpoint documentation
+- **[Database Schema](./docs/DATABASE_SCHEMA.md)** - Database design with Prisma schema
+- **[Implementation Guide](./docs/IMPLEMENTATION_GUIDE.md)** - Step-by-step implementation instructions
+- **[Environment Variables](.env.example)** - Environment configuration template
+
+### 🎯 Key Backend Features
+
+- **User Authentication** - Register, login, OAuth integration
+- **Pattern Management** - Save, load, and share custom beat patterns
+- **Social Features** - Follow users, like patterns, comment, activity feed
+- **User Profiles** - Customizable profiles with preferences and statistics
+- **Analytics** - Track popular instruments, tempos, and patterns
+- **Dynamic Configurations** - Serve machine configurations via API
+
+### 🚀 Getting Started with Backend
+
+**Quick Setup (5 minutes):** Follow the [Quick Start Guide](./docs/QUICK_START.md) to add authentication and pattern saving.
+
+**Full Implementation:** To add complete backend functionality to this project:
+
+1. Review the [Backend Summary](./docs/BACKEND_SUMMARY.md) for an overview
+2. Follow the [Quick Start Guide](./docs/QUICK_START.md) for initial setup
+3. Use the [Implementation Guide](./docs/IMPLEMENTATION_GUIDE.md) for detailed step-by-step instructions
+4. Refer to the [API Specification](./docs/API_SPECIFICATION.md) as a reference for endpoints
+5. Use the [Database Schema](./docs/DATABASE_SCHEMA.md) for data modeling
+
+The documentation provides everything needed to implement a production-ready backend, from authentication to social features to analytics.

components/beat-indicator.module.scss

@@ -0,0 +1,15 @@
+.beat {
+  width: 12px;
+  height: 12px;
+  border-radius: 9999px; // $radius-full
+  background: rgba(255, 255, 255, 0.2);
+  transition: all 0.15s ease;
+  display: inline-block;
+  margin-right: 0.5rem; // $spacing-2
+}
+
+.active {
+  background: #FFC947;
+  box-shadow: 0 0 15px rgba(0, 245, 255, 0.6);
+  transform: scale(1.3);
+}

components/beat-indicator.tsx

@@ -1,4 +1,4 @@
-import styles from './beat-indicator.module.css';
+import styles from './beat-indicator.module.scss';
 import classnames from 'classnames';
 
 export interface IBeatIndicatorProps {