Features

The feature system provides modular integration of various technologies and tools into React applications. Each feature module is self-contained and can be mixed and matched based on user preferences.

🎯 Feature Architecture

🧩 Feature Modules

🌐 API Clients

HTTP clients and data fetching setup

• Axios integration
• React Query setup
• Fetch API configuration

🎨 Styling

CSS frameworks and styling solutions

• Tailwind CSS
• styled-components
• Plain CSS setup

🗃️ State Management

Application state management

• Redux Toolkit
• Zustand
• Store configuration

🧭 Routing

Client-side routing setup

• React Router
• Route configuration
• Navigation setup

🧪 Testing

Testing framework configuration

• Vitest setup
• Jest configuration
• Testing utilities

📝 TypeScript

TypeScript support integration

• Type definitions
• Configuration setup
• Build integration

✨ Linting

Code quality and formatting

• ESLint configuration
• Prettier setup
• Pre-commit hooks

📁 Project Files

Core project structure

• Directory creation
• File generation
• Asset setup

🌐 API Clients Feature

Handles HTTP client setup and data fetching configuration.

Supported Options

Full-featured data fetching with caching:

// Generated API client setup
import axios from 'axios'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
const apiClient = axios.create({
  baseURL: process.env.REACT_APP_API_URL || 'http://localhost:3001',
  timeout: 10000,
})
 
export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000, // 5 minutes
      cacheTime: 10 * 60 * 1000, // 10 minutes
    },
  },
})
 
export default apiClient

Includes:

Axios instance with base configuration
React Query client setup
Error handling and interceptors
TypeScript types (if enabled)

🎨 Styling Feature

Handles CSS framework integration and styling setup.

Framework Integration

Tailwind CSS Setup

Complete Tailwind CSS integration with PostCSS:

// Generated tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: {
          50: "#eff6ff",
          500: "#3b82f6",
          900: "#1e3a8a",
        },
      },
    },
  },
  plugins: [],
};

styled-components Setup

CSS-in-JS configuration with theme support:

// Generated theme provider
import styled, { ThemeProvider, createGlobalStyle } from "styled-components";
 
const theme = {
  colors: {
    primary: "#3b82f6",
    secondary: "#64748b",
    success: "#10b981",
    error: "#ef4444",
  },
  breakpoints: {
    sm: "640px",
    md: "768px",
    lg: "1024px",
    xl: "1280px",
  },
};
 
const GlobalStyle = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    line-height: 1.5;
  }
`;
 
export { theme, GlobalStyle, ThemeProvider };

Plain CSS Setup

Clean CSS architecture with CSS modules support:

/* Generated src/index.css */
:root {
  --color-primary: #3b82f6;
  --color-secondary: #64748b;
  --color-success: #10b981;
  --color-error: #ef4444;
 
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    sans-serif;
  --line-height: 1.5;
}
 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
body {
  font-family: var(--font-family);
  line-height: var(--line-height);
  color: #1f2937;
  background-color: #ffffff;
}

🗃️ State Management Feature

Provides application state management setup.

Redux Toolkit Integration

// Generated src/store/store.ts
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './counterSlice'
 
export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: ['persist/PERSIST'],
      },
    }),
})
 
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

Zustand Integration

// Generated src/store/useStore.ts
import { create } from 'zustand'
import { devtools } from 'zustand/middleware'
 
interface CounterState {
  count: number
  increment: () => void
  decrement: () => void
  reset: () => void
}
 
export const useCounterStore = create<CounterState>()(
  devtools(
    (set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 })),
      decrement: () => set((state) => ({ count: state.count - 1 })),
      reset: () => set({ count: 0 }),
    }),
    {
      name: 'counter-store',
    }
  )
)

🧪 Testing Feature

Sets up testing frameworks and utilities.

Vitest Configuration

Recommended for Vite: Vitest provides the fastest testing experience for Vite projects with native ES modules support.

// Generated vitest.config.ts
import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";
 
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./src/test/setup.ts"],
    css: true,
  },
});

Jest Configuration

// Generated jest.config.js
module.exports = {
  testEnvironment: "jsdom",
  setupFilesAfterEnv: ["<rootDir>/src/test/setup.ts"],
  moduleNameMapping: {
    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
  },
  transform: {
    "^.+\\.(ts|tsx)$": [
      "ts-jest",
      {
        useESM: true,
      },
    ],
  },
  extensionsToTreatAsEsm: [".ts", ".tsx"],
};

🔧 Feature Integration Process

Feature Detection

Determine which features are enabled based on user choices:

const enabledFeatures = {
  typescript: userChoices.typescript,
  styling: userChoices.styling !== "none",
  stateManagement: userChoices.state !== "none",
  apiClient: userChoices.api !== "none",
  testing: userChoices.testing !== "none",
  routing: userChoices.routing !== "none",
};

Dependency Resolution

Each feature contributes its dependencies:

const featureDependencies = {};
 
if (enabledFeatures.typescript) {
  featureDependencies.typescript = getTypeScriptDependencies();
}
 
if (enabledFeatures.styling) {
  featureDependencies.styling = getStylingDependencies(userChoices.styling);
}
 
// Merge all feature dependencies
const allDependencies = mergeDependencies(featureDependencies);

File Generation

Features generate their necessary files and configurations:

for (const [featureName, isEnabled] of Object.entries(enabledFeatures)) {
  if (isEnabled) {
    const feature = getFeature(featureName);
    await feature.setup(projectPath, userChoices);
  }
}

Integration Validation

Ensure all features work together correctly:

await validateFeatureIntegration(projectPath, enabledFeatures);

🧩 Adding New Features

Feature Module Structure

Create Feature Directory

src/features/your-feature/
├── index.js              # Main feature setup
├── dependencies.js       # Feature dependencies
├── templates/            # Code templates
└── __tests__/           # Feature tests

Implement Feature Interface

// src/features/your-feature/index.js
export class YourFeature {
  async setup(projectPath, userChoices) {
    // Install dependencies
    await this.installDependencies(projectPath, userChoices);
 
    // Generate configuration files
    await this.generateConfig(projectPath, userChoices);
 
    // Create boilerplate code
    await this.generateCode(projectPath, userChoices);
  }
 
  getDependencies(userChoices) {
    // Return feature-specific dependencies
  }
 
  async generateConfig(projectPath, userChoices) {
    // Generate configuration files
  }
 
  async generateCode(projectPath, userChoices) {
    // Generate boilerplate code
  }
}

Register Feature

Add your feature to the feature registry:

// src/features/index.js
import { YourFeature } from "./your-feature";
 
export const features = {
  // ... existing features
  "your-feature": YourFeature,
};

Add to Prompts

Include your feature in the CLI prompts:

// src/prompts/steps/your-feature-step.js
export class YourFeatureStep {
  getChoices() {
    return [
      { name: "Option 1", value: "option1" },
      { name: "Option 2", value: "option2" },
      { name: "None", value: "none" },
    ];
  }
}

📚 Next Steps

Explore Related Systems:

Generators → - Framework-specific project generation
Builders → - Configuration file creation
Templates → - Code generation templates

Extend React Kickstart:

Adding Features → - Add new capabilities to React Kickstart
Contributing → - How to contribute to React Kickstart

Modular Design: The feature system's modular architecture makes it easy to add new capabilities while maintaining compatibility with existing features.

Builders Templates