/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

Primary LanguageTypeScriptMIT LicenseMIT

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

My Tech 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

✅ Faster build with Vite

✅ State management using Zustand

✅ Data fetching using React Query and Axios

✅ TypeScript for static typing

✅ Pre-configured with ESLint and Prettier for code linting and formatting

✅ 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