Vue Frontend Conversion

If hired, you will receive another document titled "correlation," there will be more communication needed with our CTO and dev team as well for this process. ──────────────────────────────────────── WHAT WE NEED TO DO We have raw, self-contained HTML templates in raw-templates/. We need to convert those to be usable as Vue frontend that works perfectly with our backend system and uses logic from the old frontend where applicable (As in the simulation process stages). And after that we would get rid of the old frontend. ─────────────────────────────────────────────── WHAT IS BULX? A behavioral AI prediction platform. BULX simulates hundreds of AI "agents" — each modeling a different real-world human cohort (engineers, investors, laborers, doctors, etc.) — and aggregates their collective sentiment to predict market movements and social outcomes. Two core modes: 1. Scenario Engine — Ask "what if" questions and see how all cohorts react 2. Market Prediction — n-day price forecasts grounded in behavioral signals ─────────────────────────────────────────────── CORE POINTS: - Scenario simulation process - Market simulation process - Post-login simulations, settings, and profile page - Community page - Blog and articles system - Auth system - Pre-login pages: - Landing page - Features page - TOS/Privacy Policy page - Custom agents - BUX system (currency) - Referral ────────────────────────────────────────────── TECH STACK Frontend (being built now) ───────────────────────── Vue 3 (Composition API + script setup) Vue Router 4 (client-side routing for SPA) Vite 5 (build tool + dev server, port 3000) GSAP 3.12 (animations for loading screen, entrances, ghost movements) Canvas API (real-time graphics — network nodes, ghost platformer, charts) Socket.io Client (WebSocket for live simulation updates from backend) Google Fonts: Plus Jakarta Sans, Orbitron, IBM Plex Mono CSS custom properties for dark/light theming Backend (already built, Python) ─────────────────────────────── Flask 3.x (HTTP API server, port 5001) Flask-SocketIO (WebSocket real-time events) PostgreSQL + SQLAlchemy + Alembic (database & migrations) Redis (rate limiting, caching) JWT + bcrypt (authentication) OpenAI + Anthropic SDKs (LLM integration for agent generation) OASIS (social media simulation engine) yfinance (stock data) ─────────────────────────────────────────────── HOW THE CONVERSION WORKS The raw HTML templates in raw-templates/ are fully self-contained pages with thousands of lines of inline JavaScript. Converting them to Vue means: 1. Split the monolithic HTML into separate .vue files 2. Each canvas animation becomes a composable function (useXxx.js) - onMounted() starts the requestAnimationFrame loop - onUnmounted() cancels it - Template refs (canvas ref="xxx") replace document.getElementById() 3. CSS is extracted into style scoped blocks per component 4. Inline event handlers (onclick="fn()") become @click="fn" methods 5. a href="page.html" becomes router-link to="/page" 6. Dark mode uses a shared composable + reactive state instead of manual toggleTheme() calls