---

Features

---

Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS 4
• UI Components: shadcn/ui + Radix UI
• Database: Supabase (PostgreSQL)
• Authentication: Supabase Auth
• Email: Resend
• Animations: Framer Motion

---

Quick Start

Prerequisites

• Node.js 20+
• npm or yarn
• Supabase account

Installation

# Clone the repository
git clone https://github.com/yourusername/staquitize.git
cd staquitize

# Install dependencies
npm install

# Copy environment variables
cp .env.example .env.local

# Start development server
npm run dev

Open http://localhost:3000 to view the application.

---

Environment Variables

Create a .env.local file in the root directory:

# Required - Supabase
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
NEXT_PUBLIC_SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

# Optional - Email Service
RESEND_API_KEY=re_your-api-key

# Optional - Domain Registrars
NAMECHEAP_API_KEY=your-key
GODADDY_API_KEY=your-key
CLOUDFLARE_API_KEY=your-key

---

Project Structure

staquitize/
├── app/
│   ├── (auth)/              # Authentication pages
│   │   ├── login/           # Sign in page
│   │   └── register/        # Sign up page
│   ├── (dashboard)/         # Protected dashboard routes
│   │   ├── organizations/   # Organization management
│   │   │   ├── [orgId]/     # Organization details
│   │   │   │   ├── domains/ # Domain management
│   │   │   │   ├── subdomains/
│   │   │   │   └── users/   # User management
│   │   │   └── new/         # Create organization
│   │   └── page.tsx         # Dashboard home
│   ├── [subdomain]/         # Dynamic tenant routing
│   ├── api/                 # API routes
│   └── page.tsx             # Landing page
├── components/
│   └── ui/                  # shadcn/ui components
├── lib/
│   ├── supabase.ts          # Supabase client
│   └── utils.ts             # Utility functions
└── middleware.ts            # Subdomain routing middleware

---

Usage Guide

1. Create an Account

Navigate to /register and create your account with email and password.

┌─────────────────────────────────────┐
│         Create your account         │
│                                     │
│  ┌───────────────────────────────┐  │
│  │ First Name    │ Last Name     │  │
│  └───────────────────────────────┘  │
│  ┌───────────────────────────────┐  │
│  │ Email address                 │  │
│  └───────────────────────────────┘  │
│  ┌───────────────────────────────┐  │
│  │ Password                      │  │
│  └───────────────────────────────┘  │
│                                     │
│  [✓] I agree to Terms & Privacy     │
│                                     │
│  ┌───────────────────────────────┐  │
│  │       Create Account          │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

2. Create an Organization

After logging in, create your first organization with a custom subdomain.

┌─────────────────────────────────────┐
│      Create New Organization        │
│                                     │
│  Organization Name                  │
│  ┌───────────────────────────────┐  │
│  │ Acme Corporation              │  │
│  └───────────────────────────────┘  │
│                                     │
│  Subdomain                          │
│  ┌───────────────────────────────┐  │
│  │ acme     │.staquitize.com     │  │
│  └───────────────────────────────┘  │
│                                     │
│  ┌───────────────────────────────┐  │
│  │      Create Organization      │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

3. Manage Your Organization

Access your organization dashboard to manage users, domains, and settings.

┌──────────────────────────────────────────────────────────────┐
│  [S] Staquitize          Acme Corporation           [Avatar] │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐     │
│  │ Overview │  │  Users   │  │ Domains  │  │ Settings │     │
│  └──────────┘  └──────────┘  └──────────┘  └──────────┘     │
│                                                              │
│  Organization Overview                                       │
│  ─────────────────────                                       │
│                                                              │
│  ┌────────────────┐  ┌────────────────┐  ┌────────────────┐ │
│  │   5 Users      │  │   3 Domains    │  │  12 Projects   │ │
│  │   Active       │  │   Configured   │  │   Created      │ │
│  └────────────────┘  └────────────────┘  └────────────────┘ │
│                                                              │
└──────────────────────────────────────────────────────────────┘

4. Invite Team Members

Add users to your organization and assign roles.

┌─────────────────────────────────────────────────────┐
│  Team Members                        [+ Invite]     │
├─────────────────────────────────────────────────────┤
│                                                     │
│  ┌─────────────────────────────────────────────┐   │
│  │ [👤] John Doe                               │   │
│  │     john@example.com              Owner     │   │
│  └─────────────────────────────────────────────┘   │
│                                                     │
│  ┌─────────────────────────────────────────────┐   │
│  │ [👤] Jane Smith                             │   │
│  │     jane@example.com              Admin     │   │
│  └─────────────────────────────────────────────┘   │
│                                                     │
│  ┌─────────────────────────────────────────────┐   │
│  │ [👤] Bob Wilson                             │   │
│  │     bob@example.com               Member    │   │
│  └─────────────────────────────────────────────┘   │
│                                                     │
└─────────────────────────────────────────────────────┘

5. Configure Custom Domains

Add custom domains to your organization.

┌─────────────────────────────────────────────────────┐
│  Domain Management                  [+ Add Domain]  │
├─────────────────────────────────────────────────────┤
│                                                     │
│  ┌─────────────────────────────────────────────┐   │
│  │ acme.com                                    │   │
│  │ Status: ✓ Verified        DNS: Configured   │   │
│  └─────────────────────────────────────────────┘   │
│                                                     │
│  ┌─────────────────────────────────────────────┐   │
│  │ app.acme.com                                │   │
│  │ Status: ⏳ Pending        DNS: Configure →  │   │
│  └─────────────────────────────────────────────┘   │
│                                                     │
│  DNS Configuration                                  │
│  ─────────────────                                  │
│  Add these records to your DNS provider:            │
│                                                     │
│  Type    Name    Value                              │
│  ────    ────    ─────                              │
│  CNAME   @       cname.vercel-dns.com              │
│  TXT     _verify staquitize-verify=abc123          │
│                                                     │
└─────────────────────────────────────────────────────┘

---

Deploy to Vercel

Deploy your own instance with one click:

Manual Deployment

1. Push your code to GitHub
2. Import the repository in Vercel Dashboard
3. Configure environment variables
4. Deploy

Custom Domain Setup for Multi-tenancy

To enable subdomain routing in production:

1. Add your domain in Vercel Dashboard
2. Add a wildcard DNS record: *.yourdomain.com → cname.vercel-dns.com
3. Configure the domain in Vercel project settings

---

Database Schema

Supabase Tables

-- Organizations/Tenants
CREATE TABLE tenants (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT NOT NULL,
  subdomain TEXT UNIQUE NOT NULL,
  created_at TIMESTAMP DEFAULT NOW()
);

-- User-Tenant relationships
CREATE TABLE user_tenants (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES auth.users(id),
  tenant_id UUID REFERENCES tenants(id),
  role TEXT CHECK (role IN ('owner', 'admin', 'member')),
  created_at TIMESTAMP DEFAULT NOW()
);

-- Custom domains
CREATE TABLE domains (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  tenant_id UUID REFERENCES tenants(id),
  domain TEXT UNIQUE NOT NULL,
  verified BOOLEAN DEFAULT FALSE,
  created_at TIMESTAMP DEFAULT NOW()
);

---

API Routes

---

Development

# Run development server
npm run dev

# Run linting
npm run lint

# Build for production
npm run build

# Start production server
npm start

---

Contributing

Contributions are welcome! Please read our Contributing Guide 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

This project is licensed under the MIT License - see the LICENSE file for details.

---