Projects

A selection of full-stack and frontend projects built to production standard — demonstrating architecture, performance, and attention to detail.

In Development

Production-grade Jira-like issue tracker — demonstrating scalable Next.js architecture with Supabase, RBAC, and real-world engineering patterns.

Live DemoView on GitHub

Includes E2E tests, production-ready patterns, and a real Supabase backend.

Multilingual3 Languages — EN · DE · SL
Three-tier RBACUser · Admin · Super Admin
Defense in DepthRLS at the DB + Server Action checks
End-to-end TestedPlaywright covers the critical paths
Server Components + React Query hybrid data modelRBAC enforced at DB level via Supabase RLSHandles large datasets with TanStack Virtual

01Engineering Highlights

Ops Tracker is a full-stack project management and issue tracking application demonstrating production-level frontend architecture backed by a real Supabase (PostgreSQL) database. It covers authentication, role-based access control, Kanban boards, project-scoped issues, full audit trails, transactional email, and internationalisation across three languages — everything a real B2B SaaS requires.

  • 01
    Next.js 16 App Router

    Server Components, Server Actions, and proxy middleware drive both authentication and i18n end-to-end.

  • 02
    Row Level Security at the DB

    Supabase RLS enforces every read and write at the database layer — zero-trust by default.

  • 03
    Three-Tier RBAC

    User, Admin, and Super Admin roles are stored as a typed Postgres app_role enum and validated server-side.

  • 04
    Virtualised Issue Table

    TanStack Table v8 paired with @tanstack/react-virtual keeps large issue lists smooth at any row count.

  • 05
    Playwright E2E Coverage

    Critical authentication and issue workflows are guarded by end-to-end Playwright tests.

02Architecture Snapshot

  1. 01
    Feature-based modules

    Each domain lives under src/features/<domain>/ with its components, hooks, actions, service, and Zod schemas colocated.

  2. 02
    Server-first data fetching

    Server Components handle the initial paint; TanStack Query takes over on the client for lists, filters, and optimistic mutations.

  3. 03
    Defense in depth

    Supabase RLS plus Server Action role checks enforce permissions twice — the client is never trusted for authorization.

  4. 04
    Append-only audit log

    Every mutating action is written to a PostgreSQL audit_logs table with typed action keys, actor, entity, and metadata.

03Challenges & Decisions

Key architectural challenges, trade-offs, and decisions made while building Ops Tracker.

Challenge

Client-side authorization is fragile — any leaked token or hand-crafted request can bypass UI guards.

Solution

Authorization was pushed down into PostgreSQL via Supabase Row Level Security, with Server Actions performing a second role check before any mutation runs.

Tradeoff

RLS policies are harder to debug than `if` statements and every table needs explicit coverage — but the system is zero-trust by default and the client is never trusted with permissions.

Challenge

Server Components give a fast, SEO-friendly first paint, but lists, filters, and inline editing need real client interactivity.

Solution

A hybrid model: Server Components prefetch data and dehydrate it into a HydrationBoundary, then TanStack Query takes over on the client for filtering, sorting, and optimistic updates.

Tradeoff

Two data layers raise the mental-model overhead — every feature has to decide where its data lives — but first paint stays fast and the UI never feels static.

Challenge

B2B SaaS needs full traceability: who did what, when, and to which entity — without coupling that bookkeeping to feature code.

Solution

An append-only PostgreSQL audit_logs table is written from a single, typed audit service. Action keys are a literal union, so every mutation has to declare its intent at the type level.

Tradeoff

Write amplification and storage growth are real, but the audit trail is the source of truth for compliance, debugging, and the in-app activity timelines.

Challenge

A flat src/components + src/hooks layout collapses under its own weight once a project has multiple bounded contexts.

Solution

Code is organised by feature (src/features/<domain>/) with components, hooks, server actions, services, and schemas colocated next to the domain they belong to.

Tradeoff

Cross-feature reuse takes a deliberate promotion step into shared/, but ownership is obvious and refactoring a single domain rarely touches anything outside its folder.

04Tech Stack

Frontend
Next.js 16React 19TypeScriptMantine 8SCSS Modules
Data & State
TanStack Query v5TanStack Table v8Zod v4@dnd-kit
Backend & DB
SupabasePostgreSQLRow Level SecuritySupabase Auth
Infrastructure
VercelGitHub ActionsPlaywright (E2E)

05Key Features

  • Drag-and-Drop Kanban Board

    Per-project Kanban board powered by @dnd-kit with columns driven by configurable workflow statuses.

  • Role-Based Access Control

    Three-tier RBAC — User, Admin, Super Admin — enforced at the database layer via Supabase RLS.

  • Virtualised Issue Table

    Large issue lists rendered with TanStack Table v8 and @tanstack/react-virtual for smooth performance at scale.

  • Full Audit Trail

    Every mutating action is recorded to PostgreSQL audit_logs with colour-coded action badges and meaningful summaries.

  • Internationalisation

    Full i18n via next-intl across English, German, and Slovenian including all validation messages and error text.

  • Admin Control Panel

    Dedicated /admin area for user role management, issue status CRUD, global audit log, and super-admin settings.