Next Project Scaffolder

🚀 The ultimate Next.js project scaffolder - Create production-ready React applications with authentication, theming, UI libraries, role-based authorization, and seamless backend integration in seconds!

✨ Features

• 🔐 Complete Authentication System - NextAuth.js with OAuth providers (Google, GitHub) + credentials
• 🔑 Two-Factor Authentication - Optional 2FA setup with QR codes
• 🎭 Dark/Light Theming - Built-in theme switching with next-themes
• 🎨 Multiple UI Libraries - Tailwind CSS, shadcn/ui, Material-UI, Chakra UI support
• 🚪 Role-Based Access Control - Admin/user roles with protected routes
• 🗄️ Database Integration - Prisma, Drizzle ORM, MongoDB ready
• 🔒 API Middlewares - Authentication, CORS, rate limiting included
• ⚡ Modern Stack - Next.js 14, TypeScript, App Router, Server Components
• 🔧 Professional Tooling - ESLint, Prettier, VS Code settings, EditorConfig
• 📱 Responsive Design - Mobile-first approach with Tailwind CSS

🚀 Quick Start

NPM (Recommended)

# Create a new project (interactive mode)
npx next-project-scaffolder

# Quick setup with defaults
npx react-quick my-awesome-app

Global Installation

npm install -g next-project-scaffolder

# Then use anywhere
next-project-scaffolder
react-quick my-project

Local Development

git clone https://github.com/yourusername/next-project-scaffolder.git
cd next-project-scaffolder
node bin/create-react-project.js

🎬 Demo

Watch the scaffolder in action:

npx next-project-scaffolder my-app

Answer the prompts:

• Project name: my-app
• TypeScript: Yes
• UI Library: shadcn/ui
• Authentication: Yes
• Google OAuth: Yes
• GitHub OAuth: Yes
• 2FA: Yes
• Theming: Yes
• Database: Prisma
• README: Yes
• Package manager: npm
• Install deps: Yes
• Git init: Yes

Result: A fully-featured Next.js app with auth, theming, and database ready!

📱 Generated Project Structure

my-app/
├── src/
│   ├── app/                    # Next.js 14 App Router
│   │   ├── auth/              # Auth pages (signin, register, 2fa)
│   │   ├── dashboard/         # Protected dashboard
│   │   ├── api/               # API routes with auth middleware
│   │   │   └── auth/         # NextAuth configuration
│   │   ├── layout.tsx         # Root layout with providers
│   │   └── page.tsx           # Home page
│   ├── components/            # React components
│   │   ├── providers/        # Theme & Auth providers
│   │   ├── auth/             # Auth guards & utilities
│   │   └── ui/               # UI components
│   ├── lib/                   # Utilities & middleware
│   └── styles/                # Global styles
├── prisma/                    # Database schema
├── middleware.ts              # Route protection
├── .env.local                 # Environment variables
└── Configuration files (next, tailwind, typescript)

🔐 Authentication Features

• NextAuth.js Integration - Industry standard authentication
• Multiple Providers - Google, GitHub, and credentials
• Role-Based Access - Admin/user roles with permissions
• Protected Routes - Middleware-based route protection
• 2FA Support - Optional two-factor authentication
• Session Management - Secure JWT sessions
• API Authentication - Middleware for API routes

Demo credentials:

• Email: [email protected]
• Password: password123
• Role: admin

🎨 UI Library Support

Tailwind CSS

• Utility-first CSS framework
• Dark mode support
• Responsive design

shadcn/ui

• Beautiful components built on Radix UI
• Fully customizable
• TypeScript support

Material-UI

• Google's Material Design
• Comprehensive component library
• Theme system

Chakra UI

• Simple and modular
• Accessible components
• Easy theming

🗄️ Database Options

Prisma

• Type-safe database access
• Automatic migrations
• Visual database browser

Drizzle ORM

• Lightweight TypeScript ORM
• SQL-like syntax
• Edge runtime compatible

MongoDB

• NoSQL database
• Mongoose integration
• Flexible schema

🚀 What You Get

📱 Complete App

• ✅ Authentication system with OAuth
• ✅ Dark/light theme toggle
• ✅ Responsive dashboard
• ✅ Protected API routes
• ✅ Role-based permissions
• ✅ Database integration
• ✅ Production-ready configuration

🔧 Development Tools

• ✅ TypeScript configuration
• ✅ ESLint & Prettier setup
• ✅ VS Code settings
• ✅ Git hooks ready
• ✅ Environment variables
• ✅ Build optimization

🚀 Usage Examples

Create a SaaS Starter

npx next-project-scaffolder saas-app
# Choose: TypeScript, shadcn/ui, Auth with Google+GitHub, Prisma, 2FA

Create an E-commerce Admin

npx next-project-scaffolder admin-panel
# Choose: TypeScript, Material-UI, Auth with roles, Prisma

Create a Blog Platform

npx next-project-scaffolder blog-platform
# Choose: TypeScript, Tailwind, Auth with GitHub, MongoDB

🌟 Why Use This Scaffolder?

✨ Save Hours of Setup - Get a production-ready app in minutes
🔒 Security First - Built-in auth, CORS, rate limiting
🎨 Beautiful UI - Multiple design systems supported
🚪 Role-Based Access - Admin panels and user management
📈 Scalable - Professional folder structure and patterns
🔧 Developer Experience - TypeScript, ESLint, Prettier included

🚀 Perfect For

• 🚀 Startup MVPs - Get to market faster
• 🏢 Enterprise Projects - Professional structure and security
• 🎓 Learning - Best practices and modern patterns
• 👥 Team Development - Consistent project setup

🤝 Contributing

We welcome contributions! Please see CONTRIBUTING.md for details.

1. Fork the repository
2. Create your feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

📝 License

MIT License - see LICENSE file for details.

🚀 Author

Created with ❤️ by Your Name

⭐ Star this repository if it helped you!