Frontend Engineering Lab

A senior frontend engineering portfolio project focused on architecture, reusable UI, accessibility, testing, performance, and developer experience.

Live app: lab.joeybowser.com · Storybook: storybook.joeybowser.com

Scripts

• npm run dev starts the Vite app.
• npm run build typechecks and builds the production bundle.
• npm run lint runs ESLint.
• npm run test runs the Vitest suite once.
• npm run test:watch runs Vitest in watch mode.
• npm run format checks Prettier formatting.
• npm run storybook starts Storybook.
• npm run build-storybook builds the static Storybook site.

Project Structure

src/
  app/          App composition and provider wiring
  components/   Shared component library and layout components
  features/     Product feature modules
  lib/          Shared framework-agnostic utilities
  styles/       Global CSS, tokens, and base styles

See docs/architecture.md for architectural decisions and tradeoffs.

Deployment

The app and Storybook deploy as two separate Vercel projects pointed at this same repo — see ADR 0003 for why.

1. App project: import the repo into Vercel, accept the auto-detected Vite preset (build npm run build, output dist). vercel.json already adds the SPA rewrite so /playground etc. don't 404 on direct navigation.
2. Storybook project: import the same repo as a second Vercel project. In its Project Settings, set the build command to npm run build-storybook and the output directory to storybook-static.
3. Once the Storybook project has a URL, set VITE_STORYBOOK_URL as an environment variable on the app project (see .env.example) and redeploy — the nav's "Storybook ↗" link only renders when this is set.
4. Link both resulting URLs from the portfolio site whenever you're ready — this repo doesn't need to know that site exists.

License

MIT — see LICENSE.