create-gsp-react

v2.0.0

Published

10 months ago

Create modern React applications with GSP React Template - Choose from JavaScript/TypeScript with optional Tailwind CSS and ShadcnUI

0High
0Medium
0Low

farklyzz

react template vite typescript tailwind shadcn shadcn-ui formik yup cli create-app create-react-app boilerplate starter scaffold

Create GSP React Template

🚀 The Ultimate React Project Generator

A comprehensive CLI tool that creates production-ready React applications with intelligent 4-step template selection. Choose your language, routing & forms, state management, and styling approach through an interactive guided experience.

Built by: Serdest PALAOGLU
Assisted by: GitHub Copilot & Claude Sonnet 3.5 for quality control and testing

🚀 Quick Start

# Using npx (recommended)
npx create-gsp-react my-app

# Install to current directory
npx create-gsp-react .

# Or install globally
npm install -g create-gsp-react
create-gsp-react my-app

🎯 4-Step Interactive Template Selection

🌐 Step 1: Choose Language

JavaScript - Modern ES2024+ with React 19 and Vite
TypeScript - Full type safety with advanced TypeScript features

🧭 Step 2: Choose Router + Forms

React Router + Formik + Yup - Battle-tested routing and form validation
React Router + React Hook Form + Zod - Modern forms with TypeScript-first validation (v1.3.0)

🗂️ Step 3: Choose State Management

No State Management - Pure React with useState/useEffect
Context API - Built-in React Context for global state
Zustand - Lightweight state management with minimal boilerplate (v1.2.0)
React Query (TanStack) - Server state management with caching (v1.2.0)

🎨 Step 4: Choose Styling

Vanilla CSS - Modern CSS with Sass preprocessing
Tailwind CSS - Utility-first CSS framework
Tailwind CSS + ShadcnUI - Beautiful, accessible UI components

📊 Template Matrix

| Version | Templates Available | Combinations | | ------------------------ | ----------------------- | -------------------------------------------- | | v1.1.1 (Current) | 6 templates | 2 languages × 3 styling options | | v1.2.0 (Coming Soon) | 24 templates | 2 languages × 4 state management × 3 styling | | v1.3.0 (Planned) | 48+ templates | + React Hook Form + Husky/Commitlint |

🛠️ What's Included

Core Features (All Templates)

⚛️ React 19 - Latest React with concurrent features
⚡ Vite - Lightning fast development and build tool
🧭 React Router 7 - Modern declarative routing with data API
🎨 Sass - CSS preprocessing with organized architecture
🔍 ESLint - Code quality and consistency
📱 Responsive Design - Mobile-first approach
🏗️ Component Architecture - Well-organized folder structure

Form Handling Options

Current (v1.1.0):

📝 Formik + Yup - Traditional, battle-tested form handling with schema validation

Coming (v1.2.0):

🎯 React Hook Form + Zod - Modern, performant forms with TypeScript-first validation

State Management Options

Available (v1.2.1):

🚫 None - Use React's built-in state (useState, useEffect, useContext)
🔄 Context API - React's built-in state management with useReducer pattern
🐻 Zustand - Lightweight, modern state management with minimal boilerplate
🔍 React Query (TanStack Query) - Server state management with intelligent caching, background updates, and data synchronization

TypeScript Templates Include

📘 TypeScript 5.2+ - Type safety and better DX
🔧 Proper TypeScript configs - Optimized for React & Vite

Tailwind Templates Include

🎨 Tailwind CSS - Utility-first CSS framework
📦 PostCSS - CSS processing pipeline
🎯 Custom Tailwind config - Pre-configured with design tokens

ShadcnUI Templates Include

🎯 ShadcnUI - Beautiful, accessible components
🧩 Pre-built components - Button, Input, and more
🔧 Component utilities - cn() helper function
📋 components.json - ShadcnUI configuration

📁 Project Structure

my-app/
├── public/                 # Static assets
├── src/
│   ├── components/         # React components
│   │   ├── admin/         # Admin-specific components
│   │   ├── main/          # Main app components
│   │   └── ui/            # Reusable UI components (ShadcnUI templates)
│   ├── Layouts/           # Page layouts
│   ├── hooks/             # Custom React hooks
│   ├── libs/              # Utility functions
│   ├── styles/            # Global styles and SCSS
│   └── utils/             # Router and utilities
├── package.json
├── vite.config.{js|ts}
├── tailwind.config.js     # (Tailwind templates)
├── components.json        # (ShadcnUI templates)
└── tsconfig.json          # (TypeScript templates)

