Projekti

Izbor full-stack in frontend projektov, razvitih po produkcijskih standardih — z izpostavljeno arhitekturo, zmogljivostjo in pozornostjo do podrobnosti.

V razvoju

Produkcijsko orodje za sledenje težavam v slogu Jira — demonstrira razširljivo Next.js arhitekturo s Supabase, RBAC in vzorci iz resničnega sveta.

DemoPoglej na GitHubu

Vključuje E2E teste, produkcijsko pripravljene vzorce in pravo Supabase zaledje.

Večjezično3 jeziki — EN · DE · SL
Tristopenjski RBACUporabnik · Admin · Super Admin
Obramba v globinoRLS v bazi + preverjanje v strežniških akcijah
End-to-end testiranoPlaywright pokriva kritične poti
Strežniške komponente + React Query hibridni podatkovni modelRBAC uveljavljen na ravni baze prek Supabase RLSGladko delovanje pri velikih podatkovnih nizih z TanStack Virtual

01Inženirski poudarki

Ops Tracker je full-stack aplikacija za upravljanje projektov in sledenje težavam, ki demonstrira produkcijsko frontend arhitekturo, podprto z resnično bazo Supabase (PostgreSQL). Pokriva avtentikacijo, nadzor dostopa na osnovi vlog, Kanban table, projektno usmerjene težave, popolne revizijske dnevnike, transakcijska e-poštna sporočila in internacionalizacijo v treh jezikih — vse, kar pravi B2B SaaS zahteva.

  • 01
    Next.js 16 App Router

    Strežniške komponente, strežniške akcije in proxy posrednik poganjajo tako avtentikacijo kot i18n od konca do konca.

  • 02
    Row Level Security v bazi

    Supabase RLS uveljavlja vsako branje in pisanje na ravni baze podatkov — privzeto brez zaupanja.

  • 03
    Tristopenjski RBAC

    Vloge Uporabnik, Admin in Super Admin so shranjene kot tipizirani Postgres app_role enum in preverjene na strežniku.

  • 04
    Virtualizirana tabela težav

    TanStack Table v8 v paru z @tanstack/react-virtual ohranja velike sezname težav gladke pri kateremkoli številu vrstic.

  • 05
    Playwright E2E pokritost

    Kritične poti avtentikacije in upravljanja težav varujejo end-to-end Playwright testi.

02Arhitekturni pregled

  1. 01
    Moduli na osnovi funkcij

    Vsaka domena živi v src/features/<domena>/ s svojimi komponentami, hooks, akcijami, storitvijo in Zod shemami na enem mestu.

  2. 02
    Strežniško usmerjena pridobitev podatkov

    Strežniške komponente poskrbijo za prvi prikaz; TanStack Query nato prevzame na odjemalcu za sezname, filtre in optimistične mutacije.

  3. 03
    Obramba v globino

    Supabase RLS in preverjanje vlog v strežniških akcijah uveljavljata pravice dvakrat — odjemalec nikoli ne dobi avtorizacijskega zaupanja.

  4. 04
    Samo-pripenjajoči revizijski dnevnik

    Vsaka mutacija se zapiše v PostgreSQL audit_logs s tipiziranimi ključi akcij, akterjem, entiteto in metapodatki.

03Izzivi & odločitve

Ključni arhitekturni izzivi, kompromisi in odločitve, sprejete pri gradnji projekta Ops Tracker.

Izziv

Avtorizacija na strani odjemalca je krhka — vsak ukraden žeton ali ročno sestavljena zahteva lahko zaobide UI varovala.

Rešitev

Avtorizacija je potisnjena navzdol v PostgreSQL prek Supabase Row Level Security; strežniške akcije pred vsako mutacijo izvedejo še drugo preverjanje vlog.

Kompromis

RLS pravila je težje razhroščevati kot `if` stavke in vsaka tabela potrebuje izrecno pokritost — a sistem je privzeto brez zaupanja in odjemalec nikoli ne dobi pravic.

Izziv

Strežniške komponente prinesejo hiter, SEO-prijazen prvi prikaz, a seznami, filtri in urejanje na mestu potrebujejo pravo interaktivnost.

Rešitev

Hibridni model: strežniške komponente vnaprej naložijo podatke in jih dehidrirajo v HydrationBoundary, nato TanStack Query prevzame na odjemalcu za filtriranje, sortiranje in optimistične posodobitve.

Kompromis

Dve podatkovni plasti zvišata miselni preskok — vsaka funkcija mora premisliti, kje živijo njeni podatki — a prvi prikaz ostane hiter in vmesnik nikoli ni statičen.

Izziv

B2B SaaS potrebuje popolno sledljivost: kdo je kaj naredil, kdaj in nad katero entiteto — brez sklapljanja te evidence s funkcijsko kodo.

Rešitev

Samo-pripenjajoča PostgreSQL audit_logs tabela se piše iz ene same, tipizirane revizijske storitve. Ključi akcij so literalna unija, zato mora vsaka mutacija svoj namen napovedati na ravni tipov.

Kompromis

Pomnoževanje pisanj in rast pomnilnika sta resnična, a revizijski dnevnik je vir resnice za skladnost, razhroščevanje in časovnice aktivnosti v aplikaciji.

Izziv

Plosko src/components + src/hooks ogrodje se zruši pod lastno težo, ko ima projekt več domen.

Rešitev

Koda je organizirana po funkcijah (src/features/<domena>/), s komponentami, hooks, strežniškimi akcijami, storitvami in shemami zraven domene, ki ji pripadajo.

Kompromis

Ponovna uporaba med funkcijami zahteva premišljeno povišanje v shared/, a lastništvo je očitno in refaktor ene domene redko poseže izven svoje mape.

04Tech Stack

Vmesnik
Next.js 16React 19TypeScriptMantine 8SCSS Modules
Podatki & Stanje
TanStack Query v5TanStack Table v8Zod v4@dnd-kit
Zaledni del & BP
SupabasePostgreSQLRow Level SecuritySupabase Auth
Infrastruktura
VercelGitHub ActionsPlaywright (E2E)

05Ključne funkcije

  • Kanban tabla z vlečenjem in spuščanjem

    Projektna Kanban tabla z @dnd-kit s stolpci, ki jih poganjajo nastavljivi statusi delovnega toka.

  • Nadzor dostopa na osnovi vlog

    Tristopenjski RBAC — Uporabnik, Admin, Super Admin — uveljavljen na ravni baze prek Supabase RLS.

  • Virtualizirana tabela težav

    Veliki seznami težav z TanStack Table v8 in @tanstack/react-virtual za gladko delovanje pri velikih podatkovnih nizih.

  • Popolni revizijski dnevnik

    Vsaka sprememba je zabeležena v PostgreSQL audit_logs z barvno kodiranimi znački in smiselnimi povzetki.

  • Internacionalizacija

    Celotna i18n prek next-intl za angleščino, nemščino in slovenščino, vključno z vsemi sporočili o napakah.

  • Administratorska nadzorna plošča

    Namensko področje /admin za upravljanje vlog, CRUD statusov težav, globalni revizijski dnevnik in nastavitve super-admina.