kens-webapps

Create modern web applications with the optimal tech stack for 2025. This CLI tool scaffolds a complete Next.js project with TypeScript, Tailwind CSS, Vitest, and all the essentials - perfect for beginners and production use.

✨ Features

• 🚀 Next.js 15 with App Router and Turbopack
• 📘 TypeScript for type safety
• 🎨 Tailwind CSS with shadcn/ui components
• 🧪 Vitest testing setup with examples
• 📝 React Hook Form + Zod validation
• 🔧 ESLint + Prettier configured
• 📁 Optimal project structure
• 📚 Comprehensive documentation
• ⚡ Production-ready from day one

🚀 Quick Start

npx kens-webapps my-app
cd my-app
npm run dev

That's it! Open http://localhost:3000 to see your app.

📋 Interactive Setup

The CLI will guide you through setup with beginner-friendly explanations:

🚀 Kens WebApps

💡 Which features would you like to include?
✓ TypeScript (RECOMMENDED) - Catches errors before they reach users
✓ Tailwind CSS (RECOMMENDED) - Fast, modern styling with utility classes
✓ Vitest Testing (RECOMMENDED) - Ensures your code works and prevents bugs
✓ Git Repository (RECOMMENDED) - Track changes and enable backups

📦 Choose package manager:
✓ pnpm (RECOMMENDED) - Fastest and most efficient

📋 Create project with these settings? Yes!

🎯 Perfect For

• Beginners learning modern web development
• Experienced developers who want optimal setup
• Startups needing production-ready foundation
• Anyone building modern web applications

🛠️ What's Included

Core Technologies

• Next.js 15 with App Router
• TypeScript with strict configuration
• Tailwind CSS with design system
• shadcn/ui component library
• Lucide React icons

Development Tools

• Vitest for testing
• ESLint + Prettier for code quality
• VS Code configuration
• Git setup with .gitignore

Examples & Patterns

• Sample components with TypeScript
• Form handling examples
• Testing examples
• Custom hooks (useLocalStorage, useDebounce)
• Utility functions

🎨 Project Structure

my-app/
├── src/
│   ├── app/                 # Next.js App Router
│   │   ├── layout.tsx       # Root layout
│   │   └── page.tsx         # Home page
│   ├── components/
│   │   ├── ui/             # shadcn/ui components
│   │   └── shared/         # Reusable components
│   ├── lib/                # Utility functions
│   ├── hooks/              # Custom React hooks
│   ├── types/              # TypeScript definitions
│   ├── styles/             # Global styles
│   └── __tests__/          # Test files
├── next.config.ts          # Next.js configuration
├── tailwind.config.ts      # Tailwind configuration
├── vitest.config.ts        # Vitest configuration
└── package.json           # Dependencies and scripts

🎮 Available Commands

npm run dev        # Start development server (with Turbopack)
npm run build      # Build for production
npm run start      # Start production server
npm run test       # Run tests
npm run test:watch # Run tests in watch mode
npm run test:ui    # Run tests with UI
npm run lint       # Lint code
npm run type-check # Check TypeScript

📚 Learn More

• Next.js Documentation
• TypeScript Handbook
• Tailwind CSS Docs
• shadcn/ui Components
• Vitest Guide

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT License - see LICENSE for details.

Made with ❤️ for the developer community

Create your next amazing web application with confidence!