🎯 Usage Examples

Interactive Mode (Recommended) ✨

npx create-gsp-react my-app
# Follow the 4-step guided selection:
# 1. 🌐 Language: JavaScript or TypeScript
# 2. 🧭 Router + Forms: Formik+Yup or React Hook Form+Zod
# 3. 🗂️ State Management: None, Context API, Zustand, or React Query
# 4. 🎨 Styling: Vanilla CSS, Tailwind CSS, or ShadcnUI

Direct Template Selection

# Current templates (v1.1.1)
npx create-gsp-react my-app --template javascript-tailwind
npx create-gsp-react my-app --template typescript-shadcn

# Future templates (v1.2.0)
npx create-gsp-react my-app --template javascript-zustand-tailwind
npx create-gsp-react my-app --template typescript-query-shadcn

🗺️ Development Roadmap

🎯 v1.2.0 - State Management Integration

✅ Zustand Templates - Lightweight state with TypeScript support
✅ React Query Templates - Server state management with caching
✅ Context API Templates - Built-in React global state
✅ Store Examples - Pre-built store patterns and utilities
✅ Documentation - State management guides and best practices

🎯 v1.3.0 - Advanced Developer Experience

🔄 React Hook Form + Zod - Modern form handling templates
🔄 Husky + Commitlint - Git hooks and commit message linting
🔄 Advanced TypeScript - Strict mode and advanced type patterns
🔄 Testing Setup - Vitest + React Testing Library
🔄 GitHub Actions - CI/CD workflow templates

🎯 v1.4.0 - Enterprise Features

🔄 Monorepo Support - Nx/Turbo integration
🔄 Docker Support - Production-ready containerization
🔄 Storybook Integration - Component documentation
🔄 Internationalization - i18n setup and examples

Coming in v1.2.0:

javascript-rhf - JS + React Router + React Hook Form+Zod + Vanilla CSS
typescript-rhf - TS + React Router + React Hook Form+Zod + Vanilla CSS
javascript-rhf-tailwind - JS + React Router + React Hook Form+Zod + Tailwind CSS
typescript-rhf-tailwind - TS + React Router + React Hook Form+Zod + Tailwind CSS
javascript-rhf-shadcn - JS + React Router + React Hook Form+Zod + ShadcnUI
typescript-rhf-shadcn - TS + React Router + React Hook Form+Zod + ShadcnUI

🚀 After Project Creation

cd my-app
npm install
npm run dev

Your app will be running at http://localhost:5173

🌍 What You Get

Main Layout - Available at / with navigation
Admin Layout - Available at /admin with admin panel
Responsive Design - Works on all devices
Development Server - Hot reload and fast refresh
Production Ready - Optimized build with Vite

📜 Available Scripts

npm run dev - Start development server
npm run build - Build for production
npm run preview - Preview production build
npm run lint - Run ESLint

🔧 Customization

Adding ShadcnUI Components (ShadcnUI templates)

npx shadcn-ui@latest add button
npx shadcn-ui@latest add input
npx shadcn-ui@latest add card

Tailwind Configuration (Tailwind/ShadcnUI templates)

Edit tailwind.config.js to customize your design system:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          500: "#3b82f6",
          600: "#2563eb",
        },
      },
    },
  },
};

👨‍💻 Project Credits

Primary Developer & Architect: Serdest PALAOGLU

🏗️ Project Architecture - Complete system design and implementation
🛠️ Core Development - CLI tool, template system, and nested menu logic
📦 Template Creation - All React template variants and configurations
🎯 Product Vision - Feature planning and roadmap development

AI Development Assistance:

� GitHub Copilot - Code completion and development acceleration
🧠 Claude Sonnet 3.5 - Quality control, testing assistance, and code review

This project showcases the powerful combination of human creativity and AI assistance in modern software development.

�🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

MIT © GSP Team

🙏 Acknowledgments

React - UI Library
Vite - Build Tool
Tailwind CSS - CSS Framework
ShadcnUI - Component Library
Formik - Form Library