Tick Slayer 3000
← All Progress Logs

Progress Log

Project Scaffolding — Next.js, Convex, Docs, and Theme Setup

March 28, 202619:43Build Log

Project Scaffolding — Next.js, Convex, Docs, and Theme Setup

Date: 2026-03-28 Type: Build Log

Context

First real build session for the Tick Slayer 3000 web app — the command center for tracking the autonomous tick rover build. Started from an empty repo with just a spec file and stood up the full stack in one session.

What Changed

Next.js + shadcn/ui Setup

  • Initialized Next.js 16 with App Router, Tailwind CSS 4, and TypeScript
  • Installed shadcn/ui using the official sidebar-08 block variant (inset sidebar with collapsible nav sections)
  • Dev server configured on port 8009 per project convention
  • Replaced default Geist fonts with Inter + Space Mono to match tweakcn theme

Convex Backend

  • Created Convex project (tick-slayer-3000 on dashboard at loyal-antelope-788)
  • Schema with parts table: name, description, link, price, image, category, status (needed/ordered/shipped/received), notes, quantity
  • Full CRUD: parts.list, parts.get, parts.create, parts.update, parts.remove

Parts List Page (src/app/parts/page.tsx)

  • Table view with columns: Name, Category, Status, Price, Link, Actions
  • Add/Edit dialog with full form (had to work around shadcn's new base-ui DialogTrigger dropping asChild — used controlled open state instead)
  • Click-to-cycle status badges (needed → ordered → shipped → received)
  • Summary stats: part count, received count, total cost with quantity multiplier

Documentation System (src/app/docs/)

  • article-index.ts — manual registry of articles organized by category (Architecture, Build Guides, Software)
  • progress-logs.ts — auto-discovers docs/progress/*.md files, parses filename regex for date/time/slug, reads first 10 lines for title and type
  • markdown-renderer.tsx — react-markdown with remark-gfm + rehype-raw, Tailwind prose styling
  • [slug]/article-content.tsx — collapsible TOC extracted from H2 headings (shown when 3+ exist)
  • [slug]/page.tsx — unified detail page handling both articles and progress logs, with prev/next navigation for logs
  • Seeded with system overview article from the project spec

Progress Log (docs/progress/, /docs/progress)

  • Followed Park Bench project pattern: file-system-based auto-discovery
  • Filename format: YYYY-MM-DD.md or YYYY-MM-DD_HHMM--title-slug.md
  • Table view with date, title, and type badges (Build Log=green, Decision=amber, Research=blue, Code Review=violet)
  • Detail view with back link, metadata header, and prev/next chronological navigation

Theme and Styling

  • Applied tweakcn theme (cmnayj9sn000204jx6xqj7k8y) — warm amber/orange palette
  • Defaulted to dark mode (className="dark" on <html>)
  • Fixed card hover states — changed from bright bg-accent (washed out text) to subtle bg-muted with border-primary/40
  • Set sidebar to neutral dark grey (oklch(0.16 0.005 0)) to visually separate from warm-tinted main background
  • Added project logo (public/images/logo.png) to sidebar header, replacing the text-based header

Misc Fixes

  • Disabled ralph-loop Claude plugin (stop hook had permission denied error)
  • Set turbopack.root in next.config.ts to silence workspace root warning
  • Added @tailwindcss/typography plugin for prose markdown rendering

Files Modified

  • convex/schema.ts — Parts table schema
  • convex/parts.ts — CRUD queries and mutations
  • src/app/layout.tsx — Root layout with sidebar-08, Convex provider, dark mode
  • src/app/page.tsx — Homepage with three nav cards
  • src/app/parts/page.tsx — Parts list with table, dialog, status cycling
  • src/app/docs/page.tsx — Docs index with categories and progress log table
  • src/app/docs/progress/page.tsx — Full progress log listing
  • src/app/docs/[slug]/page.tsx — Article/progress log detail page
  • src/app/docs/[slug]/article-content.tsx — Client-side TOC + markdown rendering
  • src/app/docs/article-index.ts — Article registry by category
  • src/app/docs/progress-logs.ts — File-system progress log discovery
  • src/app/docs/markdown-renderer.tsx — Markdown to styled HTML
  • src/components/app-sidebar.tsx — Sidebar with logo and nav data
  • src/components/nav-main.tsx — Collapsible nav sections (from sidebar-08)
  • src/components/nav-secondary.tsx — Bottom nav links (from sidebar-08)
  • src/app/globals.css — tweakcn theme variables + custom sidebar colors

Key Takeaways

  • shadcn/ui latest uses base-ui instead of Radix — no more asChild prop, use render prop pattern instead (e.g. render={<Link href="/" />})
  • next/image with fixed width/height doesn't play well inside sidebar headers — plain <img> with Tailwind classes (w-40 h-auto) works better
  • tweakcn themes can have accent colors that are too bright for dark mode hover states — override with bg-muted instead of bg-accent for subtle interactions
  • Convex npx convex codegen requires CONVEX_DEPLOYMENT to be set — use npx convex dev --once --configure=new for non-interactive setup
  • Progress log system is fully file-system driven — just drop a markdown file in docs/progress/ with the right filename format and it appears automatically
← Project InitializationParts List: Full Seeding, Purchase Research, and Filters→