{"id":23687533,"url":"https://github.com/dsvjetl/react-redux-tanstack-msw-js-starter","last_synced_at":"2026-04-06T02:34:12.464Z","repository":{"id":269099251,"uuid":"906401834","full_name":"dsvjetl/react-redux-tanstack-msw-js-starter","owner":"dsvjetl","description":"Starter/Boilerplate for React app including configured libraries/tech: Vite, Redux, Tanstack Query, Mock Service Worker, Prettier, ESLint, SCSS, Plop.js, Husky, etc..","archived":false,"fork":false,"pushed_at":"2025-02-01T02:27:25.000Z","size":671,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-22T02:41:03.061Z","etag":null,"topics":["eslint","husky","husky-hooks","javascript","mock-service-worker","msw","plop","plopjs","prettier","prettier-eslint","react","reactjs","redux","redux-toolkit","scss","scss-modules","tanstack","tanstack-query","tanstack-react-query","vite"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dsvjetl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-12-20T20:31:32.000Z","updated_at":"2025-02-01T02:27:29.000Z","dependencies_parsed_at":"2024-12-20T22:34:28.984Z","dependency_job_id":"06dfdbc9-ee22-432e-853b-6dab21bc5c5e","html_url":"https://github.com/dsvjetl/react-redux-tanstack-msw-js-starter","commit_stats":null,"previous_names":["dsvjetl/react-redux-tanstack-msw-js-starter"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/dsvjetl/react-redux-tanstack-msw-js-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsvjetl%2Freact-redux-tanstack-msw-js-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsvjetl%2Freact-redux-tanstack-msw-js-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsvjetl%2Freact-redux-tanstack-msw-js-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsvjetl%2Freact-redux-tanstack-msw-js-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dsvjetl","download_url":"https://codeload.github.com/dsvjetl/react-redux-tanstack-msw-js-starter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsvjetl%2Freact-redux-tanstack-msw-js-starter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31457722,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T21:22:52.476Z","status":"online","status_checked_at":"2026-04-06T02:00:07.287Z","response_time":112,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["eslint","husky","husky-hooks","javascript","mock-service-worker","msw","plop","plopjs","prettier","prettier-eslint","react","reactjs","redux","redux-toolkit","scss","scss-modules","tanstack","tanstack-query","tanstack-react-query","vite"],"created_at":"2024-12-29T23:44:56.927Z","updated_at":"2026-04-06T02:34:12.447Z","avatar_url":"https://github.com/dsvjetl.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JavaScript React Starter [Redux / Tanstack Query / Mock Service Worker]\n\n![Version](https://img.shields.io/badge/version-1.0.0-blue)\n![License](https://img.shields.io/badge/license-MIT-green)\n\n## Overview\n\nA modern React starter kit with Redux, Tanstack Query, and Mock Service Worker, optimized for fast development with Vite.\n\n![React](https://user-images.githubusercontent.com/74038190/212257467-871d32b7-e401-42e8-a166-fcfd7baa4c6b.gif)\n\n## Requirements\n\n- **Node.js** ~^v23.x.x\n  - If you are using `nvm`, the project includes an `.nvmrc` file, so you can run:\n  ```bash\n    nvm use\n  ```\n- **NPM** ~^v10.x.x\n\n## Features\n\n- **Vite** for blazing-fast development and build optimizations.\n- **React \u0026 Redux** for state management and UI rendering.\n- **React Router DOM** for routing.\n- **Axios** for HTTP requests.\n- **React Query** integration for server state management.\n  - Integration with **React Query Devtools** for debugging server state.\n  - Scalable architecture with Redux.\n- **ESLint** and **Prettier** for maintaining code quality and style consistency.\n- **SASS Embedded** for advanced styling capabilities.\n- **Husky** for Git hook management.\n- **Knip** for dependency analysis and dead code detection.\n- **Vitest** for testing and test-driven development.\n- **Plop.js** for component and file scaffolding.\n- Mocking with **MSW** (Mock Service Worker).\n  - Built-in testing \u0026 API mocking with MSW.\n\n## Installation\n\nTo set up the project locally, follow these steps:\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/dsvjetl/react-redux-tanstack-msw-js-starter \u003cnew_project_name\u003e\n   cd \u003cnew_project_name\u003e\n   ```\n\n   - Or `Use this template` on the GitHub repository page.\n\n2. (Optional If you are using `nvm`) Switch to the project Node.js version:\n\n   ```bash\n   nvm use\n   ```\n\n3. Install dependencies using `npm`:\n\n   ```bash\n   npm install\n   ```\n\n4. Set up Husky hooks:\n\n   ```bash\n   npm run prepare\n   ```\n\n5. Copy the environment variables file:\n\n   ```bash\n   cp .env.example .env.local\n   cp .env.example .env.production\n   ```\n\n6. Start the development server:\n\n   ```bash\n   npm run dev\n   ```\n\n7. Open the project in your browser at `http://localhost:5173` (default port for Vite).\n\n## .env files\n\n`.env.example` includes `VITE_API_BASE_URL=https://jsonplaceholder.typicode.com`, which is a dummy endpoint for\nshowcasing.\n\n`VITE_API_BASE_URL` should be updated with the desired endpoint URL, and you can add more `.env` variables as long as\nthey start with `VITE_API`.\n\n**`VITE_API_MOCK=false` should be present in the `.env` files** so the MSW script `\"dev:mock\": \"VITE_API_MOCK=true vite\"`\ncan work properly.\n\n## Example files - how to handle\n\n**The project uses examples** to showcase to developers how to use them:\n\n- `src/views/HomeExample`\n- `src/shared/components/HeaderExample`\n\nThese examples are connected to:\n\n- `src/store/todoSlice.js`\n- `src/routing/Routes.jsx`\n\n**Delete or refactor example files to start the project from scratch.**\n\n## Project Structure\n\n```plaintext\n.\n├── src/\n│   ├── shared/          # Reusable React components, services, utils, etc.\n│   ├── views/           # Page-level React components (Check HomeExample component for more info)\n│   ├── store/           # Redux store\n│   ├── routing/         # React Router configuration and route definitions\n│   ├── assets/          # Multimedia files and styling assets (e.g., images, fonts)\n│   ├── mocks/           # Mock Service Worker configuration and mock data\n│   ├── hooks/           # Custom React hooks\n│   ├── queries/         # React Query client and query definitions\n│   └── App.jsx          # Main application entry point\n├── public/              # Static assets (e.g., index.html, images) \u0026 mockServiceWorker.js\n├── plop-templates/      # Templates for Plop.js scaffolding\n├── .env.example         # Example environment variables file\n├── .gitignore           # Git ignore rules\n├── .nvmrc               # Node.js version configuration\n├── .prettierignore      # Prettier ignore rules\n├── .prettierrc          # Prettier additional configuration\n├── eslint.config.js     # ESLint configuration\n├── index.html           # Main HTML entry point\n├── LICENSE              # Project license\n├── plopfile.cjs         # Plop.js configuration for scaffolding\n├── README.md            # Documentation\n├── vite.config.js       # Vite configuration\n└── vitest.setup.js      # Vitest configuration\n```\n\nFolder structure example:\n![Imgur](https://i.imgur.com/8yEUEUn.png)\n\n## Scripts\n\nBelow are the standard scripts defined in the `package.json`:\n\n- **Switch to the project Node.js version:**\n\n  ```bash\n  nvm use\n  ```\n\n- **Start the development server:**\n\n  ```bash\n  npm run dev\n  ```\n\n- **Start the mock (MSW) server:**\n\n  ```bash\n  npm run dev:mock\n  ```\n\n- **Create a production build:**\n\n  ```bash\n  npm run build\n  ```\n\n- **Preview the production build locally:**\n\n  ```bash\n  npm run preview\n  ```\n\n- **Run unit and integration tests:**\n\n  ```bash\n  npm run test\n  ```\n\n- **Run tests in watch mode:**\n\n  ```bash\n  npm run test:watch\n  ```\n\n- **Run tests with the Vitest UI:**\n\n  ```bash\n  npm run test:ui\n  ```\n\n- **Run linting checks:**\n\n  ```bash\n  npm run lint\n  ```\n\n- **Format the project:**\n\n  ```bash\n  npm run format\n  ```\n\n- **Analyze dependencies and dead code with Knip.js:**\n\n  ```bash\n  npm run scan:deadcode\n  ```\n\n## Husky commit checks\n\nHusky is configured so you can commit only if ESLint and Prettier checks pass.\n\n**Unit tests are not required for Husky checks** because of:\n\n- Faster development cycle\n- Testing can be postponed\n- Encouraging developer autonomy\n- Overhead in small projects\n\n## Libraries and Tools\n\n| Library/Tool             | Version | Use Case                                  |\n| ------------------------ | ------- | ----------------------------------------- |\n| **React**                | 18.3.1  | UI rendering                              |\n| **React Redux**          | 9.2.0   | State management                          |\n| **React Router DOM**     | 7.0.2   | Client-side routing                       |\n| **Axios**                | 1.7.9   | HTTP requests                             |\n| **React Query**          | 5.62.8  | Server state management                   |\n| **React Query Devtools** | 5.62.8  | Debugging server state in React Query     |\n| **ESLint**               | 8.57.1  | Error prevention and code standardization |\n| **Prettier**             | 3.4.2   | Code formatting                           |\n| **SASS Embedded**        | 1.83.0  | Advanced CSS styling                      |\n| **Mock Service Worker**  | 2.7.0   | API data mocking for testing              |\n| **Husky**                | 9.1.7   | Git hook management                       |\n| **Knip**                 | 5.41.1  | Dependency analysis and dead code check   |\n| **Vite**                 | 6.0.3   | Lightning-fast development build tool     |\n| **Vitest**               | 2.1.8   | Unit testing                              |\n| **Plop.js**              | 4.0.1   | Scaffolding tool for React components     |\n| **TypeScript**           | 5.7.2   | Static type checking and JS enhancement   |\n\nFor a complete list of dependencies, check the `package.json` file.\n\n## Development Guidelines\n\n### Adding New Features\n\nThis project utilizes **Plop.js** to scaffold components. To create a new component, run:\n\n```bash\nnpm run generate\n```\n\nFollow the prompts to auto-generate boilerplate files for the React components:\n\n1. Navigate to the desired directory using the terminal.\n\n2. Run the following command:\n\n   ```bash\n   npm run generate\n   ```\n\n3. You will be prompted to provide the following inputs:\n\n   - **Component Name**: Enter the name of your new React component, for example: `Header`\n\n4. Once the inputs are provided, Plop will generate the boilerplate files for your component in the appropriate\n   directory under `components/ComponentName/`.\n\n5. Review the generated files and customize them as needed.\n\nThis ensures the quick creation of React components that follow the project's coding standards and directory structure.\n\n### Linting and Formatting\n\nRun the linting script to check for code issues:\n\n```bash\nnpm run lint\n```\n\nPrettier is configured to auto-format code on save using your IDE. Ensure that your development setup supports Prettier\nauto-formatting.\n\n### Running Tests\n\nUse **Vitest** to run tests for your components or business logic:\n\n- Run all tests:\n\n  ```bash\n  npm run test\n  ```\n\n- Run the Vitest UI for an interactive testing experience:\n\n  ```bash\n  npm run test:ui\n  ```\n\n### Dependency Analysis with Knip.js\n\nRun Knip.js to check for unused dependencies or dead code in the project. This helps to keep the codebase lean and\nclean:\n\n```bash\nnpm run scan:deadcode\n```\n\n### Mocking Data with MSW\n\nThis project uses **Mock Service Worker (MSW)** to mock API endpoints during development and testing. MSW ensures\ncontrolled responses and eliminates dependency on actual backend services.\nSee `src/views/HomeExample/mocks/postsMock.js` and `src/mocks/handlers.js` for examples.\n\n```bash\nnpm run dev:mock\n```\n\n## Who is this Starter Kit for?\n\n- Developers who want to build fast and stable React SPA applications with modern tools and features (no SSR).\n  - SSR (Server-Side Rendering) can be implemented manually if needed.\n\n## Contribution Guidelines\n\n1. Fork the repository and create a new branch for your feature or bug fix.\n2. Ensure all changes are tested, formatted, and do not introduce linting errors.\n3. Submit a pull request with a clear description of the changes.\n\n## License\n\nThis project is licensed under the [MIT License](./LICENSE).\n\n---\n\n**🎯 Want to get started quickly? Fork the repo and launch your project in under 2 minutes! 🚀**\n\n---\n\nHappy Coding! 🎉\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdsvjetl%2Freact-redux-tanstack-msw-js-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdsvjetl%2Freact-redux-tanstack-msw-js-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdsvjetl%2Freact-redux-tanstack-msw-js-starter/lists"}