@chowdhury/vite-react-redux-ts-starter NPM

Vite React Redux TypeScript Templet

A minimalistic Vite-based starter template for building React applications with TypeScript. This starter kit provides a well-configured development environment and includes essential tools and shadcn/ui libraries for efficiently developing and maintaining your React projects.

Features

Vite: A fast and efficient build tool for front-end development.
React: A popular JavaScript library for building user interfaces.
TypeScript: A statically typed superset of JavaScript for improved code quality.
Redux Toolkit: A library for managing application state.
React-Redux: Official React bindings for Redux.
Tailwind CSS: A utility-first CSS framework for quickly styling your components.
ESLint and Prettier: airbnb linting is used for code linting and formatting to maintain code consistency.
Testing Library: For writing and running tests.
Cypress: For end-to-end testing.
Husky and lint-staged: For pre-commit code quality checks.
Commitlint: For ensuring consistent commit messages.
Shadcn/ui: For modern UI components build on top of RadixUI and TailwindCSS.

Getting Started

Installation

To install and use this package, you can follow these simple steps:

Install Node.js: Ensure you have Node.js and npm (Node Package Manager) installed on your system. You can download and install them from nodejs.org.
Create a New Project: Use the following command to create a new project using this package:
```
npx @chowdhury/vite-react-redux-ts-starter my-app
cd my-app
npm install
```
Run the development server::
```
npm run dev
```

This will start the development server, and your app will be available at http://localhost:5173.

Available Scripts

npm run dev: Start the development server.
npm run build: Build the application for production.
npm run start:dev: Start the application in development mode.
npm run lint: Lint the code using ESLint.
npm run test: Run tests using Jest.
npm run format: Format the code using Prettier.
npm run preview: Preview the production build locally.
npm run precommit: Run linting and formatting checks before committing.

Configuration

The tsconfig.json file is configured for TypeScript.
ESLint and Prettier configurations are defined in .eslintrc.js and .prettierrc.js.
Tailwind CSS configuration is located in tailwind.config.js.
Browserslist configuration is available in browserslist.

Folder Structure

src
├── app
│   ├── hooks.ts
│   └── store.ts
├── assets
│   └── img
├── components
│   ├── form
│   ├── layouts
│   └── ui
      ├── button (checkout from here https://ui.shadcn.com/docs/components/button)
├── features
│   ├── counter
│      ├── counterAPI.ts
│      ├── counterSlice.ts
│      └── counterSlice.spec.ts
├── hooks
│   ├── README.md
├── page
│   ├── README.md
├── routes
│   ├── README.md
├── styles
│   ├── tailwind
├── Test
│   ├─ tests-example
│     ├── App.test.tsx
├── types
│   ├── README.md
├── utils
│   ├── README.md
├── App.css
├── App.tsx
├── index.css
├── main.tsx                            # app entry
├── vite-env.d.ts

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

Configure the top-level parserOptions property like this:

   parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
   },

License

This starter template is open-source and available under the MIT License.

Contributing

If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request. I welcome contributions from the community!