docs/README.md

Exocore Web — Visual Documentation

Generated on April 24, 2026 — captures every panel route in desktop (1440×900) and mobile (390×844) using bundled Chromium via Puppeteer. Re-run with npx tsx exocore-web/scripts/capture-docs.ts.

Exocore Web is a next-generation browser-based IDE + developer panel with built-in social features (posts, DMs, friends), gamified XP / leaderboard, project nodes, cloud storage (Google Drive), GitHub integration, NPM / pip / Cargo package managers, and a multi-language editor backed by Monaco + CodeMirror.

The panel is mounted at the /exocore URL prefix. The whole SPA sits behind the panel-devs gate (devs.json master account) which protects every route on the server. Once unlocked, regular user accounts sign in via /exocore/login.

---

📚 Sections

#	Folder	What it covers
1	./panel/	Panel-devs gate (master devs.json lock screen)
2	./auth/	Home landing, Login, Register, Forgot, Verify, OAuth callback
3	./dashboard/	Main /dashboard workspace (after user login)
4	./profile/	/u/:username — profile, posts, friends, "stalk" mode
5	./social/	SocialPanel — chat, DMs, online presence, posts
6	./leaderboard/	Top members ranked by XP / level / achievements
7	./projects/	Project nodes, CreateProjectWizard, FileManager
8	./cloud/	Google Drive cloud storage manager
9	./github/	GitHub integration (org browse, clone, push)
10	./editor/	IDE (Monaco/CodeMirror), languages, terminal, AI, NPM

Raw screenshot grids live in ./screenshots/desktop/ and ./screenshots/mobile/.

---

🗺️ Route map

URL	Component	Auth required
/exocore/	access/auth/Home.tsx (landing)	Panel only
/exocore/login	access/auth/Login.tsx	Panel only
/exocore/register	access/auth/Register.tsx	Panel only
/exocore/forgot	access/auth/Forgot.tsx	Panel only
/exocore/verify-pending	access/auth/VerifyPending.tsx	Panel only
/exocore/auth/callback	access/auth/AuthCallback.tsx	Panel only
/exocore/dashboard	home/Dashboard.tsx	Panel + user
/exocore/u/:username	profile/Profile.tsx	Panel + user
/exocore/leaderboard	leaderboard/Leaderboard.tsx	Panel + user
/exocore/editor	editor/coding.tsx	Panel + user

---

🧰 Stack snapshot

• Server: Express 5 + TypeScript (exocore-web/app.ts, index.ts), with WebSocket multiplexer (server/wsMux), social hub (server/social/hub), RPC hub (server/rpc/hub).
• Client: React 19 + Vite + React Router (basename /exocore), Monaco / CodeMirror, xterm.js, Framer Motion, SweetAlert2, Zustand.
• Backend (separate): Exocore-Backend/ — Express + Google Drive sync, encrypted user store, mail, OAuth.
• Auth model:
  • Panel gate → server-side devs.json (one master account per server).
  • User auth → email-verified accounts handled by the Exocore-Backend.

---

▶️ How the screenshots were captured

Both viewports were rendered with a real Chromium 138 binary (/nix/store/.../chromium) driven by Puppeteer. The script:

1. Loads /exocore/ to capture the panel-devs setup gate.
2. Submits the gate form to create the master account.
3. Re-visits every route and takes a fullPage PNG.
4. Repeats for the mobile viewport.

See exocore-web/scripts/capture-docs.ts.