Frontend Frameworks & UI¶
This page covers what runs in the browser. For desktop/mobile shells, see Desktop-Mobile.md. For the Next.js server side (API routes), see Backend-Frameworks.md.
Portfolio map¶
| Layer | Default in portfolio |
|---|---|
| Framework | Next.js (App Router) for full-stack; React 19 + Vite for SPAs |
| Styling | Tailwind CSS — adopted in 13+ apps (>50%) |
| Components | shadcn/ui — adopted in 10+ apps (~42%) |
| State | Zustand for client state; TanStack Query for server state |
| Build | Vite for SPAs; Next.js's bundler (Turbopack/webpack) for full-stack; tsup for libs |
| Language | TypeScript in 92% of apps |
The "modern full-stack" template that recurs across the portfolio: Next.js (or Express + React) + Tailwind + shadcn/ui + Zustand + TanStack Query + Vitest + Playwright.
React¶
What it is. The view library. Versions 18 and 19 across the portfolio (with React 19's stable release adopted in newer apps).
Why React. Network effects — every dev knows it, every UI library targets it, every AI/embed widget speaks it. No Vue, Svelte, Angular, or Solid in the portfolio.
Compiler note. No app currently uses React Compiler (auto-memoization). Manual useMemo/useCallback where needed.
Next.js¶
See Backend-Frameworks.md for full details. Frontend-relevant features:
- App Router — file-based routing with React Server Components.
<Image>and<Script>components — auto-optimization.- Turbopack — Next 15+ default dev bundler (Rust-based, replaces webpack dev).
- Server Actions — RPC-style mutations without an explicit API route.
- Static export (
output: 'export') — used by GoGreenMarketing, GoGreenSuites for marketing sites that need no API.
Vite¶
What it is. Modern dev-server + bundler. ESM-native dev, Rollup-based production builds. Sub-second HMR.
Used as primary build tool in: - EverythingBeer (React 19 + Vite + Tailwind + shadcn). - pawsc-explorer, NAWSC_net (Vite + TanStack Start, Node 20-alpine runtime). - akt-giving-garden (Vite SPA, no Docker). - GoGreen-AI-Concierge widget (Preact + Vite, Shadow DOM isolation). - OpenSentinel admin UI.
TanStack Start is a full-stack framework built on Vite — file-based routing, SSR, API routes — used by pawsc-explorer and NAWSC_net for sub-path-aware deployments.
Astro (not currently used)¶
What it is. Content-first framework with islands architecture (mostly-static HTML, hydrate only the interactive bits). Beats Next.js for marketing sites.
Why we don't use it. GoGreenMarketing and GoGreenSuites already use Next.js static export — same end state.
Preact¶
What it is. 3KB React-API-compatible alternative. Used where bundle size dominates.
Used in: GoGreen-AI-Concierge embeddable chat widget — has to be tiny because customers paste it into their own pages, often inside a Shadow DOM for style isolation.
Styling¶
Tailwind CSS¶
What it is. Utility-first CSS framework. class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white" instead of separate CSS files. Tree-shaken at build time so unused classes don't ship.
Used in: EverythingBeer, FamilyChat, GoGreen-AI-Concierge, GoGreenMarketing, GoGreenSuites (Tailwind 4), GoGreenSourcingAI, TimeSheetAI, and most other React-based apps. v3 in older apps, v4 in newer (Tailwind 4 = Oxide engine, faster).
Why we use it. Pace of iteration. No naming, no separate files, no specificity wars. Tradeoff is class-soup HTML — mitigated by component composition + clsx/cva.
Bootstrap 5¶
Used in: Boomer_AI (EJS templates + Bootstrap). Single instance.
CSS Modules / vanilla CSS¶
Used in: small/legacy apps with minimal styling.
styled-components / Emotion¶
Not used in the portfolio — Tailwind absorbed the role.
Component libraries¶
shadcn/ui¶
What it is. Not a library — a registry of copy-paste components built on Radix UI primitives + Tailwind. You run npx shadcn add button and the source code lands in your repo. No npm dependency, no version skew.
Why we use it. Owns the components, no abandonment risk, fully restyle-able. The dominant pattern in 2025–2026 React apps.
Used in: EverythingBeer, FamilyChat, GoGreen-AI-Concierge, TimeSheetAI, GoGreen-SmartForms, plus most others. ~10 of ~24 React apps.
Radix UI primitives¶
What they are. Unstyled, accessible primitives — Dialog, Dropdown, Tooltip, etc. shadcn/ui builds on top of these.
Headless UI¶
What it is. Tailwind Labs' alternative to Radix — unstyled accessible primitives for menus, dialogs, etc.
Used in: EverythingBeer (alongside shadcn). A handful of others.
Lucide React¶
What it is. Icon library — fork of Feather icons. Tree-shakeable. Default icon set in shadcn-based apps.
Used in: GoGreenSuites, EverythingBeer, FamilyChat, and most React apps.
Mantine, Chakra UI, Material UI, Ant Design¶
Not used. Mentioned for comparison.
State management¶
Zustand¶
What it is. A 1KB store library. create((set) => ({...})) and you're done. No actions, no reducers, no boilerplate.
Used in: AscendOne, GoGreenSuites, EverythingBeer, GoGreen-AI-Concierge, plus several others. Default for any non-trivial client state.
TanStack Query (formerly React Query)¶
What it is. Server-state cache. Handles fetch, cache, retry, dedup, refetch-on-focus, mutation invalidation. The right answer for "data that lives on the server but I'm displaying in React."
Used in: EverythingBeer, GoGreen-AI-Concierge, TimeSheetAI, FamilyChat, plus others.
Why both Zustand AND TanStack Query. They handle different things — Zustand for client state (modal open?, current tab), TanStack Query for server state (the user list, the document). Mixing them in one store is a known anti-pattern.
TanStack Router / TanStack Start¶
Used in: pawsc-explorer, NAWSC_net (full-stack TanStack apps).
Redux, Jotai, MobX, Recoil¶
Not used in the portfolio.
React Context API¶
Used pervasively for things that don't justify Zustand (theme, current user, feature flags).
Charts & data visualization¶
| Library | Apps |
|---|---|
| Recharts | Automotive-Repair-Diagnosis-AI (analytics dashboards) |
| Chart.js | Ecom-Sales / GogreenSellerAI |
| Three.js | tiny-governance-hub-base44-main (3D graphics) |
| React Leaflet | tiny-governance-hub-base44-main, AI-Wordpress (Leaflet maps) |
| html2canvas | tiny-governance-hub-base44-main |
Rich-text & specialty inputs¶
| Library | Used in |
|---|---|
| react-quill | tiny-governance-hub-base44-main (rich text editor) |
| @hello-pangea/dnd | tiny-governance-hub-base44-main (drag-and-drop) |
| KaTeX | Tutor_AI (math rendering) |
| Mermaid | Tutor_AI (diagram rendering) |
| face-api.js | TimeSheetAI (face detection in browser) |
Forms¶
| Library | Where |
|---|---|
| React Hook Form | Implicit in many shadcn/ui apps |
| Zod resolvers | Paired with React Hook Form for runtime validation |
| Formik | Not used |
Real-time on the client side¶
- Socket.IO client — FamilyChat, GoGreen-AI-Concierge, GoGreen-Workflow-Hub.
- Native WebSocket (
ws) — Boomer_AI, MangyDogCoffee, NaggingWifeAI, OpenSentinel, plus voice-first apps. - Server-Sent Events (SSE) — Vercel AI SDK and most LLM streaming endpoints.
See Caching-Queues-Realtime.md for the server side.
Build tooling¶
- Turbopack — Next.js 15+ dev bundler.
- esbuild — under the hood in Vite, tsup, OpenSentinel build.
- tsup — bundle a TS library to ESM/CJS quickly. Used in OpenSentinel for its CLI.
- SWC — Next.js / Vite's TS/JSX compiler.
- Webpack — only inside Next.js prod builds; nothing standalone.
- Parcel, Rollup (standalone) — not used.
Linting / formatting¶
- ESLint — universal.
- Prettier — most apps.
- TypeScript strict mode — most apps.
- Biome — not used (Prettier + ESLint still default).
- PHP Pint — Maximus, AI-Wordpress.