Introduction

A starter project for React with Vite, StyleX, and Typescript. This starter kit is already pre-configured and Typescript. This starter kit is already pre-configured with absolute import, TanStack Router, TanStack Form, TanStack Query, TanStack Store, Oxlint, and other goodies. Authentication is implemented using DummyJSON API with ofetch, easily replaceable with your own backend.

Browse the component library live in Storybook.

Note

This project just a template that I use for my personal use, so you may encounter bugs. Please review the release notes thoroughly before updating, as breaking changes can occur!

The Complete Stack

• Vite - Next Generation Frontend Tooling.
• React - A JavaScript library for building user interfaces.
• StyleX - The styling system for ambitious user interfaces.
• Lucide Icons - Beautiful & consistent 1600+ vector icons.
• Typescript - Strongly typed programming language.
• TanStack Router - Type-safe routing for React.
• TanStack Form - Headless, type-safe form state management.
• TanStack Query - Powerful asynchronous state management.
• TanStack Store - Lightweight, type-safe state management.
• TanStack Table - A powerful engine for building Data Grids.
• TanStack Virtual - A headless UI utility for virtualizing long lists of elements.
• TanStack Hotkeys - A type-safe, framework-agnostic library for handling keyboard shortcuts.
• TanStack Chart - A typed, tree-shakable chart grammar for SVG and Canvas.
• React Testing Library - Light-weight solution for testing React components.
• Vitest - Blazing Fast Unit Test Framework.
• Oxlint - High-performance JavaScript linter.
• Oxfmt - High-performance code formatter.
• Storybook - UI component explorer for frontend developers.

Quick Start

Installation

npx tiged riipandi/vite-react-template myapp-name

Don't forget to change myapp-name with your real application name.

Up and Running

NPM	Yarn	PNPM	Description
npm install	yarn	pnpm install	install the dependencies
npm run dev	yarn dev	pnpm dev	serve with hot reload
npm run build	yarn build	pnpm build	build for production
npm run preview	yarn preview	pnpm preview	launch generated build

Application will run at http://localhost:3000

For detailed explanation on how things work, check out Vite documentation.

Demo Account

Authentication hits the DummyJSON API through a same-origin proxy, using HttpOnly cookie sessions. Use any valid DummyJSON user to sign in, e.g.:

Username	Password
emilys	emilyspass

Tick Remember me to extend the session lifetime to 30 days.

Important

Cookie auth needs a same-origin API. pnpm dev, pnpm preview, and pnpm start all ship with the same-origin proxy (start/preview serve the production build via Vite). See Deploying the SPA.

Deploy your own

Fork this repository, connect it to Netlify, and pushing to master will deploy to production! 🚀

Deploying the SPA

The build output is a static SPA (dist/). Cookie-based auth requires a same-site API — browsers do not send SameSite=Lax cookies on cross-site requests. Pick one:

• Netlify — works out of the box: netlify/functions/api.ts transparently proxies every /api/* request (all HTTP methods) to the demo backend on the site's own origin, so the HttpOnly session cookies stick. The deploy also publishes Storybook under /storybook/ (relative asset URLs, no extra base config needed).
• Own backend (recommended for production) — set PUBLIC_API_URL to your API on the same parent domain (e.g. https://api.example.com) and implement the auth endpoints (POST /auth/login, GET /auth/me, POST /auth/refresh, POST /auth/logout, GET /auth/session).
• Reverse proxy — map /api to your backend server-side (nginx, Caddy, …) and keep PUBLIC_API_URL=/api.

Cloudflare Deployment

You need to add NODE_VERSION with value 18.17.1 or 20.9.0 on the environment variables setting. Visit Cloudflare pages docs for more information.

For the preview branch:

PUBLIC_SITE_URL=${CF_PAGES_URL}

Development

This project uses TypeScript for type checking, Oxlint for linting and Oxfmt for code formatting which are configured in .oxlintrc.json and .oxfmtrc.json. It's recommended to get TypeScript set up for your editor and install an editor plugin (like the VSCode Oxc plugin) to get auto-formatting on saving and get a really great in-editor experience with type checking and auto-complete.

Thanks to

In general, I'd like to thank every single one who open-sources their source code for their effort to contribute something to the open-source community. Your work means the world! 🌍 ❤️

Attribution

• MadeUI — the Base UI + StyleX components in this template are based on its components.
• Reshaped — the design system in this template is built on its design system.
• ReUI — the Data Grid, Input Phone, Sortable, and Kanban components are ports of ReUI.

Notice

Why using web workers for auth? Keep React Responsive with Web Workers and useRef

License

Licensed under either of Apache License 2.0 or MIT license at your option.

Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in this project by you, as defined in the Apache-2.0 license, shall be dual licensed as above, without any additional terms or conditions.

Copyrights in this project are retained by their contributors.

See the LICENSE-APACHE and LICENSE-MIT files for more information.

---

_{🤫 Psst! If you like my work you can support me via GitHub sponsors.}