Package Exports

next-project-scaffolder
next-project-scaffolder/bin/create-react-project.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (next-project-scaffolder) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Next Project Scaffolder

npm downloads license

🚀 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: admin@example.com
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.

Fork the repository
Create your feature branch: git checkout -b feature/amazing-feature
Commit your changes: git commit -m 'Add amazing feature'
Push to the branch: git push origin feature/amazing-feature
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!