SaaS — Next.js SaaS Template

SHA-256: 23757b102d780db7dd6046b8769f184eda47f16e1cc7c54807d790d847c17f08

2026-10-14T15:52:36.612Z

# HR SaaS Starter

> Modern HR Platform Boilerplate — Powered by Pixeliro Theme System

A production-ready SaaS boilerplate for building HR management platforms. Built with Next.js 16, Tailwind CSS 4, and the Pixeliro premium theme system.

🔗 **Live Demo:** [https://saas-boilerplate.pixeliro.com](https://saas-boilerplate.pixeliro.com)

📦 **GitHub:** [https://github.com/pixeliro-sys/SaaS](https://github.com/pixeliro-sys/SaaS)

![HR SaaS Starter](https://placehold.co/1200x630/3B82F6/FFFFFF?text=HR+SaaS+Starter)

## ✨ Features

- 🎨 **Pixeliro Theme System** — Premium dark/light mode with semantic color tokens
- 🌐 **Multi-language Support** — English & Vietnamese out of the box (i18n ready)
- 🔐 **Multiple Auth Methods** — Google, Apple, Firebase, Email/Password
- 📱 **Fully Responsive** — Mobile-first design with adaptive layouts
- 🎯 **Type-Safe** — Strict TypeScript configuration
- 🚀 **Production Ready** — Optimized for deployment on Vercel

## 🚀 Quick Start

### Prerequisites

- Node.js 20+
- npm or yarn or pnpm
- MongoDB database
- Firebase project (optional, for Firebase auth)

### Quick Start (Mock Mode)

Want to try it without setting up databases? Use **Mock Mode**:

```bash
# Clone and install
git clone https://github.com/pixeliro-sys/SaaS.git
cd SaaS
npm install

# Use mock mode (no database needed!)
cp .env.mock .env.local

# Start development server
npm run dev
```

**Mock credentials:**
- Admin: `[email protected]` / `admin`
- User: `[email protected]` / `password`
- Manager: `[email protected]` / `manager`

### Full Installation

```bash
# Clone the repository
git clone https://github.com/pixeliro-sys/SaaS.git
cd SaaS

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env.local
# Edit .env.local with your credentials

# Start development server
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) to see your app.

## 📁 Project Structure

```
hr-saas-starter/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── api/               # API Routes
│   │   │   └── auth/          # Authentication endpoints
│   │   └── [locale]/          # Internationalized pages
│   │       ├── page.tsx       # Landing page
│   │       ├── sign-in/       # Authentication
│   │       ├── dashboard/     # Protected dashboard
│   │       └── pricing/       # Pricing page
│   ├── components/
│   │   ├── auth/              # Auth components
│   │   ├── dashboard/         # Dashboard components
│   │   ├── landing/           # Landing page sections
│   │   ├── layout/            # Header, Footer
│   │   └── providers/         # Context providers
│   ├── lib/                   # Utilities & configurations
│   │   ├── Env.ts             # Environment validation
│   │   ├── AppConfig.ts       # App configuration
│   │   ├── firebase-*.ts      # Firebase setup
│   │   ├── mongodb.ts         # Database connection
│   │   ├── i18n*.ts           # Internationalization
│   │   └── utils.ts           # Helper functions
│   ├── locales/               # Translation files
│   │   ├── en.json
│   │   └── vi.json
│   └── styles/
│       └── global.css         # Pixeliro theme system
├── public/                    # Static assets
├── .env.example               # Environment template
├── next.config.ts             # Next.js configuration
├── package.json
├── tsconfig.json
└── README.md
```

## 🎨 Pixeliro Theme System

This boilerplate uses the Pixeliro premium theme system with 46 semantic color tokens:

### Color Tokens

| Category | Tokens | Description |
|----------|--------|-------------|
| Brand | `primary`, `secondary`, `accent` | Interactive colors |
| Surface | `base`, `raised`, `overlay`, `sheet` | Background layers |
| Text | `primary`, `secondary`, `disabled`, `inverse` | Typography |
| Status | `success`, `warning`, `danger`, `info` | Feedback states |
| Border | `default`, `strong`, `focus`, `error` | Borders & outlines |

### Usage

```tsx
// Tailwind classes
<div className="bg-surface-base text-text-primary border-border">
  <button className="bg-primary text-primary-on">
    Click me
  </button>
</div>

// CSS variables
.custom-class {
  background: var(--surface-raised);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}
```

### Dark Mode

Dark mode is automatic based on system preference, or can be toggled:

```tsx
import { useTheme } from '@/components/providers/ThemeProvider';

function MyComponent() {
  const { theme, setTheme, resolvedTheme } = useTheme();
  
  return (
    <button onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}>
      Toggle theme
    </button>
  );
}
```

## 🔐 Authentication

### Supported Providers

1. **Email/Password** — Classic authentication
2. **Google OAuth** — One-click sign in
3. **Apple OAuth** — Sign in with Apple
4. **Firebase Auth** — Full Firebase integration (optional)

### Environment Setup

```env
# Google OAuth
GOOGLE_CLIENT_ID=your-client-id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your-client-secret

# Apple OAuth
APPLE_CLIENT_ID=com.yourcompany.hrsaas
APPLE_TEAM_ID=your-team-id
APPLE_KEY_ID=your-key-id
APPLE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----..."

# Firebase (optional)
FIREBASE_PROJECT_ID=your-project
FIREBASE_CLIENT_EMAIL=firebase-admin@...
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----..."
```

## 🌐 Internationalization

### Adding a New Language

1. Create a new locale file: `src/locales/fr.json`
2. Update `AppConfig.ts`:

```ts
export const AppConfig = {
  locales: ["en", "vi", "fr"], // Add new locale
  defaultLocale: "en",
};
```

3. Translate all keys from `en.json`

### Using Translations

```tsx
// Server Component
import { getTranslations } from "next-intl/server";

export default async function Page() {
  const t = await getTranslations("Landing");
  return <h1>{t("hero_title")}</h1>;
}

// Client Component
'use client';
import { useTranslations } from "next-intl";

export function MyComponent() {
  const t = useTranslations("Auth");
  return <button>{t("sign_in_title")}</button>;
}
```

## 📦 Scripts

| Command | Description |
|---------|-------------|
| `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 lint:fix` | Fix ESLint errors |
| `npm run check:types` | TypeScript type check |
| `npm run format` | Format with Prettier |

## 🚀 Deployment

### Vercel (Recommended)

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/pixeliro-sys/SaaS)

1. Click the button above
2. Set environment variables in Vercel dashboard
3. Deploy!

### Docker

```dockerfile
FROM node:20-alpine AS base

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production

COPY . .
RUN npm run build

EXPOSE 3000
CMD ["npm", "start"]
```

### Self-Hosted

```bash
# Build
npm run build

# Start with PM2
pm2 start npm --name "hr-saas" -- start
```

## 🛠️ Customization

### Changing Brand Colors

Edit `src/styles/global.css`:

```css
@layer theme {
  :root {
    --brand-primary: #YOUR_COLOR;
    --brand-secondary: #YOUR_COLOR;
    --brand-accent: #YOUR_COLOR;
  }
}
```

### Adding New Pages

1. Create page in `src/app/[locale]/your-page/page.tsx`
2. Add translations to locale files
3. Update navigation in `Header.tsx`

### Extending the Database

```ts
// src/lib/mongodb.ts
const usersCollection = await getCollection<User>("users");
const employeesCollection = await getCollection<Employee>("employees");
```

## 📄 License

MIT License — Free for personal and commercial use.

## 🙏 Credits

- Built with [Next.js](https://nextjs.org/)
- Styled with [Tailwind CSS](https://tailwindcss.com/)
- Theme by [Pixeliro](https://pixeliro.com/)
- Icons by [Lucide](https://lucide.dev/)

---

Made with ❤️ by [Pixeliro](https://pixeliro.com/)