0.0.5 • Published 11 months ago
@ahmedshakeel083/react-starter-kit v0.0.5
React Starter Kit
This template provides a minimal setup to get React with Typescript, Vite, HMR along with other features.
Table of Contents
- Features
- Packages Installed
- File Structure
- Usage
Features
- State Management - Redux Toolkit
- Routing - React Router with createBrowserRouter
- Styling - Shadcn Ui Components with Tailwind css
- Testing - Testcases are written with vitest, jest
- Linting - Eslint with Husky for pre-commit checks
- Network Layer - network file using axios
- Form Validation Schema - React Hook Forms using zod
Packages Installed
Name | Usage |
---|---|
@hookform/resolvers | Forms creation with validation |
axios | Network Calls |
react-ga4 | Tracking in Google Analytics |
react-hook-form | Create Forms and Validate |
react-redux | State Management |
react-router-dom | To enable routing between internal pages |
tailwind-merge | Merge classes for same component |
zod | Form Validation |
vite | Development Build tool |
typescript | Type checks |
File Structure
├──.husky
│ └── pre-commit # Script to run before commit eg linting
├── public # Can be used for assets incase of exceptions
├── src
│ ├── assets # To manage and optimize all the images, fonts, etc
│ ├── components
│ │ ├── common # Reusable common components
│ │ ├── ui # Reusable shadcn ui components
│ ├── hooks # Custom hooks
│ ├── lib
│ │ ├── constants # constants throughout the project
│ │ └── utils # shadcn ui utils
│ ├── network # Network requests and API layer
│ ├── pages # Pages or views
│ ├── state # State management
│ │ ├── slices # All the reducers/slices
│ │ └── store.ts # All the reducers to be imported here
│ ├── tests # Testcases
│ ├── App.tsx # App component with all routes
│ ├── index.css # For css variables and tailwind imports
│ ├── main.tsx # Entry Point for the project
│ ├── output.css # Tailwind css output file
├── .env.development # development environment file
├── .env.production # production environment file
├── .env.uat # uat environment file
├── .eslintrc.json #linting configuration
├── .gitignore # Git Ignored folder and files name
├── .eslintrc # ESLint configuration
├── components.json # Shadcn ui components config
├── index.html # Project HTML file
├── postcss.config.js # Tailwind config using this file
├── tailwind.config.js # Tailwind main config file
├── tsconfig.app.json # typescript config file
├── tsconfig.typedoc.json # Typedoc Config file
├── vite.config.ts # Vite as build tool config
├── vitest.config.ts # Vitest configuration
├── vitest.setup.ts # Vitest configuration
├── README.md
└── package.json
Usage
- To run the project in local
npm install && npm run dev
- To run the project build
npm run build && npm run preview
- To run testcases
npm run test
npm run coverage
- To create a new typedoc after making changes to project or adding new types or new components
npm run docs
- To run Storybook to checkout all the variants of the components
npm run storybook