Trade Compass

Code Review 6/10

TypeScript compiles cleanly (npx tsc --noEmit passes) and npm run build succeeds in 14s. The trade math (trade-math.ts position sizing, R:R; trading.ts pip/contract values; use-flashcard-sm2.ts SM-2) is correct and well-tested — 56 indicator tests plus a growth suite give real confidence in the domain logic. The candlestick SVG pattern rendering was reviewed and verified coordinate-consistent (a smell I chased turned out correct). Weaknesses: 47 no-explicit-any lint errors, several multi-thousand-line components, and silent error swallowing on supabase writes.

Design 7/10

The UI is a polished dark "trading desk" theme: near-black background, refined indigo accent (#18253a / #6c6cf0 family), Inter typography with tight tracking, serif display headers on hero/game results, monospace price reads, subtle card shadows, and a real dark/light toggle via next-themes. Animations (framer-motion staggering, chart glow, game shell transitions) are tasteful and on-brand. Honest data-quality signaling (DataQualityBadge for live/delayed/synthetic).

UI/UX Recommendations

• Make every game touch-first: PatternDragDrop needs a tap-to-select → tap-to-place flow (P0).
• Add loading skeletons to the market chart area and guided empty states to Community/Journal/Leaderboard.
• Add a discoverable Command Palette trigger (currently not wired to any keyboard shortcut/menu).
• Sweep low-contrast text-muted-foreground/50 usages and add a focus-visible theming pass for WCAG AA.
• Show a persistent "PROGRESS SAVED / OFFLINE" indicator next to the user avatar so persistence failures are never silent.

Integrity 3/10

The dominant integrity issue is backend availability: the configured Supabase project's DNS does not resolve, so every persistent capability is unreachable. There is sound defensive engineering elsewhere — honest market-data quality flags (live/delayed/synthetic), correct position/pip math, parameterized supabase writes, and the app degrades gracefully (read-only curriculum still works). But the write path is Supabase-only with no mirrored fallback, so integrity of user data is not preserved during an outage — the exact failure happening now. No client-side logging aggregates these failures either.

Production 4/10

The live Hostinger site returns HTTP 200 and the /api/twelve (TwelveData) and /api/calendar (ForexFactory) proxies are actually functional — I verified real market + calendar data flowing. That's a strong positive. The production gap is operational: no CI/CD, no automated deployment, no health check, no monitoring/alerting, no versioned rollback, and no deployment runbook. The dead Supabase backend is a production outage that nothing noticed until now. Build reproducibility is good (clean build in 14s), but delivering quality requires adding the ops wrapper.

Dependencies 8/10

Dependencies are modern and appropriate for the domain: React 18.3 + Vite 5 + TypeScript 5, shadcn/ui (Radix primitives), TanStack Query 5, lightweight-charts (real candlestick/trading charting), recharts, framer-motion, zod, react-hook-form, embla-carousel, sonner, vaul. No deprecated packages observed; the stack is well-sized for a trading-education SPA. Two watch items: next-themes is tuned for Next.js (the app built a custom useTheme elsewhere), and the Supabase Edge Function deps are only relevant if/when the backend is restored.

Tests 7/10

npx vitest run → 57/57 pass, dominated by 56 indicator tests in src/test/indicators.test.ts that genuinely verify technical-indicator math (RSI, MACD, Bollinger, etc.). This is a real, valuable suite. The gap is breadth: almost no component tests for the games (SM-2, quiz grading, position-sizing UI), no API/hook integration tests, and no E2E. Because the user's stated goals are the learning models, games, UI/UX, and trading simulations, those are exactly where targeted component/integration tests would lock in correctness and prevent regressions.

Docs 5/10

A README.md and LOGIN_DETAILS.md document the stack and local Supabase dev setup, and the code is well-commented. Missing: a Hostinger-specific deployment runbook (how /api/* proxies are wired on the shared host, how to rebuild + push, how to set the Supabase env), no API/data documentation, and no committed Supabase schema/migration/RPC/RLS runbook. Given the live deployment's complexity (proxies + env + backend), a runbook is the highest-value doc investment.

API Surface

The app's client-side API surface is: Supabase tables/RPCs (auth + persistence) and three proxied market-data endpoints. All frontend fetch calls match the Hostinger /api/* proxy routes, which are verified live. When Supabase is restored, the tables below become write targets.

Mobile 5/10

The viewport meta and theme-color are present (installable-feel foundation), and most games use tap-friendly buttons and the shared GameShell. The killer mobile gap is PatternDragDrop using HTML5 drag-and-drop with no touch handlers (P0-2) — unplayable on phones. The pip/position-size calculators and market screeners are responsive enough, but there's no mobile-specific testing framework and some text-[9px]-level sizing inside the drag-drop cards is too small. Trade Planner + chart drawing also lean mouse-first. A dedicated mobile pass (touch calibration, 44px targets, chart pinch/pan) is needed, alongside a Playwright mobile smoke test to keep it honest.

Roadmap

2-Week Sprint Plan

• D1Restore/point to a LIVE Supabase project; verify /auth/v1/health = 200 and write migrations/RPCs/RLS — P0-1
• D2Rework PatternDragDrop to tap-to-select → tap-to-place (touch-first) — P0-2
• D3Add localStorage write-behind mirror so progress/SM-2/journal survive outages — P0-3
• D4Add global offline banner + per-widget "PROGRESS SAVED" indicator — P1-1
• D5Make pip calculators + PipValueQuiz always use computed perpendicular values; drop hardcoded pipValuePerStd display — P1-3
• D6Align getPriceDecimals to 5 decimals for FX majors — P1-4
• D7Add synthetic-data overlay + lock Trade Planner when quality===synthetic — P1-6
• D8Extract MarketAnalysis/PriceChart monoliths into focused components + hooks — P1-2 / P2
• D9Add GitHub Actions CI (lint → tsc → vitest → build) + Hostinger deploy target — P1-5
• D10Cleanse 47 no-explicit-any lint errors; add game/component tests for SM-2 + quiz + position sizing — P2

6-Month Vision

Backlog

Pro-Grade Learning Path 5/5 built

Expanded the curriculum from a 15.7-hour foundation into a professional-grade path that confirms understanding, forces retention, requires judgement, tiers depth, and ends in a prop-firm-style evaluation. Everything below is implemented in source and shipped in the verified dist/ build (build clean · tsc clean · 71/71 tests).

Verification

• npm run build — clean (11s)
• npx tsc --noEmit — clean
• npx vitest run — 71/71 pass (added offline SM-2 retention tests)
• All new features confirmed present in built dist/assets/*.js

Deployment: The verified build is at /workspace/trade-compass/dist/, ready to push to Hostinger (requires your Hostinger SSH/SFTP credentials).

Recommendations

Priority-ranked forward-looking ideas (user focus: learning models · games · UI/UX · trading sims)

Certificate