T — Laser Wood Design

Personalizovani konfigurator i storefront za lasersko gravirane table, privezci i 3D slova. Frontend na Viteu i Reactu; backend na Supabase-u (Postgres, Auth, Storage, Edge Functions).

Feature highlights

• Live konfigurator — biraj materijal, dimenzije, model i LED osvetljenje; cena se računa u edge funkciji, sa SVG preview-om i validiranom porudžbinom.
• Admin panel zaštićen Supabase Auth-om (email/lozinka) za upravljanje materijalima, galerijom, recenzijama, FAQ-om, cenama i upitima.
• PDF ponuda generisana na klijentu (@react-pdf/renderer).
• Strogi TypeScript, zod validacija, react-hook-form na svim javnim formama.

Tech stack

Sloj	Tehnologije
Build & dev	Vite 5, SWC
UI	React 18, shadcn/ui, Radix UI, Tailwind CSS, lucide-react
Router	React Router v6
Data / state	TanStack Query v5, react-hook-form + zod
Backend	Supabase (Postgres, Auth, Storage, Edge Functions na Deno)
Testing	Vitest, Testing Library, jsdom
Quality	TypeScript strict, ESLint, Prettier, Husky + lint-staged, commitlint
CI/CD	GitHub Actions (build, test, lint, CodeQL), Dependabot
Hosting	Vercel (sa security headers-ima i SPA rewrite)

Quick start

# 1. Install dependencies
npm install

# 2. Konfiguriši okruženje
cp .env.example .env.local
# Popuni VITE_SUPABASE_URL i VITE_SUPABASE_ANON_KEY
# iz https://app.supabase.com/project/_/settings/api

# 3. Primeni schema + RLS + seed podatke u Supabase
#    (pogledaj docs/setup.md za detalje)
supabase db push
supabase db reset       # ili ručno nalepi supabase/seed.sql u SQL editor

# 4. Pokreni dev server (http://localhost:8080)
npm run dev

Full step-by-step guide: docs/setup.md.

Skripte

Script	Namena
npm run dev	Pokreće Vite dev server
npm run build	Typecheck + produkcijski bundle
npm run preview	Pregled produkcijskog builda lokalno
npm run lint	ESLint provera
npm run lint:fix	Auto-fix tamo gde je moguće
npm run typecheck	tsc --noEmit sa strict tsconfig
npm run test	Vitest u watch modu
npm run test -- --run	Vitest jednokratno (za CI)
npm run test:coverage	V8 coverage report
npm run test:ui	Vitest UI
npm run format	Prettier write nad src/
npm run format:check	Prettier check (CI)

Struktura projekta

.
├── .github/              # CI workflows, issue/PR templates, Dependabot
├── .husky/               # Git hooks (pre-commit, commit-msg)
├── public/               # Statički asseti
├── src/
│   ├── components/       # Shared UI (Header, Footer, AdminLayout, shadcn/ui)
│   ├── hooks/
│   │   ├── queries/      # TanStack Query hookovi (useMaterials, useWorks, ...)
│   │   ├── mutations/    # Mutacije sa auto-invalidacijom
│   │   └── useAuth.ts, useDebouncedValue.ts
│   ├── lib/
│   │   ├── env.ts        # Zod-validirane env vars
│   │   ├── supabase.ts   # Supabase klijent + tipovi + API
│   │   ├── storage.ts    # Upload helper (bucket, MIME, veličina)
│   │   ├── pricing.ts    # Čista pricing logika + testovi
│   │   ├── validation.ts # Zod šeme za sve forme
│   │   └── queryKeys.ts  # Centralizovani query key factory
│   ├── pages/
│   │   ├── configurator/ # Podeljen Configurator (Settings, Preview, Inquiry)
│   │   ├── admin/        # Admin ekrani
│   │   └── *.tsx         # Public stranice
│   ├── types/            # Supabase Database tipovi
│   └── test/             # Vitest setup
├── supabase/
│   ├── config.toml       # Supabase CLI project config
│   ├── migrations/       # Schema + RLS policies (SQL)
│   ├── seed.sql          # Demo data for local dev / fresh deploys
│   └── functions/
│       ├── _shared/cors.ts
│       ├── calculate-price/
│       └── submit-inquiry/
├── docs/                 # Dublja dokumentacija (arhitektura, deploy, security)
├── .env.example
├── vercel.json           # Security headers + SPA rewrites
└── vitest.config.ts

Documentation

• Setup guide (0 → running in 10 min)
• Architecture overview
• Deployment guide
• Development guide
• Contributing guide
• Security policy
• Changelog

License

MIT