Craft

Web prodavnica namještaja u kojoj jedna sofa može imati četiri boje, svaka sa svojim fotografijama, a svaka narudžba svoju priču.

Year: 2026
Role: Samostalan projekat: dizajn, frontend, backend i baza podataka
Platforms: Web

Next.jsTypeScriptPrismaPostgreSQLNextAuthZustandHeroUI

Pregled

Craft prodaje namještaj, što je bio dobar razlog za izradu ozbiljnog modela podataka. Jedna sofa dolazi u više boja, svaka boja ima svoje fotografije, neki proizvodi su na sniženju, a kupci pretražuju po prostorijama umjesto po vrsti proizvoda. Podaci se čuvaju u PostgreSQLu, modeliraju uz Prismu, a interfejs je izgrađen oko tog modela.

Kupuj prema prostoriji, a ne kategoriji

Balkonu su potrebne drugačije stvari nego spavaćoj sobi. Svaki proizvod označen je prostorijama kojima odgovara, pa posjetioci mogu odmah pronaći ono što opremaju i zatim dodatno suziti izbor.

11 vrsta prostorija, od dnevne do gejming sobe
Varijante boja, svaka sa svojom uređenom galerijom fotografija
Snižena cijena prikazana uz originalnu
Pretraga i filteri za dodatno sužavanje izbora

Zašto namještaj

Prodavati majicu je jednostavno. Sofa s različitim bojama, materijalima, dimenzijama i sniženom cijenom već zahtijeva ozbiljnu bazu podataka.

Model podataka

Jedan proizvod, više varijanti

Svaka boja je varijanta sa svojim fotografijama u utvrđenom redoslijedu. Brisanjem proizvoda brišu se i njegove varijante i fotografije.

Cijene ostaju zabilježene

Svaka stavka narudžbe čuva cijenu u trenutku kupovine, pa kasnije sniženje ne mijenja iznos koji je kupac zaista platio.

Jedna korpa po računu

Svaki korisnik ima jedinstvenu korpu i samo jedan red za određeni proizvod i boju. Ponovno dodavanje povećava količinu umjesto da pravi duplikat.

Omiljeni proizvodi bez duplikata

Kombinacija korisnika i proizvoda jedinstvena je u bazi, pa ni dvostruki klik ne može dodati isti proizvod dva puta.

Prati status svake narudžbe

Nakon kupovine narudžba dobija vremenski pregled: na čekanju, potvrđena, poslana i dostavljena. Ako nešto pođe po zlu, označi se kao otkazana, a razlog se bilježi uz narudžbu.

Podaci za dostavu i potpuni spisak stavki svake narudžbe
Razlog otkazivanja sačuvan uz narudžbu
Obavijesti dostupne na korisničkom računu
Omiljeni proizvodi i historija narudžbi na jednom mjestu

Administracija prodavnice

Tri uloge: kupci naručuju, moderatori pomažu, a administratori upravljaju prodavnicom
Kreiranje i uređivanje proizvoda, kategorija, varijanti boja i fotografija
Promjena statusa narudžbi ili otkazivanje uz navođenje razloga
Pristigle poruke označavaju se kao odgovorene ili neodgovorene
Svaki proizvod bilježi broj posjetilaca

Kako sam ga izradio

PostgreSQL + Prisma

12 modela i 4 enumeracije s relacijama i kaskadnim brisanjem održavaju korpe, narudžbe i omiljene proizvode usklađenim. Novčani iznosi čuvaju se kao precizni decimalni brojevi, nikad kao float vrijednosti.

Next.js + TypeScript

Interfejs i backend u jednoj bazi koda, uz Prisma tipove koji se koriste sve do komponenti.

NextAuth

Prijava i sesije, uz uloge koje određuju ko vidi korisnički dio, a ko administraciju.

Zustand

Jednostavno i predvidljivo stanje klijenta omogućava trenutnu reakciju korpe.

HeroUI

Pristupačne komponente preuzimaju rutinske dijelove, pa sam više vremena mogao posvetiti samoj prodavnici.

Prikazi aplikacije

Snimak ekrana aplikacije Craft — Prodavnica

Izazovi

Problem

Cijena se promijeni ili se proizvod snizi nakon što ga je kupac već naručio.

Solution

Svaka stavka narudžbe čuva kopiju svoje cijene, pa stare narudžbe uvijek prikazuju tačan plaćeni iznos.

Problem

Cijene zapisane kao floating-point vrijednosti mogu odstupati za nekoliko feninga, a prodavnica ne smije gubiti ni najmanje iznose.

Solution

Svi novčani iznosi čuvaju se kao precizne decimalne vrijednosti u PostgreSQLu, od cijene proizvoda do ukupnog iznosa narudžbe.

Problem

Korpa mora reagovati odmah, ali ostati sačuvana i nakon osvježavanja stranice.

Solution

Zustand odmah ažurira interfejs, dok se korpa čuva uz korisnički račun u bazi podataka.

Šta sam naučio

Prvo nacrtaj šemu baze

Kada su relacije bile dobro postavljene, korpe, narudžbe i omiljeni proizvodi uglavnom su se svodili na jednostavne upite.

