0.0.5 • Published 11 months ago

@ahmedshakeel083/react-starter-kit v0.0.5

Weekly downloads
-
License
MIT
Repository
github
Last release
11 months ago

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

NameUsage
@hookform/resolversForms creation with validation
axiosNetwork Calls
react-ga4Tracking in Google Analytics
react-hook-formCreate Forms and Validate
react-reduxState Management
react-router-domTo enable routing between internal pages
tailwind-mergeMerge classes for same component
zodForm Validation
viteDevelopment Build tool
typescriptType 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