FE Starter Kit

A lightweight project generator for React applications with RepoState, feature-driven architecture, and React Router.

Installation

Global Installation (Recommended)

npm install -g fe-starter-kit

Local Installation

npx fe-starter-kit <command>

Usage

Initialize a New Project

Create a new React project with the starter kit:

fe-starter-kit init my-app

This will:

• Create a new directory my-app
• Set up the complete project structure
• Install all dependencies
• Configure development tools

Navigate to Your Project

cd my-app
npm run dev

Your application will be available at http://localhost:3000

Generate Features

Generate a new feature with organized folder structure:

fe-starter-kit generate feature dashboard
# or using alias
fe-starter-kit g feature dashboard

This creates:

src/features/dashboard/
├── view/          # React components
├── controller/    # Business logic
├── model/         # Data models and types
├── state/         # State management
└── index.ts       # Feature exports

Project Structure

Generated projects follow a feature-driven architecture:

my-app/
├── public/
│   └── sw.js                    # Service Worker
├── src/
│   ├── app/                     # App-level configuration
│   ├── features/                # Feature modules
│   │   └── starter/             # Example starter feature
│   │       ├── view/            # React components
│   │       ├── controller/      # Business logic
│   │       ├── model/           # Data models
│   │       └── state/           # State management
│   ├── router/                  # Routing configuration
│   │   └── AppRouter.tsx
│   ├── shared/                  # Shared utilities and components
│   ├── workers/                 # Service Worker utilities
│   ├── App.tsx                  # Main App component
│   ├── main.tsx                 # Entry point
│   └── index.css                # Global styles
├── package.json
├── vite.config.ts              # Vite configuration
├── tailwind.config.js          # Tailwind CSS configuration
├── tsconfig.json               # TypeScript configuration
└── jest.config.js              # Jest configuration

Technology Stack

Core Dependencies

• React 19 - Latest React with concurrent features
• TypeScript - Type safety and better developer experience
• Vite - Fast build tool and development server
• React Router DOM - Client-side routing
• RepoState - Lightweight state management

Styling & UI

• Tailwind CSS - Utility-first CSS framework
• React Icons - Icon library
• React FloatUI - Floating UI components

Development Tools

• ESLint - Code linting with React and TypeScript rules
• Prettier - Code formatting
• Jest - Testing framework
• Testing Library - React testing utilities

Build & Deployment

• PostCSS - CSS processing
• Autoprefixer - CSS vendor prefixing
• Vite PWA Plugin - Progressive Web App features

CLI Commands

Init Command

fe-starter-kit init <project-name>

Creates a new React project with the complete starter kit setup.

Generate Commands

fe-starter-kit generate feature <feature-name>
fe-starter-kit g feature <feature-name>        # Short alias

Generates a new feature with the standard folder structure.

Configuration

Environment Variables

The generated project supports environment variables through Vite's built-in support:

VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App

Tailwind CSS

Customize your design system in tailwind.config.js:

export default {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      // Your custom theme extensions
    }
  },
  plugins: []
}

TypeScript

Configure TypeScript options in tsconfig.json. The starter kit comes with sensible defaults for React development.

Testing

The starter kit includes Jest and Testing Library configuration:

// Example test
import { render, screen } from '@testing-library/react'
import { StarterView } from './StarterView'

test('renders welcome message', () => {
  render(<StarterView />)
  const element = screen.getByText(/Welcome to Frontend Starter Kit/i)
  expect(element).toBeInTheDocument()
})

Feature-Driven Architecture

Each feature should be self-contained with:

• View: React components and UI logic
• Controller: Business logic and API calls
• Model: Data types, interfaces, and validation
• State: State management using RepoState

This architecture promotes:

• Modularity: Features can be developed independently
• Scalability: Easy to add new features without affecting existing ones
• Maintainability: Clear separation of concerns
• Testability: Each layer can be tested in isolation

Progressive Web App

The starter kit includes PWA support:

• Service Worker for offline functionality
• Installable app experience
• Background sync capabilities

Configure PWA features in vite.config.ts:

import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      // PWA configuration
    })
  ]
})

License

This project is licensed under the MIT License - see the LICENSE file for details.