Introduction

A starter project for React with Vite, Tailwind CSS, and Typescript. This starter kit is already pre-configured with absolute import, React Router, and other goodies. This starter also provides basic authentication implementation, you can use any authentication provider or your own.

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.
• React Router DOM - Declarative routing for React.
• React Hook Form - Performant, flexible and extensible forms with easy-to-use validation.
• React Testing Library - Light-weight solution for testing React components.
• Vitest - Blazing Fast Unit Test Framework.
• Biome - Format, lint, and more in a fraction of a second.
• 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, Biome for code formatting and linting which is configured in biome.json. It's recommended to get TypeScript set up for your editor and install an editor plugin (like the [VSCode Biome plugin][vscode-biome]) 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.}