React + Vite + TypeScript Project Generator

This skill guides the creation of a modern React application using Vite and organizes it into a scalable feature-based architecture.

Prerequisite

• Node.js and npm installed

Directory Structure (Feature-Based)

The goal is to move away from purely technical folders (components, hooks) to domain-oriented folders (features).

project-name/
├── src/
│   ├── app/                # Global app setup (providers, router, store)
│   ├── features/           # Feature-based modules
│   │   ├── auth/           # Example feature
│   │   │   ├── components/
│   │   │   ├── hooks/
│   │   │   └── types/
│   │   └── dashboard/
│   ├── shared/             # Shared utilities and UI components
│   │   ├── ui/             # Generic UI components (Buttons, Inputs)
│   │   └── utils/          # Helper functions
│   ├── App.tsx
│   └── main.tsx
└── ... config files

Step-by-Step Instructions

1. Initialize Vite Project

# Create project using the React-TypeScript template
npm create vite@latest __PROJECT_NAME__ -- --template react-ts

cd __PROJECT_NAME__

2. Install Dependencies

npm install

3. Setup Folder Structure

Remove default boilerplate and create the architecture:

# Clean up default assets if desired (optional)
# rm src/assets/react.svg

# Create core directories
mkdir -p src/app
mkdir -p src/features
mkdir -p src/shared/ui
mkdir -p src/shared/utils
mkdir -p src/shared/hooks

4. Basic Configuration

• Ensure vite.config.ts is set up (defaults are usually fine).
• Recommend setting up path aliases (e.g., @/ pointing to src/) in tsconfig.json and vite.config.ts if the user agrees, but start with standard relative paths for simplicity unless requested.

Verification

Run the dev server to ensure it starts:

npm run dev

Parent Hub

• _frontend-mastery

Part of Workflow

This skill is utilized in the following sequential workflows:

• _workflow-feature-lifecycle