React Template Project

A comprehensive React boilerplate with modern development practices, customizable components, and automation tools. This template accelerates your development workflow with a well-structured project setup and ready-to-use components.

Features

• Modern Stack: React 18, TypeScript, Vite, Tailwind CSS
• Component Library: Pre-built UI components with multiple design variants
• Utility Scripts: Automated tools for component, route, hook, and service creation
• Testing Setup: Configured with Vitest and React Testing Library
• State Management: Zustand for lightweight state management
• Form Handling: React Hook Form with Zod validation
• Routing: React Router with predefined layouts
• Code Quality: ESLint, Prettier, Husky, and lint-staged

Project Structure

src/
├── components/          # Reusable UI components
│   ├── ui/             # Base components (Button, Input, Card, etc.)
│   ├── layout/         # Layout components (Header, Footer, Layout)
│   ├── common/         # Shared components (ErrorBoundary, LoadingSpinner)
│   └── demo/           # Component showcases (can be removed with clean-project script)
├── pages/              # Page components
├── hooks/              # Custom React hooks
├── utils/              # Utility functions
├── types/              # TypeScript definitions
├── constants/          # Application constants
├── services/           # API services
├── store/              # State management
└── styles/             # Global styles and Tailwind configuration

Getting Started

1. use npx

   npx create-shazi-react-app@latest

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Clean demo content (optional):

   npm run clean-project

Utility Scripts

Project Setup

• Clean Project Script

  npm run clean-project

  Removes demo content and sets up a minimal project structure with only essential components.

• Color Palette Modification

  npm run modify-color-palette

  Changes the project's color theme by updating Tailwind config with predefined palettes.

Component Generation

• Component Creation

  npm run create-component

  Creates new components with proper structure and optional test files.

• Route Creation

  npm run create-route <RouteName>

  Interactive: Generates new pages with predefined layouts from available options.

  npm run create-route <RouteName> <layout-name>

  Direct: Creates a route with the specified layout immediately.

  Available Layouts: | Name | Number | |-----------------|--------| | split-screen | 1 | | sidebar-content | 2 | | header-content | 3 | | dashboard | 4 | | holy-grail | 5 | | card-grid | 6 | | masonry | 7 | | form | 8 | | mobile-first | 9 |

• Hook Creation

  npm run create-hook

  Creates custom React hooks with boilerplate code.

• Service Creation

  npm run create-service

  Creates API service modules with proper structure.

• Icon Generation

  npm run generate-icons

  Generates icon components from SVG files.

Development Commands

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run test - Run tests
• npm run test:ui - Run tests with UI
• npm run test:coverage - Run tests with coverage
• npm run lint - Check code style
• npm run lint:fix - Fix code style issues
• npm run format - Format code with Prettier
• npm run type-check - Check TypeScript types
• npm run analyze - Analyze bundle size

Component Design Variants

This template provides components in multiple design variants:

• Modern
• Glassmorphic
• Neumorphic
• Skeuomorphic

You can choose the design that best fits your project requirements.

Best Practices for Using This Template

• Use the utility scripts to create new components, routes, hooks, and services
• Modify the Tailwind configuration in tailwind.config.js for theme customization
• Leverage the pre-built components instead of creating from scratch
• Use the clean-project script when starting a new project to remove demo content
• Follow the established folder structure for consistency