@alhaji/react-app

Interactive CLI scaffolder for a personal React stack.

Usage

npx @alhaji/react-app my-project

Or install globally:

npm install -g @alhaji/react-app

What it asks you

• TypeScript or JavaScript
• Database — Supabase or Firebase (or none)
• Icons — Lucide React or React Icons (or none)
• TanStack Query v5
• Framer Motion
• React Router v7
• Zustand

Folder structure generated

my-project/
├── src/
│   ├── api/
│   │   └── client.ts         ← fetch instance (get, post, put, patch, delete)
│   ├── assets/
│   ├── components/
│   │   ├── ui/
│   │   │   ├── Button.tsx    ← primary, secondary, outline, ghost, danger
│   │   │   ├── Input.tsx     ← label, error, hint support
│   │   │   └── Card.tsx      ← Card, CardHeader, CardBody, CardFooter
│   │   └── layout/
│   │       └── Navbar.tsx    ← responsive with mobile toggle
│   ├── constants/
│   │   └── index.ts          ← APP_NAME, ROUTES, API_URL
│   ├── hooks/
│   │   ├── useDebounce.ts
│   │   └── useLocalStorage.ts
│   ├── lib/                  ← supabase.ts / firebase.ts / store.ts
│   ├── pages/
│   ├── types/                ← TypeScript only
│   │   └── index.ts          ← ApiResponse<T>, PaginatedResponse<T>
│   ├── utils/
│   │   └── cn.ts             ← clsx + tailwind-merge
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css             ← Tailwind v4 via @import
├── index.html
├── vite.config.ts            ← port 3000
├── tsconfig.json             ← TypeScript only
├── .env
├── .env.example
├── .gitignore
└── README.md

JavaScript projects omit types/, tsconfig files, and all type annotations — fully clean JS output.

Base stack (always included)

• Vite + React
• Tailwind CSS v4
• clsx + tailwind-merge (via cn() helper)
• Port 3000 by default