160 lines
5.7 KiB
HTML
160 lines
5.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Session Summary — 1 July 2026</title>
|
||
|
|
<link rel="stylesheet" href="../../../../_assets_/styles.css">
|
||
|
|
<link rel="stylesheet" href="../../../../_assets_/nav.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="page">
|
||
|
|
|
||
|
|
<header>
|
||
|
|
<p class="date">Wednesday, 1 July 2026</p>
|
||
|
|
<h1>Roject — Initial Build</h1>
|
||
|
|
<p class="subtitle">Session summary: from blank directory to a typed, UUID-based CMS skeleton.</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>What we built</h2>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<h3>Node.js + Express Backend</h3>
|
||
|
|
<p>
|
||
|
|
A REST API server handling authentication, groups, and projects.
|
||
|
|
Organised into route modules with a shared auth middleware that guards
|
||
|
|
all non-public endpoints via express-session.
|
||
|
|
</p>
|
||
|
|
<div class="tags">
|
||
|
|
<span class="tag">express</span>
|
||
|
|
<span class="tag">express-session</span>
|
||
|
|
<span class="tag">bcryptjs</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<h3>User Management</h3>
|
||
|
|
<p>
|
||
|
|
Four operations: register, login, logout, and delete account.
|
||
|
|
Passwords are hashed with bcrypt. Session stores the user's UUID and
|
||
|
|
username for the lifetime of the browser session.
|
||
|
|
</p>
|
||
|
|
<div class="tags">
|
||
|
|
<span class="tag">POST /api/auth/register</span>
|
||
|
|
<span class="tag">POST /api/auth/login</span>
|
||
|
|
<span class="tag">POST /api/auth/logout</span>
|
||
|
|
<span class="tag">DELETE /api/auth/me</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<h3>Groups & Projects</h3>
|
||
|
|
<p>
|
||
|
|
Both entities support create, delete, and member management.
|
||
|
|
Members can be either a user or another group. Project members
|
||
|
|
additionally carry a role (viewer, editor, admin).
|
||
|
|
</p>
|
||
|
|
<div class="tags">
|
||
|
|
<span class="tag">/api/groups</span>
|
||
|
|
<span class="tag">/api/projects</span>
|
||
|
|
<span class="tag">member_type: user | group</span>
|
||
|
|
<span class="tag">role</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<h3>Web Component Frontend</h3>
|
||
|
|
<p>
|
||
|
|
Five custom elements, each with its own <code>.ts</code> and <code>.css</code> file.
|
||
|
|
No framework, no build tool beyond plain <code>tsc</code>, no Tailwind.
|
||
|
|
CSS uses the element tag as the root selector with <code>display: block</code>.
|
||
|
|
</p>
|
||
|
|
<div class="tags">
|
||
|
|
<span class="tag"><login-form></span>
|
||
|
|
<span class="tag"><register-form></span>
|
||
|
|
<span class="tag"><app-nav></span>
|
||
|
|
<span class="tag"><group-editor></span>
|
||
|
|
<span class="tag"><project-editor></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>Key Decisions</h2>
|
||
|
|
|
||
|
|
<div class="decision">
|
||
|
|
<strong>JSON file store instead of SQLite</strong>
|
||
|
|
<p>
|
||
|
|
better-sqlite3 requires native compilation and failed on Node 24 without
|
||
|
|
build tools. Replaced with plain <code>fs.readFileSync</code> / <code>fs.writeFileSync</code>
|
||
|
|
on per-table JSON files. Zero dependencies, good enough for MVP scale.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="decision">
|
||
|
|
<strong>TypeScript via plain tsc — no bundler</strong>
|
||
|
|
<p>
|
||
|
|
Server runs with <code>ts-node</code>. Frontend TypeScript lives in
|
||
|
|
<code>src/components/</code> and compiles to <code>public/components/</code>
|
||
|
|
via a separate <code>tsconfig.client.json</code> with <code>module: none</code>,
|
||
|
|
keeping each component as a standalone global script.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="decision">
|
||
|
|
<strong>UUIDs for all IDs</strong>
|
||
|
|
<p>
|
||
|
|
Integer IDs would collide across parallel server instances. Switching to
|
||
|
|
<code>crypto.randomUUID()</code> (built-in, no extra dependency) means
|
||
|
|
any server can generate IDs independently, making future data merging
|
||
|
|
or multi-node deployments straightforward.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="decision">
|
||
|
|
<strong>Scripts at bottom of body</strong>
|
||
|
|
<p>
|
||
|
|
Custom elements are registered after the browser has parsed the HTML,
|
||
|
|
so <code>connectedCallback</code> fires on an already-present element.
|
||
|
|
Equivalent to <code>defer</code> in head, but explicit by position.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>Project Structure</h2>
|
||
|
|
<div class="card">
|
||
|
|
<p>
|
||
|
|
<code>server/</code> — TypeScript backend source<br>
|
||
|
|
<code>src/components/</code> — TypeScript frontend source<br>
|
||
|
|
<code>public/</code> — compiled JS, CSS, and HTML pages served statically<br>
|
||
|
|
<code>data/</code> — auto-created JSON data files<br>
|
||
|
|
<code>history/</code> — session logs (this file)<br>
|
||
|
|
<code>CLAUDE.md</code> — project conventions loaded by Claude Code automatically
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>What is missing</h2>
|
||
|
|
<div class="card">
|
||
|
|
<p>
|
||
|
|
The HTML document editor itself — creating and editing actual content — is
|
||
|
|
not yet built. The session covers only the scaffolding: auth, group management,
|
||
|
|
project management, and the TypeScript + component infrastructure to build on.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
Roject — session log — 1 July 2026
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<script>var NAV_ROOT = '../../../../';</script>
|
||
|
|
<script src="../../../../_assets_/nav-data.js"></script>
|
||
|
|
<script src="../../../../_assets_/nav.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|