create-o24ui-app

CLI tool to quickly create new O24UI applications with all necessary setup.

Usage

# Using npx (recommended)
npx create-o24ui-app create my-app

# Or install globally
npm install -g create-o24ui-app
create-o24ui-app my-app

What It Does

Creates a new Next.js 16 application with:

• ✅ O24UI Packages - All published packages pre-installed
  • o24ui-shared-types - TypeScript types
  • o24ui-config - Configuration
  • o24ui-api-client - HTTP client
  • o24ui-auth - Authentication
• ✅ Next.js 16 - Latest Next.js with Turbopack
• ✅ NextAuth v5 - Authentication ready
• ✅ MUI 7 - Material-UI components
• ✅ TypeScript - Full type safety
• ✅ Login & Dashboard - Working example pages
• ✅ Environment Setup - .env template included

Templates

Default Portal (Recommended)

Complete application with:

• Login page with authentication
• Dashboard with example components
• NextAuth configuration
• MUI theme setup
• All O24UI packages integrated

Minimal (Coming Soon)

Basic setup with minimal configuration

After Creation

cd my-app
npm run dev

Your app will be running at http://localhost:3000

Default Login

• Username: admin
• Password: admin

Project Structure

my-app/
├── src/
│   ├── app/
│   │   ├── api/auth/[...nextauth]/  # Auth routes
│   │   ├── dashboard/               # Dashboard page
│   │   ├── login/                   # Login page
│   │   └── layout.tsx               # Root layout
│   ├── auth.ts                      # NextAuth config
│   └── middleware.ts                # Middleware
├── public/                          # Static files
├── .env                             # Environment variables
├── package.json
└── tsconfig.json

Environment Variables

The template includes a .env file. Update these values:

NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_API_URL=https://your-api-url.com
NEXTAUTH_SECRET=your-secret-key
NEXTAUTH_URL=http://localhost:3000

Commands

npm run dev      # Start development server
npm run build    # Build for production
npm start        # Start production server
npm run lint     # Run ESLint

Features

• 🔐 Authentication - NextAuth v5 with credentials provider
• 🎨 UI Components - MUI 7 components pre-configured
• 📦 Code Reuse - All O24UI packages ready to use
• 🚀 Fast Refresh - Turbopack for lightning-fast development
• 📱 Responsive - Mobile-friendly by default
• 🎯 TypeScript - Full type safety
• 🔥 Hot Toast - Beautiful notifications

Customization

Change Port

Edit package.json:

{
  "scripts": {
    "dev": "next dev --port 3001"
  }
}

Add More O24UI Features

All packages are already included. Import and use them:

import type { User } from 'o24ui-shared-types';
import { createHttpClient } from 'o24ui-api-client';
import { themeConfig } from 'o24ui-config';

Customize Theme

Edit src/app/layout.tsx to modify MUI theme.

Learn More

• O24UI Documentation
• Next.js Documentation
• NextAuth Documentation
• MUI Documentation

Support

For issues and questions:

• GitHub: https://github.com/nguyenvuhoang/O24UI/issues

License

MIT