Web App Setup

A CLI utility that automates the setup process for a React + Vite + Tailwind project with a predefined component structure and common utilities.

Features

• Creates a new React app with Vite
• Sets up Tailwind CSS with custom configuration
• Installs necessary dependencies (react-router-dom, lucide-react, etc.)
• Creates folder structure with common components:
  • Button, Card, Container, Grid, Navbar, etc.
• Sets up custom hooks:
  • useLocalStorage, useApi, useCopyToClipboard, useToggleDarkMode
• Configures routing with React Router
• Dark mode support

Installation

# Global installation (recommended)
npm install -g web-app-setup

# Or use directly with npx
npx web-app-setup

Usage

You can use the CLI in two ways:

1. Create a new project:

# Using the globally installed package
web-app-setup

# Or with npx
npx web-app-setup

When prompted, enter a project name or press Enter to use the current directory.

2. Setup in an existing project:

Navigate to your existing project directory and run:

web-app-setup

When prompted, press Enter to use the current directory.

What's Included

• React + Vite: Modern build tooling for fast development
• Tailwind CSS: Utility-first CSS framework
• React Router: For application routing
• Lucide React: Icon library
• Custom Components:
  • Button
  • Card
  • Container
  • Grid
  • Navbar (placeholder)
  • Footer (placeholder)
  • Sidebar (placeholder)
  • Breadcrumb
  • Input (placeholder)
  • ScrollToTop
• Custom Hooks:
  • useLocalStorage
  • useApi
  • useCopyToClipboard
  • useToggleDarkMode
• Project Structure:
  • components/general/
  • data/
  • hooks/
  • layout/
  • pages/
  • assets/ (images, fonts, videos, illustrations)

After Setup

Once the setup is complete, you can start your development server with:

npm run dev

License

MIT