Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Quilljou/vite-react-ts-tailwind-starter
A boilerplate for quickly creating React applications with the best developer experience.
https://github.com/Quilljou/vite-react-ts-tailwind-starter
less react react-i18next react-query shadcn-ui tailwindcss typescript vite
Last synced: about 1 month ago
JSON representation
A boilerplate for quickly creating React applications with the best developer experience.
- Host: GitHub
- URL: https://github.com/Quilljou/vite-react-ts-tailwind-starter
- Owner: Quilljou
- License: mit
- Created: 2023-09-13T04:26:34.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-01-12T08:35:19.000Z (4 months ago)
- Last Synced: 2024-01-26T10:11:13.531Z (4 months ago)
- Topics: less, react, react-i18next, react-query, shadcn-ui, tailwindcss, typescript, vite
- Language: TypeScript
- Homepage: https://vite-react-ts-tailwind-starter.pages.dev/
- Size: 213 KB
- Stars: 24
- Watchers: 1
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-vite - vite-react-ts-shadcn-starter - Template for creating `React 18` SPA apps with `TypeScript`, `React Router`, `Tailwind CSS`, `Shadcn UI`, `React Query`, `ESLint`, `Prettier`, `Stylelint`, `Husky`, `React-i18next`, `Transmart`. (Get Started / Templates)
- jimsghstars - Quilljou/vite-react-ts-tailwind-starter - A boilerplate for quickly creating React applications with the best developer experience. (TypeScript)
README
## Vite-React-TS-Tailwind-Starter
Choosing a technology stack is a very subjective matter, if you happen to like using `Vite`, `Tailwind`, `TS` and `shadcn ui` and more to build React SPA applications, then give it a try.
## Run
```sh
yarn
yarn dev
```
We prefer `Yarn` as package manager, If you want to use `pnpm` or `npm`, feel free to use
## Tech Stack
- [vite](https://vitejs.dev/)
- [react](https://reactjs.org/)
- [shadcn ui](https://ui.shadcn.com/)
- [react-i18next](https://github.com/i18next/react-i18next)
- [react-lucide](https://lucide.dev/)
- [transmart](https://github.com/Quilljou/transmart)
- [react-query](https://tanstack.com/query/latest/)
- [tailwindcss](https://tailwindcss.com/)
- [less](http://lesscss.org/)
- [postcss](https://postcss.org/)
- [react-router-dom](https://reactrouter.com/en/6.16.0)
- [eslint](https://eslint.org/)/[stylelint](https://stylelint.io/)
- [prettier](https://prettier.io/)
- [svgr](https://react-svgr.com/)
- [editorconfig](https://editorconfig.org/)
- [husky](https://typicode.github.io/husky/#/)/[lint-staged](https://github.com/okonet/lint-staged)
- [commitlint](https://commitlint.js.org/)
## Project Structure
```sh
src
├── app.tsx # App entry
├── assets # Assets for images, favicon etc
├── components # React components
├── hooks # React hooks
├── i18n # i18n files
├── lib # Utils、tools、services
├── main.tsx # File entry
├── pages # One .tsx per page
├── router.tsx # Routers
├── styles # Less files
├── types # Typescript types
└── vite-env.d.ts
```
## Deploy
[Cloudflare Pages](https://pages.cloudflare.com/) is my first option to deploy React App，follow [this documentation](https://developers.cloudflare.com/pages/framework-guides/deploy-a-react-site/#deploying-with-cloudflare-pages) to deploy your site. Don't forget build directory should choose `dist`
[Vercel](https://pages.cloudflare.com/) is a good option too，Go to [Vercel](https://vercel.com/new) and link to your Git Repo
Enjoy building.
## Related
- [Next Starter](https://github.com/Quilljou/next-ts-tailwind-starter)
- [React Starter](https://github.com/Quilljou/vite-react-ts-tailwind-starter)
- [Figma Starter](https://github.com/Quilljou/figma-react-tailwind-starter)