Create TSmart Web App

A powerful CLI tool to create modern Next.js web applications with TypeScript, Supabase authentication, and separate admin/user dashboards.

Features

• ⚡ Next.js 15 - Latest React framework with App Router
• 🔐 Supabase Auth - Complete authentication system with Google OAuth
• 👥 Dual Dashboards - Separate admin and user interfaces
• 🎨 Modern UI - Tailwind CSS with shadcn/ui components
• 📱 Responsive Design - Mobile-first approach
• 🛡️ Security Headers - Production-ready security configuration
• 🧪 Type Safety - Full TypeScript support
• 📊 Analytics Ready - Google Analytics integration
• 🚀 Deploy Ready - Optimized for Vercel deployment

Quick Start

npx create-tsmart-web-app my-app
cd my-app
npm run dev

Usage

Create a new project

npx create-tsmart-web-app my-project-name

Skip dependency installation

npx create-tsmart-web-app my-project --skip-install

What's Included

📁 Project Structure

my-app/
├── app/
│   ├── (auth)/
│   │   ├── signin/
│   │   └── signup/
│   ├── admin/           # Admin dashboard
│   ├── dashboard/       # User dashboard
│   ├── api/
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── ui/              # shadcn/ui components
│   ├── layout/          # Layout components
│   └── shared/          # Shared components
├── lib/
│   ├── supabase/        # Supabase configuration
│   ├── auth/            # Authentication utilities
│   └── utils.ts         # Utility functions
└── public/              # Static assets

🔧 Built-in Features

• Authentication Pages: Login, signup with Google OAuth
• Protected Routes: Middleware-based route protection
• Role-based Access: Admin and user role separation
• Responsive Layouts: Mobile-friendly navigation
• Error Handling: 404 and error pages
• Loading States: Built-in loading components
• Health Check: API health monitoring
• SEO Optimized: Meta tags and OpenGraph

🎨 UI Components

• Button, Input, Label, Card components
• Dashboard and Admin layouts
• Navigation and sidebar components
• Responsive design patterns
• Dark mode support (CSS variables)

Configuration

Environment Variables

After creating your project, configure these environment variables in .env.local:

# Application
NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_APP_NAME=TSmart

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

# Google OAuth
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

# NextAuth
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-key-here-minimum-32-chars

Supabase Setup

1. Create a new Supabase project
2. Get your project URL and anon key
3. Configure Google OAuth in Supabase Auth settings
4. Set up user profiles table (optional)

-- Optional: Create profiles table for user roles
CREATE TABLE profiles (
  id UUID REFERENCES auth.users ON DELETE CASCADE,
  role TEXT DEFAULT 'user',
  created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL,
  PRIMARY KEY (id)
);

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run type-check - Run TypeScript check

Deployment

Vercel (Recommended)

npm run build
vercel --prod

Docker

npm run docker:build
npm run docker:run

Customization

Styling

The project uses Tailwind CSS with custom CSS variables for theming. Modify app/globals.css to customize colors and styles.

Authentication

Authentication is handled by Supabase. You can customize the auth flow in:

• app/auth/signin/page.tsx
• app/auth/signup/page.tsx
• lib/supabase/ configuration files

Layouts

• User Dashboard: components/layout/dashboard-layout.tsx
• Admin Dashboard: components/layout/admin-layout.tsx

Contributing

We welcome contributions! Please see our contributing guidelines.

Support

• Documentation: TSmart Docs
• Issues: GitHub Issues
• Email: [email protected]

License

MIT License - see LICENSE file for details.

Built with ❤️ by the TSmart Team