# Frontend projekt áttekintés

## 1. Főbb felületek és funkciók

- új, vizuális blokkokra épülő főoldal
- alkotólista + részletes alkotói oldalak
- alkotáslista + alkotás-részletoldal
- videólista + kategóriák szerinti videós nézet
- térképes nézet
- programnaptár + program-részletoldalak
- alkotók aktuális programokkal oldal
- programbeküldő felület (többlépéses űrlappal)
- párhuzamos életutak összehasonlító nézet
- interaktív művészeti háló (gráf)
- keresés
- jogi/információs oldalak

## 2. Technológiai alapok

- keretrendszer: `Next.js 15.3.8` (App Router)
- UI: `React 19`
- nyelv: `TypeScript 5` (`strict: true`, `allowJs: true`)
- styling: `Tailwind CSS 3`
- i18n: `next-intl`
- formok: `react-hook-form`, `zod`
- animációk: `framer-motion`
- linting: `ESLint 9`

Font és alap stílus:

- `next/font/google` (Roboto + Roboto Slab)
- globális stílus: `src/app/globals.css`

## 3. Projektstruktúra

Legfontosabb könyvtárak:

- `src/app/[locale]` - oldalak, route-ok
- `src/app/api` - Next API route-ok (BFF - backend for frontend)
- `src/components` - újrahasználható UI + domain komponensek
- `src/services` - backendhívások központi rétege
- `src/i18n` - locale routing/navigation wrapper
- `src/config` - menü, kategóriák, konfigurációk
- `messages` - fordítási JSON-ek (`hu.json`, `en.json`)
- `src/content/legal` - markdown alapú jogi tartalom locale szerint

## 4. Route-struktúra áttekintés

A route-ok locale prefix alatt futnak: `src/app/[locale]/...`

Főbb route-csoportok:

- tartalom: `/alkotok`, `/alkoto/[id]`, `/alkotasok`, `/alkotas/[id]`, `/videok`, `/terkep`
- programok: `/programok`, `/program/[slug]`, `/program-bekuldese`, `/alkotok-aktualis-programokkal`
- kiegészítő oldalak: `/parhuzamos-eletutak`, `/kereses`, `/hirek`, `/hir/[id]`
- jogi oldalak: adatkezelés, süti, impresszum, szerzői jogok, stb.

Kompatibilitási redirectek is vannak:

- régi program slug útvonal: `/programok/[slug]` -> `/program/[slug]`
- régi alkotói idővonal URL-ek átirányítása új szekció route-okra
- `kapcsolodasok` route átirányítása a művészeti háló nézetre

## 5. Navigáció és menüszerkezet

A fejléc főmenüje:

- Alkotások
- Alkotók
- Videók
- Programok

Jellemzők:

- egyszerűsített desktop + mobil menü
- keresősáv a headerben
- nyelvváltó a headerben
- kategóriadropdownok
- program dropdown (`programok`, `alkotok-aktualis-programokkal`, `program-bekuldese`)
- locale alapú láthatóság (`visibleLocales`)

Megjegyzés:

- bizonyos menüpontok HU-only láthatóságúak (pl. `videok`, `program-bekuldese`)

## 6. Főoldal

A főoldal (`src/app/[locale]/page.tsx`) fő blokkjai:

1. Hero videó
2. Intro
3. Kiemelt alkotás blokk
4. Kiemelt alkotó blokk
5. Kiemelt videók
6. Közeli programok

A blokkokhoz külön komponensrendszer tartozik (`src/components/home/...`), saját carousel- és animációs logikával.

## 7. Lokalizáció (HU + EN)

Lokalizációs alapok:

- fordítások: `messages/hu.json`, `messages/en.json`
- route mapping: `src/i18n/routing.ts`
- locale middleware: `src/middleware.ts`
- locale request config: `src/i18n/request.ts`
- navigation wrapper: `src/i18n/navigation.ts`

Működés:

- default locale: `hu`
- `localePrefix: "as-needed"` (hu általában prefix nélkül, en prefixszel)
- legal oldalak markdown forrásból jönnek locale szerint

## 8. Adatkapcsolat és API-rétegek

A frontend a külső Java backenddel kommunikál.

Központi kliens:

- `src/services/apiClient.ts`
- alap endpoint: `NEXT_PUBLIC_API_URL`
- nyelvi header: `X-Language`
- alap fetch cache-beállítás: `next: { revalidate: 60 }` (több hívásnál felülírva)

Fontos: a rendszer vegyesen használ direkt szerveroldali service-hívásokat és Next API BFF route-okat.

## 9. Cookie, consent, YouTube, analytics

Cookie-consent rendszer:

- localStorage alapú beleegyezés-tárolás (`azopus-cookie-consent`)
- kategóriák: `MANDATORY`, `STATISTICS`, `MARKETING`, `FUNCTIONAL`

Működés:

- GA4 inicializálás csak akkor, ha van `STATISTICS` hozzájárulás
- YouTube iframe-ek consent hiányában placeholderre cserélődnek
- marketing + functional elfogadás után visszaáll az iframe

## 10. SEO és indexelés

SEO-elemek:

- oldalankénti metadata (`generateMetadata`)
- canonical URL-ek
- Open Graph / Twitter mezők
- strukturált adatok (pl. alkotó oldalon `Person`)
- dinamikus sitemap (`src/app/sitemap.ts`)
- robots szabályok (`src/app/robots.ts`)

- egyes oldalak tudatosan noindex-esek (pl. keresés)

## 11. Cache, ISR, revalidate

A projekt többféle cache-stratégiát használ:

- service szint (API kliens alap revalidate 60 mp)
- oldal szintű `revalidate` (pl. 60 mp, 300 mp, vagy 3 nap)
- egyes oldalak `dynamic = "force-dynamic"` módban futnak
- admin oldalon manuális `revalidatePath` trigger is van

Plusz:

- `react` `cache()` használat több adathívásnál (`creatorsCache`, `calendarData`, stb.)

## 12. Auth és hozzáférés

- nem production környezetben basic auth védelmet ad a middleware
- superadmin jogosultság alapján látszik cache-frissítő gomb a headerben

## 13. Build és üzemeltetés

Fő script-ek:

- `npm run dev`
- `npm run build`
- `npm run start`
- profil script-ek: `dev:test`, `dev:prod`, `build:test`, `build:prod`, `build:dev`
- deploy script-ek: `deploy:test`, `deploy:prod`

Profilok:

- `.env.development`
- `.env.test`
- `.env.production`

Használt fontos env kulcsok:

- `NEXT_PUBLIC_ENV`
- `NEXT_PUBLIC_BASE_URL`
- `NEXT_PUBLIC_API_URL`
- `BASIC_AUTH_USER`, `BASIC_AUTH_PASS`
- `NEXT_PUBLIC_TURNSTILE_SITE_KEY`, `TURNSTILE_SECRET_KEY`
- opcionálisan i18n kulcsok (`NEXT_PUBLIC_I18N_*`)

Üzemeltetés:

- build + `next start`
- PM2 process manager
- Apache reverse proxy