🧙‍♂️ Transform LifeRPG into The Wizard's Grimoire - Production-Ready Application

✨ Major Features Added: - Complete magical theming and rebranding from LifeRPG to The Wizard's Grimoire - Production-grade React frontend with Tailwind CSS v4 and magical aesthetics - Comprehensive analytics dashboard with Recharts integration (ScryingPortal) - Push notifications system with PWA service worker support - Drag & drop functionality using @dnd-kit for habit reordering - Social features with friends system and leaderboards - Performance optimization tools and monitoring - Mobile app enhancement with PWA installation support 🏗️ Technical Infrastructure: - Advanced service worker with offline support and background sync - Zustand state management for scalable application state - Production-ready UI component system with enhanced Button, Card, Input - Progressive Web App (PWA) with manifest and app installation - FastAPI backend with comprehensive API endpoints - Docker containerization and CI/CD pipeline setup 📱 Progressive Web App Features: - Offline functionality with intelligent caching - Push notification support for habit reminders - App installation on mobile and desktop platforms - Background sync for offline data management - Performance monitoring and optimization tools 🎨 User Experience: - Magical wizard/grimoire theming throughout application - Responsive design optimized for all device sizes - Drag & drop habit management with smooth animations - Interactive analytics with multiple chart types - Social connectivity with friends and competitive features - Comprehensive notification and performance settings 🔧 Developer Experience: - Modern development stack with Vite and React - Comprehensive testing setup and CI/CD pipelines - Code quality tools with pre-commit hooks - Docker development environment - Detailed documentation and implementation guides This represents a complete transformation from prototype to production-ready application with enterprise-grade features and magical user experience.
2025-08-30 17:32:42 +00:00
parent 00ad1bd8d4
commit 7fe4ae5365
270 changed files with 46366 additions and 7824 deletions
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Debug - The Wizard's Grimoire</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+            background: #0f0f23;
+            color: #e0e0e0;
+        }
+
+        .debug-info {
+            background: #1a1a2e;
+            padding: 15px;
+            border-radius: 8px;
+            margin: 10px 0;
+            border: 1px solid #7c3aed;
+        }
+
+        .error {
+            background: #2d1b69;
+            color: #ff6b6b;
+        }
+
+        .success {
+            background: #1a4532;
+            color: #51cf66;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>🧙‍♂️ The Wizard's Grimoire - Debug Portal</h1>
+
+    <div class="debug-info">
+        <h3>🔍 System Status</h3>
+        <p id="status">Checking magical systems...</p>
+    </div>
+
+    <div class="debug-info">
+        <h3>🌐 API Connection Test</h3>
+        <p id="api-status">Testing connection to backend...</p>
+        <pre id="api-response"></pre>
+    </div>
+
+    <div class="debug-info">
+        <h3>📜 Console Output</h3>
+        <div id="console-output"></div>
+    </div>
+
+    <script>
+        const apiStatus = document.getElementById('api-status');
+        const apiResponse = document.getElementById('api-response');
+        const consoleOutput = document.getElementById('console-output');
+        const status = document.getElementById('status');
+
+        // Capture console logs
+        const originalLog = console.log;
+        const originalError = console.error;
+        const originalWarn = console.warn;
+
+        function addToConsole(level, message) {
+            const div = document.createElement('div');
+            div.textContent = `[${level}] ${new Date().toLocaleTimeString()}: ${message}`;
+            div.style.margin = '5px 0';
+            div.style.color = level === 'ERROR' ? '#ff6b6b' : level === 'WARN' ? '#ffd43b' : '#51cf66';
+            consoleOutput.appendChild(div);
+        }
+
+        console.log = function (...args) {
+            addToConsole('LOG', args.join(' '));
+            originalLog.apply(console, args);
+        };
+
+        console.error = function (...args) {
+            addToConsole('ERROR', args.join(' '));
+            originalError.apply(console, args);
+        };
+
+        console.warn = function (...args) {
+            addToConsole('WARN', args.join(' '));
+            originalWarn.apply(console, args);
+        };
+
+        // Window error handler
+        window.addEventListener('error', function (e) {
+            addToConsole('ERROR', `JavaScript Error: ${e.message} at ${e.filename}:${e.lineno}`);
+        });
+
+        status.textContent = "✅ Debug system initialized";
+
+        // Test API connection
+        async function testAPI() {
+            try {
+                console.log('Testing API connection...');
+                const response = await fetch('/api/v1/health', {
+                    method: 'GET',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                });
+
+                const data = await response.json();
+                apiStatus.textContent = '✅ API Connection Successful';
+                apiStatus.className = 'success';
+                apiResponse.textContent = JSON.stringify(data, null, 2);
+                console.log('API Response:', data);
+
+            } catch (error) {
+                apiStatus.textContent = '❌ API Connection Failed';
+                apiStatus.className = 'error';
+                apiResponse.textContent = `Error: ${error.message}`;
+                console.error('API Error:', error);
+            }
+        }
+
+        // Test React imports
+        async function testReactImports() {
+            try {
+                console.log('Testing React imports...');
+
+                // Try to load React
+                if (typeof React === 'undefined') {
+                    console.log('React not found globally, this is normal for Vite');
+                }
+
+                console.log('Import test completed');
+
+            } catch (error) {
+                console.error('Import test failed:', error);
+            }
+        }
+
+        // Run tests
+        testAPI();
+        testReactImports();
+
+        console.log('🧙‍♂️ The Wizard\'s Grimoire Debug Portal is ready!');
+    </script>
+</body>
+
+</html>