create-switch-app

Professional CLI tool to bootstrap standardized company POCs with best practices

Generate production-ready projects with React, Next.js, React Native (Expo), or Node.js backends - all with TypeScript, testing, linting, and enterprise patterns built-in.

Quick Start

npx create-switch-app init my-project

Then follow the interactive prompts to choose your stack!

What You Get

Every generated project includes:

✅ TypeScript - Strict mode enabled
✅ Testing - Vitest/Jest configured with examples
✅ Linting - ESLint + Prettier
✅ Git Hooks - Husky + lint-staged
✅ API Client - Axios with interceptors & error handling
✅ Auth Flow - Pre-configured (optional)
✅ State Management - Zustand/Redux Toolkit/Context API
✅ Path Aliases - Clean imports with @/

Supported Templates

Web (React + Vite)

• React 18 + TypeScript
• TailwindCSS / shadcn/ui / Chakra UI
• TanStack Query for data fetching
• Storybook for component docs
• Production-ready components (Button, Input, Table, Modal, etc.)

Web (Next.js 14)

• App Router with TypeScript
• Server Components
• API routes ready

Mobile (Expo + React Native)

• Expo Router - File-based navigation (like Next.js!)
• Bottom tabs pre-configured
• Protected routes automatically
• Works on iOS, Android, and Web
• Shared API patterns with web projects

Backend (Node.js + Express)

• TypeScript + Express
• Hot reload with tsx
• RESTful API structure

Component Library (Web)

All components are:

• Fully typed with TypeScript
• Accessible (WCAG 2.1 AA)
• Tested with React Testing Library
• Documented in Storybook

Included Components:

• <Button> - variants, sizes, loading states
• <Input> - validation, error handling
• <TextArea> - auto-resize, character count
• <Modal> - accessible, animated
• <Table> - sorting, pagination
• <Container> - responsive widths

API Client Features

import { apiClient } from '@/services/api-client';

// Auto token injection
apiClient.setAuthToken(token);

// Global error handling
// - 401 → Auto redirect to login
// - Retry logic built-in
// - Request/response logging

const data = await apiClient.get('/users');

Mobile: Expo Router (Game Changer!)

File-based navigation makes mobile development familiar to web devs:

app/
├── _layout.tsx          → Root layout
├── (auth)/
│   └── login.tsx        → /login
├── (tabs)/
│   ├── index.tsx        → / (with tab bar)
│   └── profile.tsx      → /profile (with tab bar)

Protected Routes are automatic - unauthenticated users see login, authenticated users see tabs!

Testing Setup

Every project includes:

npm run test           # Run tests
npm run test:watch     # Watch mode  
npm run test:coverage  # Coverage report

Sample tests included for components and services.

Storybook (Web Projects)

npm run storybook

Component documentation auto-generated with examples and controls.

Usage Example

# Create a new project
npx create-switch-app init my-awesome-app

# Choose your stack
? What are we building today?
  >  Web Application (React + Vite)
     Web Application (Next.js 14)
     Mobile Application (Expo + React Native)
     Backend API (Node.js + Express)

# Customize your setup
? UI Library? Tailwind CSS
? State Management? Zustand
? Include pre-configured Auth? Yes
? Include Storybook? Yes
? Testing Framework? Vitest

# Done! 
cd my-awesome-app
npm run dev

⚡ Sub-Generators (NEW!)

Keep your codebase consistent after project creation:

# Inside your project
cd my-awesome-app

# Generate a new API service with CRUD + tests
create-switch-app generate service user
# Creates: user.service.ts + user.service.test.ts

# Generate a component with tests + Storybook story
create-switch-app generate component UserCard
# Creates: UserCard.tsx + tests + story + index.ts

# Generate a custom hook with tests
create-switch-app g hook useUser
# Creates: useUser.ts + useUser.test.ts

This keeps your team following the same patterns throughout development!

Project Structure

my-app/
├── src/
│   ├── components/
│   │   ├── ui/              # Reusable UI components
│   │   └── features/        # Feature-specific components
│   ├── services/
│   │   ├── api-client.ts    # HTTP client with interceptors
│   │   └── auth.service.ts  # Auth logic
│   ├── hooks/               # Custom React hooks
│   ├── store/               # State management
│   ├── utils/               # Validators, formatters, constants
│   └── types/               # TypeScript definitions
├── .husky/                  # Git hooks
├── .storybook/              # Storybook config
└── README.md                # Project-specific docs

Best For

• POCs & MVPs - Get to market fast
• Hackathons - Professional structure instantly
• Learning - See best practices in action
• Internal Tools - Consistent patterns across team
• Startups - Production-ready foundation

Contributing

This tool is designed to be extended. Add your own templates or customize existing ones.

License

MIT

Built with ❤️ by Nneka for professional developers who want to move fast without sacrificing quality.