by bartstc
This project provides a basic dev setup intended for Single Page Application (SPA) development. It contains key tools, settings for seamless DX, and an demo app presenting good practices and used tooling in action.
# Add to your Claude Code skills
git clone https://github.com/bartstc/vite-ts-react-templateAn opinionated, production-ready starter for Single Page Application development with React. Pre-configured tooling, libraries, and a demo app so you can skip the boilerplate and focus on building.
.github/instructions/, .github/skills/, .github/prompts/)CLAUDE.md), skills, subagents, and custom commands (.claude/)No comments yet. Be the first to share your thoughts!
components/, application/, providers/, models/) with strict dependency rulesdocs/architecture.mdThis project uses spec-driven development for non-trivial features. Instead of prompting an AI agent to "build X," you collaboratively write a short spec (80–150 lines) that constrains intent, design, and sequencing before any code is written.
specs/lessons.md and feed back into future sessions.docs/spec-development-docs.mdClone the repo and set up your own remote:
git clone --depth 1 https://github.com/bartstc/spa-vite-template.git [project_name]
cd [project_name]
rm -rf .git && git init
git remote add origin git@github.com:username/project.git
It's recommended to run the dev server inside a container for consistent Node/PNPM versions. If you're using VS Code, the included devcontainer config handles this out of the box.
| Command | Description |
| ---------------------- | ------------------------------------------ |
| pnpm dev | Dev server with HMR on port 5173 |
| pnpm lint | Check for lint errors |
| pnpm build | Production build |
| pnpm test | Run all tests (unit + storybook) |
| pnpm test:unit | Unit tests only |
| pnpm test:storybook | Storybook component tests only |
| pnpm test:coverage | Tests with coverage report |
| pnpm test:e2e | E2E tests (headless) |
| pnpm test:e2e:ui | E2E in interactive web UI mode |
| pnpm test:e2e:headed | E2E with visible browser |
| pnpm test:e2e:debug | E2E in debug mode |
| pnpm test:e2e:report | Open the HTML report from the last E2E run |
| pnpm storybook | Storybook on port 6006 |
*.test.ts, *.test.tsx)src/pnpm test:unit*.stories.tsx)src/pnpm test:storybook*.spec.ts)e2e/pnpm test:e2eThis template is opinionated — it picks libraries so you don't have to. If something doesn't fit your project, here's how to strip it out:
| Library | What to remove |
| ------------ | -------------------------------------------------------------------------------------- |
| Chakra UI | src/lib/components/, Chakra provider in src/app/, @chakra-ui/* deps |
| React Router | src/pages/, route config in src/app/, react-router dep |
| React Query | Query provider in src/app/, src/lib/api/ query hooks, @tanstack/react-query deps |
| i18next | src/lib/i18n/, i18n provider in src/app/, i18next + react-i18next deps |
| Zustand | Store files in src/features/*/stores/, zustand dep |
| XState | State machine files (example usage), xstate + @xstate/react deps |
| MSW | src/test-lib/handlers/, msw dep, browser/server setup files |
After removing, run pnpm install to clean the lockfile and pnpm lint to catch broken imports.
Open for contributions — bugfixes, new features, and extra modules are welcome.