Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ascii-16/react-query-zustand-ts-vite-boilerplate
A React boilerplate with Typescript using Vite. Includes React-query, Zustand, Tailwindcss, EsLint + Prettier, Husky Commit Lint, Jest with PWA support
https://github.com/ascii-16/react-query-zustand-ts-vite-boilerplate
boilerplate eslint jest pwa react react-query reactjs tailwindcss typescript vite zustand
Last synced: 23 days ago
JSON representation
A React boilerplate with Typescript using Vite. Includes React-query, Zustand, Tailwindcss, EsLint + Prettier, Husky Commit Lint, Jest with PWA support
- Host: GitHub
- URL: https://github.com/ascii-16/react-query-zustand-ts-vite-boilerplate
- Owner: ascii-16
- License: mit
- Created: 2022-02-24T12:26:19.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-07T23:00:11.000Z (about 1 year ago)
- Last Synced: 2024-10-01T00:42:42.946Z (about 1 month ago)
- Topics: boilerplate, eslint, jest, pwa, react, react-query, reactjs, tailwindcss, typescript, vite, zustand
- Language: TypeScript
- Homepage: https://whimsical-sunflower-96e7fb.netlify.app/
- Size: 634 KB
- Stars: 88
- Watchers: 2
- Forks: 21
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React Query, Zustand, TypeScript & Vite Boilerplate
This is a template repository to set up a project using React, React Query, Zustand, TypeScript, and Vite, aiming to provide a scalable structure and essential configurations to kick-start your next application.
## Stack
| Tool | Purpose |
| ------------ | ------------------------------------------------- |
| React | A JavaScript library for building user interfaces |
| React Query | Data synchronization library for React |
| Zustand | Minimalist state management |
| TypeScript | Static typing for JavaScript |
| Vite | Build tool and development server |
## Features
:white_check_mark: Faster build with Vite
:white_check_mark: State management using Zustand
:white_check_mark: Data fetching using React Query and Axios
:white_check_mark: TypeScript for static typing
:white_check_mark: Pre-configured with ESLint and Prettier for code linting and formatting
:white_check_mark: Includes example components to get started quickly
## Required Versions
| Tool | Version |
| ----------- | ---------- |
| NodeJS | >=16 |
| TypeScript | >=4.9.4 |
## Getting Started
### Clone the repository
```
git clone https://github.com/vintagegnome/react-query-zustand-ts-vite-boilerplate.git
cd react-query-zustand-ts-vite-boilerplate
```
### Installing Dependencies
```
npm install
```
### Running Locally
To run the project locally, simply execute:
```
npm run dev
```
## Scripts
| Command | Description |
| ------------- | -----------------------------------------------------------------------------|
| `start` | Run `build:css` then watch TailwindCSS and Vite concurrently |
| `watch:css` | Watch for changes in `index.css` and output to `styles.css` using TailwindCSS|
| `build:css` | Build CSS using TailwindCSS from `index.css` to `styles.css` |
| `build` | Run TypeScript compiler, build CSS and then Vite build |
| `preview` | Run Vite preview |
| `lint` | Lint TypeScript files using ESLint |
| `lint:fix` | Fix linting issues in TypeScript files using ESLint |
| `format` | Format `.ts`, `.tsx`, and `.json` files using Prettier |
| `test` | Run Jest tests |
| `release` | Run `standard-version` for versioning |
| `commit` | Use `git-cz` for commits |
| `prepare` | Set up Husky for git hooks in a production environment |
## Project Structure
Here's a basic overview of the significant folders in the boilerplate:
```
├── public
└── src
├── components
├── hooks
├── lib
├── pages
├── routes
├── services
├── store
└── types
```
| Folder | Description |
|-------------|------------------------------------------------------------------------------------------------------|
| **`src/`** | Contains the main source code for the application. |
| `components`| Reusable React components, each handling a specific piece of the UI. |
| `hooks` | Custom React hooks that encapsulate logic and behaviors which can be reused across different components. |
| `lib` | Miscellaneous utility functions, helpers, and other standalone pieces of logic. |
| `pages` | Components representing full pages in the application, typically corresponding to routes. |
| `routes` | Configuration and components related to routing in the application. |
| `services` | Functions or classes that handle tasks like API calls, data processing, or other "service"-like tasks. |
| `store` | Zustand st ores for state management, holding |
| **`public/`** | Contains static assets like images, fonts, and the entry HTML file. Assets in this directory are served directly and are not processed by bundlers like Vite. |
## Features
| Tool/Library | Description |
|--------------|----------------------------------------------------------------|
| React Query | Helps in fetching, caching, and updating asynchronous data. |
| Zustand | For simple and scalable state management. |
| TypeScript | For type-safe code and scalability. |
| Vite | For faster builds and a smoother developer experience. |
## Contribution
If you'd like to contribute to this boilerplate, feel free to fork and send a PR. All contributions are welcome!
## License
[MIT](https://choosealicense.com/licenses/mit/)