What is SPA Vite Template

This project provides a basic dev setup intended for Single Page Application (SPA) development. It contains already configured tools and libraries providing a quick and seamless start, making the Developer Experience (DX) and scalability of your project easily manageable. It also shows a practical application of selected tools and practices in a form of a demo app.

Template versions

Bearing in mind flexibility and openness to various tools and preferences, this template allows you to adjust your workflow to your needs, assuring best practices and following opinionated frontend/React trends at the same time.

Thus, the template provides two different versions, differing in complexity and spectrum of solved problems.

Basic version - basic

The most basic config of the dev environment. It provides seamless DX and assures a legible and consistent codebase.

When to use

This version is free of any libraries. If the core version doesn't match your preferences and expectations, the basic version will be perfect as a basis for your personalized project setup.

Key features

• Dev environment based on Vite toolkit.
• Unit, integration, and component testing with Vitest and Storybook.
• End-to-end testing with Playwright.
• Static code analysis: eslint, prettier, husky.
• TypeScript support.
• Devcontainer config for VS Code.
• PNPM as a package manager.
• CI setup (tests, build, tests coverage report, deploy draft) with GitHub Actions.
• Github Copilot configuration (instructions).
• Claude Code configuration (CLAUDE.md file, .claude directory with settings and commands, and remote development setup).

Extended version - core

The extension of the basic version. It contains already configured tools and libraries that aim to solve the most basic and typical problems existing in a modern frontend application (SPA).

When to use

If configured tools and overall setup meet your requirements, you should definitely choose this version as the starting point for your project.

Key features

• Everything that's included in the basic version.
• Simple, modular, and accessible components based on Chakra UI.
• Data fetching and external state synchronization based on React Query.
• Routing based on React Router 7 with strong path typing.
• Internalization with i18next.
• Formatting tools for numbers, monetary values, and dates (easily extendable with any date library like DayJS).
• State management with [Zustand](https://docs.pmnd.rs/zust...