such.software/TODO.md

Such Software - TODO

Before Production

• Turnstile keys - Set NEXT_PUBLIC_TURNSTILE_SITE_KEY and TURNSTILE_SECRET_KEY in production environment

Nice to Have

• Rate limiting - Turnstile handles bots; add rate limiting only if abuse observed
• Manual screen reader testing (NVDA, VoiceOver)
• Further canvas performance optimization
• Blog migration - Move to MDX/Contentlayer when post count grows

Future Projects

• Decision making app (mobile app with web demo)

---

Architecture Notes (Feb 2026)

Blog Options

Option	Pros	Cons	Best For
MDX in repo	Simple, version controlled, no deps	Dev-only editing, rebuild to publish	Tech blog, infrequent posts
Contentlayer	Type-safe MDX, great DX with Next.js	Learning curve, config overhead	Structured content, many posts
Headless CMS (Sanity/Payload)	Non-dev editing, media management	External dependency, cost at scale	Team editing, media-heavy

Recommendation: Start with MDX in apps/web/src/content/blog/, add Contentlayer if it grows.

New App Architecture

Option A: Monorepo (web demos)

apps/
  web/              # such.software
  puzzle-demo/      # Vite or Next.js
  decision-demo/    # Vite or Next.js
packages/
  ui/               # Shared (already exists)

• ✅ Share @repo/ui, unified CI/CD, easy cross-linking
• ❌ Coupled deploys, heavier repo

Option B: Separate repos + subdomains

• puzzle.such.software → own repo
• decide.such.software → own repo
• ✅ Independent deploys, clean separation
• ❌ No shared packages, more repos to manage

Option C: Hybrid (recommended)

• Web demos in this monorepo (lightweight, share UI)
• Mobile apps in separate repos (React Native/Expo needs own tooling)
• Link from such.software portfolio to demos

Mobile Considerations

• React Native/Expo likely needs separate repo due to tooling differences
• Web demos can use same game logic via shared packages/ if extracted
• Consider Expo Web for code sharing between mobile and web demo

Completed

Products & Blog (February 2026)

• Products section - Landing page + 4 product pages (Webshops, Custom Websites, Smirk Wallet, Bauhaus Echo)
• Bauhaus Echo - Full product page with game modes, features, app store links, privacy policy
• Smirk Wallet - Full product page with features, supported currencies, community links
• Blog infrastructure - Blog listing with draft system, individual post pages
• Blog posts - Website Relaunch (published), Smirk Wallet v0.1.6 (published), Bauhaus Echo Launch (draft)
• Mobile bottom navigation - Fixed nav bar for mobile with 5 items (Home, Products, Services, Blog, About)
• Header updates - Desktop nav now includes Products and Blog links
• Portfolio bento grid - Added Smirk Wallet card (1x2 tall)
• Footer/About - Replaced Reddit with Discord, added jwinterm.com link

Lighthouse Scores (January 2026)

Page	Performance	Accessibility	SEO	Best Practices
Home	99%	100%	100%	77%*
Services	98%	100%	100%	100%
About	99%	100%	100%	100%

*Home 77% Best Practices due to Cloudflare Turnstile third-party cookies.

Accessibility & Compliance

• WCAG 2.2 AA compliance (100% Lighthouse)
• Section 508 & ADA compliance
• Semantic HTML5 architecture
• Playwright a11y automation (42 tests, chromium/firefox/webkit)
• Color contrast fixes (emerald-600 → emerald-700)
• Heading hierarchy (h1 → h2 → h3 → h4)
• prefers-reduced-motion support in NebulaField
• Skip-to-main link, ARIA labels, form accessibility

SEO

• Meta descriptions and OpenGraph on all pages
• Structured data (JSON-LD Organization schema)
• Canonical URLs on all pages

Performance

• Lazy loaded NebulaField with next/dynamic + requestIdleCallback
• Removed debug console.log statements

Infrastructure

• Cloudflare Turnstile bot protection
• .env.example template
• pnpm start script