WebShop

Full-stack e-commerce platforma — React storefront, Fastify REST API i namenski image server, sa PostgreSQL bazom. Sve tri komponente su kontejnerizovane i deployovane u produkciju.

🛍️ Live demo: web-shop-iota-seven.vercel.app

---

Arhitektura

flowchart LR
    U([Korisnik]) --> FE[Frontend<br/>React 19 + Vite<br/>Vercel]
    FE -->|/ticketlines/api| BE[Backend API<br/>Fastify 5 + TypeScript<br/>Railway]
    FE -->|/images| IMG[Image Server<br/>Fastify + sharp<br/>Railway]
    IMG -->|validate-admin<br/>X-Internal-Secret| BE
    BE --> DB[(PostgreSQL 16<br/>Supabase)]
    IMG --> VOL[/Railway Volume<br/>WebP uploads/]

Loading

Servis	Tehnologije	Uloga
frontend/	React 19, Vite 7, TanStack Query, React Router 7	Storefront (katalog, korpa, checkout) + admin panel
backend/	Fastify 5, TypeScript, Zod, pg (raw SQL), pino	REST API — 40+ modula (auth, shop, adm, cmn)
image-server/	Fastify 5, sharp	Upload, WebP konverzija, thumbnails, serviranje slika
database/	PostgreSQL 16, plain SQL	Bazna šema + verzionisane migracije

Funkcionalnosti

Shop: katalog sa filterima i pretragom, varijante artikala (boja/veličina), korpa (server-side sync za ulogovane), checkout sa promo kodovima i idempotency zaštitom, praćenje porudžbina, recenzije, wishlist, SSE notifikacije, višejezičnost (sr/en) i višvalutnost (RSD/EUR/USD).

Admin: dashboard sa grafikonima, CRUD za sve entitete, upravljanje korisnicima/rolama/permisijama (RBAC), CMS blokovi za naslovnu, moderacija recenzija, upload slika sa batch podrškom.

Bezbednost: JWT (access + refresh + blacklist), OAuth (Google/Apple), RBAC sa granularnim permisijama, CSRF double-submit, rate limiting (globalni + per-endpoint + per-user upload), strict SSL ka bazi (CA verifikacija), audit log, magic-byte validacija uploada, fail-fast env validacija koja odbija kompromitovane/placeholder tajne.

Pokretanje (development)

Preduslovi: Node.js 20+, Docker

# 1. Kloniraj i instaliraj
git clone https://github.com/kremic03/WebShop.git
cd WebShop
npm install
cd frontend && npm install && cd ..

# 2. Env fajlovi
cp .env.example .env
cp frontend/.env.example frontend/.env
cp image-server/.env.example image-server/.env

# 3. Baza + image server + migracije (Docker)
docker compose up -d postgres image-server
docker compose up migrate

# 4. Backend (host, hot-reload)
npm run dev                 # → http://localhost:8502

# 5. Frontend (drugi terminal)
cd frontend && npm run dev  # → http://localhost:3000

Alternativno, ceo stack u Dockeru: docker compose up -d (backend tada radi u kontejneru app).

Swagger UI: http://localhost:8502/docs

Struktura projekta

├── backend/            # Fastify API
│   ├── config/         #   env validacija (zod, fail-fast)
│   ├── core/           #   middleware, pool, servisi, utils
│   └── modules/        #   auth, adm/*, cmn/*, shop/* (controller→service→repository)
├── frontend/           # React SPA (features/ + shared/)
├── image-server/       # Upload i serviranje slika
├── database/
│   ├── *.sql           #   bazna šema (initdb)
│   ├── migrations/     #   verzionisane migracije (scripts/migrate.js)
│   └── seeds/          #   test/demo podaci
├── docs/               # Interna dokumentacija (auth, permisije, testiranje…)
├── nginx/              # Reverse proxy za self-hosted varijantu
└── scripts/            # migrate.js, deploy, seed

Svaki backend modul prati isti šablon: *.routes.ts → *.controller.ts → *.service.ts → *.repository.ts (parametrizovani raw SQL) + *.dto.ts/*.schemas.ts.

Testiranje

npm test              # vitest watch
npx vitest run        # jedan prolaz — 575 testova (unit + integracioni sa pravom bazom)
cd frontend && npm test

CI (GitHub Actions) na svaki push pokreće: security gate (scan tajni), lint + typecheck, backend integracione testove protiv Postgres 16 kontejnera, frontend build i image-server testove.

Migracije baze

Migracije žive isključivo u database/migrations/ i primenjuje ih scripts/migrate.js (praćenje u iis.schema_migrations, svaka migracija u transakciji, SSL podrška za managed baze):

npm run migrate:status   # pregled
npm run migrate          # primena pending migracija

U Docker/produkcionom setup-u migracije pokreće poseban migrate init-servis — app startuje tek kad migracije uspešno prođu.

Deployment

Komponenta	Platforma	Napomena
Frontend	Vercel	frontend/vercel.json — rewrites ka API/slikama + CSP headeri
Backend	Railway	railway.json + Dockerfile (multi-stage, non-root, healthcheck)
Image server	Railway	image-server/Dockerfile + volume za uploads
Baza	Supabase	Strict SSL — DB_CA_CERT (inline PEM) obavezan u produkciji

Self-hosted varijanta: docker compose -f docker-compose.prod.yml up -d (nginx terminira TLS). Detaljna procedura: PRODUCTION-ROLLOUT.md.

Sve tajne se injektuju kroz env varijable platforme — nijedan .env fajl sa tajnama ne postoji u repou niti ulazi u Docker image. Backend pri startu odbija poznate kompromitovane ključeve, placeholder vrednosti i nesigurne kombinacije (CORS_ORIGIN=all, PROTECT=N, SSL bez CA…).

Dokumentacija

• ERD.md — dijagram baze
• docs/ — permission sistem, audit logging, email sistem, testiranje, dizajn shop šeme
• Swagger UI na /docs (OpenAPI 3.0) kada backend radi

Roadmap

• Redis za rate-limit/cache store-ove (preduslov za više replika)
• Frontend Dockerfile za self-hosted deploy (umesto host build-a)
• E2E testovi (Playwright)

Autor

Nikola Kremić — GitHub · kremic03@gmail.com

Licenca: ISC