Skip to content

feat(frontend): Next.js 15 + React 19 + Tailwind 4 + lightweight-charts scaffold - #65

Merged
obchain merged 2 commits into
mainfrom
feat/25-frontend-scaffold
May 26, 2026
Merged

obchain merged 2 commits into
mainfrom
feat/25-frontend-scaffold

Conversation

@obchain

@obchain obchain commented May 26, 2026

Copy link
Copy Markdown
Owner

Summary

Frontend skeleton lands. First TypeScript surface in the repo. Establishes the Next.js + Tailwind + lightweight-charts stack the landing (#26) and chart (#27) issues build on.

Stack

Layer Pin
Framework Next.js 15.1.6 (app router)
React 19.0.0
Styling Tailwind 4.0.17 (via @tailwindcss/postcss)
Charts lightweight-charts 4.2.2 (available, not yet rendered — #27)
Package mgr pnpm 9.15.0
Node ≥ 22 (dev box on 22.22.0)
Type checker TypeScript 5.7.3 strict
Linter ESLint 9 flat config bridging next/core-web-vitals + next/typescript via FlatCompat
Formatter Prettier 3.4.2 — 100 col, double quotes, trailing comma

Routes

App router file layout:

frontend/app/
├── layout.tsx              # root + dark default body
├── globals.css             # @import "tailwindcss" + theme vars
├── page.tsx                # /          (placeholder landing)
├── api/page.tsx            # /api       (placeholder API page)
├── chart/[index]/page.tsx  # /chart/bvol or /chart/evol (placeholder)
└── methodology/page.tsx    # /methodology (placeholder)

Five user-facing routes plus _not-found. Every body is a thin placeholder — copy + chart UI land in #26 / #27. Scaffold ships first so those issues don't have to do scaffold work + their own work in one PR.

Verification

Step Result
pnpm install Clean, 332 deps, 22.7 s
pnpm typecheck (tsc --noEmit) Zero errors
pnpm lint (next lint) "No ESLint warnings or errors"
pnpm build 5 routes built, all 146 B + 105 kB shared First Load
pnpm dev smoke curl :3000/ → 200, 29152 bytes, Tailwind classes render, <title>VolX</title>

First-attempt build error (resolved)

@tailwindcss/postcss@4.0.0 is incompatible with the postcss version Next 15.1 ships — build failed with Missing field 'negated' on ScannerOptions.sources. Bumped both tailwindcss and @tailwindcss/postcss to 4.0.17; build clean. Noted for future Tailwind 4 + Next 15 work.

Out of scope

Notes

  • Tailwind 4 uses CSS-first config (@theme inline in globals.css) — no tailwind.config.ts. This is the v4 way.
  • next.config.ts has experimental.typedRoutes enabled so future <Link href="/chart/bvol"> gets compile-time path validation.
  • pnpm lockfile committed (pnpm-lock.yaml). node_modules excluded via existing .gitignore.
  • next-env.d.ts regenerated by next lint; matches the upstream skeleton with the /api-reference/config/typescript doc link form.

Test plan

  • pnpm install clean
  • pnpm typecheck clean
  • pnpm lint clean
  • pnpm build clean
  • pnpm dev serves :3000 with HTTP 200
  • Visited /, /methodology, /api, /chart/bvol, /chart/evol — all render placeholder

Fixes #25

…ts scaffold

Pin pnpm@9.15.0 + Node 22. Wire app router with five routes (/, /api,
/chart/[index], /methodology, _not-found). Tailwind 4 via
@tailwindcss/postcss; lightweight-charts available for #27. ESLint flat
config bridges to next/core-web-vitals via FlatCompat. Prettier configured
with 100-col width, double quotes, trailing comma. tsconfig strict, paths
@/* → ./*, noEmit. Build clean (5 static + 1 dynamic route), pnpm dev
serves :3000 with Tailwind classes resolving.
@obchain obchain added area:frontend Next.js dashboard lang:ts TypeScript priority:p0 Blocker, must ship this phase type:feature New functionality labels May 26, 2026
Next.js convention treats app/api/ as the parent directory for route
handlers (route.ts files). Having a page.tsx directly at app/api/
creates ambiguity if a future feature adds app/api/route.ts. Rename
to app/docs/ to keep the placeholder route stable and free the
app/api/ namespace for any future API-side work.
@obchain
obchain merged commit 471e3d7 into main May 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:frontend Next.js dashboard lang:ts TypeScript priority:p0 Blocker, must ship this phase type:feature New functionality

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Frontend: Next.js 15 scaffold + Tailwind 4 + lightweight-charts

1 participant