Introduction

A starter project for React with Vite, Tailwind CSS, 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.

The Complete Stack

• Vite - Next Generation Frontend Tooling.
• React - A JavaScript library for building user interfaces.
• Tailwind CSS - A utility-first CSS framework for rapidly building custom designs.
• Lucide Icons - Beautiful & consistent icons made by the community.
• 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.
• 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.

Deploy your own

You'll want to fork this repository and deploy your own Next.js website. Once you have an image generator that sparks joy, you can setup automatic GitHub deployments so that pushing to master will deploy to production! 🚀

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:

VITE_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! 🌍 ❤️

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.}