Mini AI HR: Full-Stack AI-Powered HR Admin System

A full-stack HR admin platform with an LLM-powered assistant, built on Next.js 16, Supabase, and Groq's Llama 3.3 70B.

Full-StackLLM IntegrationAI Product

Role: Solo Full-Stack Developer
Project type: Personal Project
Duration: 2026
Tools: Next.js 16, TypeScript, Supabase (PostgreSQL), Groq API (Llama 3.3 70B), Tailwind CSS, Vercel

Executive Summary

Mini AI HR is a self-directed full-stack build exploring how a small HR admin tool can use an LLM assistant to speed up everyday tasks, drafting policies, summarizing employee records, and answering admin questions, without replacing the underlying system of record.

The Problem

Small teams handling HR admin (leave requests, policy questions, record-keeping) often juggle spreadsheets and email threads with no single source of truth, and no fast way to look up or summarize information buried in policy documents and records.

Users & Stakeholders

HR admin users
Employees submitting requests
Engineering (solo)
Future integrators / API consumers

Discovery and Research

Reviewed common HR admin workflows (leave, records, onboarding)
Evaluated LLM providers for cost and latency, settling on Groq for inference speed
Assessed Supabase for auth, Postgres, and row-level security
Sketched the data model for employees, requests, and roles

Goals

Ship a working full-stack app end-to-end, solo, in a short timeframe
Integrate an LLM assistant that is genuinely useful inside real admin workflows
Keep the app deployable and demoable on Vercel
Learn Next.js 16's App Router and Server Actions in a real project

Solution

Built a Next.js 16 App Router application with Supabase as the backend (Postgres and auth), and a Groq-hosted Llama 3.3 70B model wired in as an in-app assistant that can answer questions about employee records and policies and help draft HR communications. Server Actions handle mutations directly against Supabase without a separate API layer.

Visual analysis (D3)

Every figure below is generated with D3 from this case study’s own data and is annotated using Tamara Munzner’s what / why / how framework: the data abstraction, the abstract task it supports, and the visual idiom with its marks and channels.

V1Risk exposure by impact

High
Medium
Low

What — dataItems are identified project risks; one ordered attribute (impact) and one categorical attribute (mitigation, on hover).

Why — taskRank the risks and identify the extremes that need mitigation first.

How — idiomDot plot: point marks, position on a common ordered scale as the primary channel, colour hue as a redundant encoding.

V3Implementation sequence

What — dataItems are roadmap phases with an ordered key (sequence) and a quantitative attribute (workstreams per phase).

Why — taskSummarise the delivery order and see where the workload concentrates.

How — idiomGantt-style ranged bars: line marks with length encoding magnitude, aligned on a shared horizontal scale, colour separating phases.

V4Solution architecture as a network

What — dataA node-link network: nodes are architecture components, links are data flow, and layer is a categorical attribute.

Why — taskExplore topology — trace a path from data source to governed output and locate dependencies.

How — idiomLayered node-link layout: rectangle marks positioned by layer, connection marks for flow, greyscale luminance separating adjacent layers.

V6Engagement depth profile: radar

Documented items

What — dataOne item (this project) with seven quantitative attributes: the number of documented artefacts per workstream.

Why — taskSummarise the shape of the engagement and compare workstreams which parts are deep and which are thin.

How — idiomRadar/star plot: line and point marks, angle channel for the attribute key, radial distance for magnitude.

V7Roadmap workload circular barplot

Workstream items

What — dataItems are roadmap phases with one ordered key (sequence) and one quantitative attribute (workstream items).

Why — taskCompare how much work each phase carries and see the cycle of delivery as a whole.

How — idiomCircular barplot: arc marks, angle for the ordered phase key, radial length for magnitude.

V8Architecture composition: treemap

Component
Layer

What — dataA hierarchy: architecture layers containing components, each component counting as one unit.

Why — taskSee where the system's weight sits: which layers hold the most moving parts.

How — idiomTreemap: containment for the hierarchy, area marks sized by component count, nested rectangles for layers.

System Architecture

Browser (Next.js 16 App Router)
      |
      v
+---------------------+      +--------------------------+
|  UI components       | ---> |  Server Actions           |
|  admin dashboard      |      |  auth-checked mutations   |
+---------------------+      +--------------------------+
      |                                |
      v                                v
+---------------------+      +--------------------------+
|  Groq API              |      |  Supabase (Postgres)      |
|  Llama 3.3 70B          |      |  auth + RLS + tables       |
+---------------------+      +--------------------------+

Frontend

Next.js 16 App Router
TypeScript
Tailwind CSS

Backend

Next.js Server Actions
Supabase Postgres
Row-level security policies

AI layer

Groq API
Llama 3.3 70B
Prompt templates for HR context

Deployment

Vercel
Environment-based config
Preview deployments

Technical Risks

Risk matrix

Risk	Impact	Mitigation
LLM responses could surface incorrect HR information	Wrong advice reaching employees or admins	Scoped the assistant to draft and summarize rather than act autonomously, keeping a human in the loop for anything sent externally
Sensitive employee data appearing in prompts	Privacy exposure via a third-party inference API	Limited which record fields are ever included in prompts, and relied on Supabase RLS to gate data access before it reaches the assistant
Solo build with no code review	Bugs reaching a small feature set unnoticed	Manual testing pass per feature and small, incremental changes against main

Implementation Roadmap

Weeks 1–2
Phase 1: Foundation
- Supabase schema and auth
- Base Next.js app scaffold
- Employee record CRUD
Weeks 3–4
Phase 2: AI assistant
- Groq integration
- Prompt design for HR use cases
- Assistant UI in the dashboard
Week 5
Phase 3: Polish and deploy
- Tailwind UI pass
- Vercel deployment
- Manual QA across core flows

Success Metrics

Build

End-to-end app shipped solo
Deployed and demoable on Vercel

AI integration

Assistant wired into real admin workflows
Prompted with scoped, RLS-gated data only

Learning

Hands-on with Next.js 16 App Router and Server Actions
First production use of Groq / Llama 3.3 70B

Deliverables

Next.js 16 App Router admin dashboard
Supabase schema, auth, and row-level security
Groq/Llama 3.3 70B assistant integrated into HR workflows
Employee records, leave, and admin management UI
Deployment pipeline on Vercel

“The hardest part wasn't the LLM integration, it was deciding what the assistant should never be trusted to do on its own.”

Next project

Robots.txt Compliance Audit Pipeline

View Case Study