🌀 spin-project

A blazingly fast CLI for scaffolding modern web applications. Supports React (Vite), Next.js, and Express with automatic Tailwind CSS v4 setup.

spin-project is an interactive command-line tool that generates production-ready project structures based on your preferences. It handles the boring configuration (like setting up Tailwind v4 with Vite or configuring Express with Mongoose) so you can start coding immediately.

🚀 Quick Start

You don't need to install anything globally. The CLI works with npx, pnpm dlx, and yarn create. It automatically detects the package manager you use.

# npx
npx spin-project

# pnpm
pnpm dlx spin-project

# yarn
yarn create spin-project

✨ Features

• Framework Support: Choose between React (Vite), Next.js (App Router), and Express.js.
• Automatic Tailwind CSS v4 Setup: Integrates the latest Tailwind CSS, including the Vite plugin and PostCSS configuration.
• Language Support: Scaffolds projects in either TypeScript or JavaScript.
• Package Manager Detection: Automatically uses npm, pnpm, or yarn based on the command you run.
• Smart Add-ons:
  • React Router DOM: Pre-configured with routes and layouts.
  • Lucide React: For easy icon integration.
  • Mongoose: Sets up MongoDB connection boilerplate for Express.
  • Multer: Includes file upload boilerplate for Express.
• Silent Mode for Next.js: Handles Next.js installation flags automatically to prevent interactive prompts and ensure a smooth setup.

🛠️ Supported Stacks

1. React (Vite)

Creates a highly optimized React app.

Router Mode: Choose to install react-router-dom and it will generate src/pages, src/App.jsx, and wrap your app in automatically.

Tailwind v4: Configures @tailwindcss/vite and adds the @import directive to CSS.

2. Next.js

Creates a robust Next.js application using the App Router.

Zero-Config: Passes all necessary flags (ESLint, TypeScript, Import Aliases) to skip the noisy setup wizard.

Tailwind v4 Upgrade: Next.js installs v3 by default; this CLI automatically upgrades it to v4 and configures postcss.config.mjs for you.

Flags Support: Asks if you want to use the React Compiler or Turbopack.

3. Express (Backend)

Scaffolds a clean REST API backend.

Modern JS: Uses ES Modules (import/export) via "type": "module".

Ready-to-go: Includes cors, dotenv, and a health check route.

Optional: Adds Mongoose (DB connection code) and Multer (upload logic) if selected.

📂 Project Structure Examples

React with Router & Tailwind

my-app/
├── src/
│   ├── pages/
│   │   ├── Home.tsx
│   │   └── About.tsx
│   ├── App.tsx       # Layout with Navigation
│   ├── main.tsx      # Wrapped with <BrowserRouter>
│   └── index.css     # Includes @import "tailwindcss"
├── vite.config.ts    # Includes @tailwindcss/vite
└── package.json

Express Backend

my-api/
├── node_modules/
├── .env              # Pre-filled with PORT & MONGO_URI
├── .gitignore
├── server.js         # DB connection, Middleware & Routes
└── package.json

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

Fork the repository

Create your feature branch (git checkout -b feature/AmazingFeature)

Commit your changes (git commit -m 'Add some AmazingFeature')

Push to the branch (git push origin feature/AmazingFeature)

Open a Pull Request.

License Distributed under the ISC License. See LICENSE.txt for more information.

Happy Coding! 🌀