⚡ flash-up

A modern, interactive project scaffolder for web applications built with TypeScript. Create React, Next.js, or Express.js projects with your preferred package manager and add-ons in seconds.

✨ Features

• 🚀 Multiple Frameworks: Support for React (with Vite), Next.js, and Express.js
• 📦 Package Manager Choice: Works with npm, pnpm, yarn, and bun
• 🎨 Add-ons: Optional Tailwind CSS and ESLint + Prettier configuration
• 💻 Interactive CLI: Beautiful, user-friendly prompts with progress indicators
• ⚡ Fast: Leverages official create tools for optimal performance
• 🔧 Configurable: CLI arguments for automation and CI/CD integration

🛠 Installation

Global Installation

npm install -g @shivamdkc/flash-up

One-time Usage

npx @shivamdkc/flash-up
bunx @shivamdkc/flash-up

🚀 Quick Start

Interactive Mode

Simply run the command and follow the prompts:

flash-up

CLI Mode

Skip prompts by providing options:

flash-up --name my-app --framework react --package-manager pnpm

📋 Usage

Interactive Prompts

When you run flash-up without arguments, you'll be guided through:

1. Project Name: Enter a valid project name
2. Framework Selection: Choose from React, Next.js, or Express.js
3. Package Manager: Select npm, pnpm, yarn, or bun
4. Add-ons: Optionally add Tailwind CSS and/or ESLint + Prettier

Command Line Options

flash-up [options]

Options:
  -n, --name <name>              Project name
  -f, --framework <framework>    Framework (react, nextjs, express)
  -p, --package-manager <pm>     Package manager (npm, pnpm, yarn, bun)
  --skip-prompts                 Skip interactive prompts
  -v, --verbose                  Verbose output
  --version                      Display version number
  -h, --help                     Display help information

Examples

# Create a React project with pnpm
flash-up --name my-react-app --framework react --package-manager pnpm

# Create a Next.js project with default settings
flash-up --name my-next-app --framework nextjs --skip-prompts

# Create an Express.js project with verbose output
flash-up --name my-api --framework express --verbose

🏗 Supported Frameworks

React (with Vite)

• Template: react-ts with Vite
• Features: TypeScript, Hot reload, Modern build tooling
• Command: Uses create-vite under the hood

Next.js

• Template: Latest Next.js with App Router
• Features: TypeScript, App Router, Built-in optimizations
• Command: Uses create-next-app under the hood

Express.js

• Template: Custom TypeScript setup
• Features: TypeScript, CORS, Helmet, Morgan logging
• Structure: Professional API structure with middleware

🎨 Add-ons

Tailwind CSS

• Installs and configures Tailwind CSS
• Includes PostCSS and Autoprefixer
• Provides optimized configuration file

ESLint + Prettier

• TypeScript-aware ESLint configuration
• Prettier integration for code formatting
• Pre-configured rules for modern development

📁 Project Structure

The generated projects follow best practices:

React Projects

my-react-app/
├── src/
│   ├── components/
│   ├── App.tsx
│   └── main.tsx
├── public/
├── package.json
└── vite.config.ts

Next.js Projects

my-next-app/
├── src/
│   └── app/
│       ├── layout.tsx
│       └── page.tsx
├── public/
└── package.json

Express.js Projects

my-api/
├── src/
│   └── index.ts
├── dist/
├── package.json
└── tsconfig.json

🔧 Development

Prerequisites

• Node.js 18+
• npm, pnpm, yarn, or bun

Building from Source

# Clone the repository
git clone <repository-url>
cd flash-up

# Install dependencies
npm install

# Build the project
npm run build

# Test locally
node dist/index.js --help

Project Architecture

src/
├── index.ts              # CLI entry point
├── ui/
│   ├── prompts.ts        # Interactive prompts
│   └── logger.ts         # Colored output
├── core/
│   ├── scaffolder.ts     # Main scaffolding logic
│   ├── package-manager.ts # Package manager abstraction
│   └── template-manager.ts # Template operations
├── utils/
│   ├── shell.ts          # Command execution
│   ├── file-system.ts    # File operations
│   └── validation.ts     # Input validation
└── types/
    └── index.ts          # TypeScript definitions

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Built with TypeScript
• Uses Commander.js for CLI
• Powered by Inquirer.js for prompts
• Styled with Chalk for colors