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

📦 GitHub: https://github.com/pixeliro-sys/SaaS

✨ 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:

# 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: admin@example.com / admin
• User: user@example.com / password
• Manager: manager@example.com / manager

Full Installation

# 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 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

// 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:

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

# 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:

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

3. Translate all keys from en.json

Using Translations

// 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)

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

Docker

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

# Build
npm run build

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

🛠️ Customization

Changing Brand Colors

Edit src/styles/global.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

// 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
• Styled with Tailwind CSS
• Theme by Pixeliro
• Icons by Lucide

---

Made with ❤️ by Pixeliro