Kopiraj vrijednost, ne oslanjaj se na nju

Vrijednosti koje moraju ostati nepromijenjene, poput plaćene cijene, treba sačuvati u tom trenutku, a ne naknadno ponovo tražiti.

Status je funkcionalnost

Jasan pregled statusa narudžbe gradi više povjerenja nego bilo koji baner na početnoj stranici.

Craft

Web prodavnica namještaja u kojoj jedna sofa može imati četiri boje, svaka sa svojim fotografijama, a svaka narudžba svoju priču.

Year: 2026
Role: Samostalan projekat: dizajn, frontend, backend i baza podataka
Platforms: Web

Next.jsTypeScriptPrismaPostgreSQLNextAuthZustandHeroUI

Pregled

Kupuj prema prostoriji, a ne kategoriji

Balkonu su potrebne drugačije stvari nego spavaćoj sobi. Svaki proizvod označen je prostorijama kojima odgovara, pa posjetioci mogu odmah pronaći ono što opremaju i zatim dodatno suziti izbor.

11 vrsta prostorija, od dnevne do gejming sobe
Varijante boja, svaka sa svojom uređenom galerijom fotografija
Snižena cijena prikazana uz originalnu
Pretraga i filteri za dodatno sužavanje izbora

Zašto namještaj

Prodavati majicu je jednostavno. Sofa s različitim bojama, materijalima, dimenzijama i sniženom cijenom već zahtijeva ozbiljnu bazu podataka.

Model podataka

Jedan proizvod, više varijanti

Svaka boja je varijanta sa svojim fotografijama u utvrđenom redoslijedu. Brisanjem proizvoda brišu se i njegove varijante i fotografije.

Cijene ostaju zabilježene

Svaka stavka narudžbe čuva cijenu u trenutku kupovine, pa kasnije sniženje ne mijenja iznos koji je kupac zaista platio.

Jedna korpa po računu

Svaki korisnik ima jedinstvenu korpu i samo jedan red za određeni proizvod i boju. Ponovno dodavanje povećava količinu umjesto da pravi duplikat.

Omiljeni proizvodi bez duplikata

Kombinacija korisnika i proizvoda jedinstvena je u bazi, pa ni dvostruki klik ne može dodati isti proizvod dva puta.

Prati status svake narudžbe

Nakon kupovine narudžba dobija vremenski pregled: na čekanju, potvrđena, poslana i dostavljena. Ako nešto pođe po zlu, označi se kao otkazana, a razlog se bilježi uz narudžbu.

Podaci za dostavu i potpuni spisak stavki svake narudžbe
Razlog otkazivanja sačuvan uz narudžbu
Obavijesti dostupne na korisničkom računu
Omiljeni proizvodi i historija narudžbi na jednom mjestu

Administracija prodavnice

Tri uloge: kupci naručuju, moderatori pomažu, a administratori upravljaju prodavnicom
Kreiranje i uređivanje proizvoda, kategorija, varijanti boja i fotografija
Promjena statusa narudžbi ili otkazivanje uz navođenje razloga
Pristigle poruke označavaju se kao odgovorene ili neodgovorene
Svaki proizvod bilježi broj posjetilaca

Kako sam ga izradio

PostgreSQL + Prisma

Next.js + TypeScript

Interfejs i backend u jednoj bazi koda, uz Prisma tipove koji se koriste sve do komponenti.

NextAuth

Prijava i sesije, uz uloge koje određuju ko vidi korisnički dio, a ko administraciju.

Zustand

Jednostavno i predvidljivo stanje klijenta omogućava trenutnu reakciju korpe.

HeroUI

Pristupačne komponente preuzimaju rutinske dijelove, pa sam više vremena mogao posvetiti samoj prodavnici.

Prikazi aplikacije

Izazovi

Problem

Cijena se promijeni ili se proizvod snizi nakon što ga je kupac već naručio.

Solution

Svaka stavka narudžbe čuva kopiju svoje cijene, pa stare narudžbe uvijek prikazuju tačan plaćeni iznos.

Problem

Cijene zapisane kao floating-point vrijednosti mogu odstupati za nekoliko feninga, a prodavnica ne smije gubiti ni najmanje iznose.

Solution

Svi novčani iznosi čuvaju se kao precizne decimalne vrijednosti u PostgreSQLu, od cijene proizvoda do ukupnog iznosa narudžbe.

Problem

Korpa mora reagovati odmah, ali ostati sačuvana i nakon osvježavanja stranice.

Solution

Zustand odmah ažurira interfejs, dok se korpa čuva uz korisnički račun u bazi podataka.

Šta sam naučio

Prvo nacrtaj šemu baze

Kada su relacije bile dobro postavljene, korpe, narudžbe i omiljeni proizvodi uglavnom su se svodili na jednostavne upite.

Kopiraj vrijednost, ne oslanjaj se na nju

Vrijednosti koje moraju ostati nepromijenjene, poput plaćene cijene, treba sačuvati u tom trenutku, a ne naknadno ponovo tražiti.

Status je funkcionalnost

Jasan pregled statusa narudžbe gradi više povjerenja nego bilo koji baner na početnoj stranici.