Nik-Blog — Learning Notes
One note per real piece of work on this project: what we built, why it's built that way, and the syntax/logic explained — same format as langchain-practice/notes/ and k8s-practice. These are written from the actual build sessions, not from theory, so every note ends with something defensible in an interview.
Index
| # | Note | Covers |
|---|---|---|
| 00 | Repo skeleton and Postgres | Monorepo layout, Express/Next.js scaffolding, Docker Compose Postgres, connection pooling |
| 01 | Admin auth | Layered backend architecture, bcrypt hashing, JWT issuing/verification, auth middleware |
| 02 | Projects CRUD | Public/protected routes in one file, slug generation, Postgres array columns, RETURNING * |
| 03 | GitHub sync | Idempotent upsert logic, matching by URL vs. slug, never resetting status/source on re-sync |
| 04 | Notes module | Real tech-domain categories, Markdown-as-data, reusing toSlug, app-layer + DB-layer validation |
| 05 | Frontend public pages | Server Components, Next.js 16 Cache Components opt-out, async params, rendering Markdown safely |
| 06 | Admin auth cookies | HTTP-only cookie vs. localStorage, CORS credentials, Client Components, checking auth via a real API call |
| 07 | Note create/edit forms | Shared form component via a mode prop, resending unchanged fields on update, fixing a useParams()/Cache Components conflict |
| 08 | Image uploads to S3 | Least-privilege IAM, scoped bucket policy, multer memory storage, random filenames, multipart form uploads |
| 09 | Noir design system | Tailwind v4 CSS tokens, editorial layout, ref-based cursor glow (no re-renders), inline SVG grain texture |
| 10 | Glitch + cursor-proximity tint | Diagnosing a stale Turbopack CSS cache vs. a silently-dropped Lightning CSS rule, distance-based color blending in JS |
| 11 | Dossier grid + Live Pulse | Replacing decorative numbers with real GitHub data, a reusable proximity-tint hook, point-to-rectangle distance fix |
| 12 | Admin panel design + logout | Applying noir tokens to a utility screen without its ambient effects; missing logout, delete, and nodemon script found and fixed; a Projects/Notes tab switcher; uploading a local .md file straight into the Note form |
| 13 | Project detail page design | The last unstyled public page, reusing LivePulse, a Related Notes section, and a missing Project field in the Note form that made it reachable |
| 14 | Free-text category tags | Dropping a database CHECK constraint, a <datalist> for autocomplete without enforcement, why the existing color fallback needed zero changes |
| 15 | Notes grouped by category + breadcrumbs | Grouping with a Map to preserve insertion order, completing the back-link chain from detail page to list page to home |
| 16 | Tag colors simplified + footer | One fixed tag accent instead of five, dropping the proximity-to-white glass effect, a new Date() prerendering bug in the new footer |
| 17 | Mermaid + syntax highlighting | A server-side rehype plugin for code highlighting vs. a Client Component for mermaid (only mermaid needs the DOM), intercepting at <pre> not <code> |
| 18 | Video uploads for project covers | MP4/WebM over GIF and why, no schema change needed, a real <video> vs <img> verification with a generated test clip |
| 19 | Backend deployed — Neon + Render | Fixing hardcoded localhost CORS/cookie settings before going live, a flaky search_path bug caused by a connection pooler, why a direct connection beat the pooled one |