Tech Specs: React Router v7 + Cloudflare Workers

Stav dokumentu: Referenční architektura — diagramy a seznamy jsou platné; §11 MVP rozsah je rozšířený cíl (checkboxy = zapracování v produktu).

1. Cíl

Projekt bude postaven jako full-stack React aplikace pomocí React Router v7 běžící na Cloudflare Workers.

2. Stack (jednotný zdroj)

Výpis technologií, domény a nasazení je vedený jen v 20-tech-stack.md — aby stack nebyl duplicitně udržovaný ve více souborech. Tento dokument z níže předpokládá stejný stack při popisu architektury a rout.

3. Architektura

User Browser
    |
    v
Cloudflare CDN
    |
    v
Cloudflare Worker
    |
    v
React Router v7 App
    |
    |-- Public Routes
    |-- Admin Routes
    |-- Resource Routes / API Routes
    |-- Route Loaders
    |-- Route Actions
    |
    |-- D1: relační databáze
    |-- R2: obrázky a soubory
    |-- KV: cache
    |-- Cloudflare Access: admin ochrana

4. Proč React Router v7

Projekt bude obsahový katalog, ne jen jednoduchá SPA aplikace.

React Router v7 dává smysl kvůli:

  • server-side renderingu,
  • SEO,
  • route loaderům,
  • actions pro formuláře,
  • full-stack modelu,
  • přímému běhu na Cloudflare Workers,
  • dobrému základu pro katalogové stránky.

5. Hlavní veřejné stránky

/
 /byliny
 /byliny/:slug
 /symptomy
 /symptomy/:slug
 /zpracovani
 /zpracovani/:slug
 /sezona
 /sezona/:month
 /region
 /region/:slug
 /vyhledavani

6. Admin stránky

/admin
/admin/byliny
/admin/byliny/new
/admin/byliny/:id
/admin/studie
/admin/spiritualni-pouziti
/admin/zpracovani
/admin/obrazky
/admin/import
/admin/cache

7. Resource / API routes

/api/herbs
/api/herbs/:slug
/api/search
/api/filters
/api/regions
/api/topics
/api/processing-methods
/api/admin/cache-purge
/api/admin/reindex

8. Data loading

Detail byliny:

Request: /byliny/kopriva-dvoudoma
  |
  v
React Router loader
  |
  v
Zkusí KV cache
  |
  |-- HIT: vrátí data
  |
  |-- MISS:
        |
        v
      načte data z D1
        |
        v
      složí detail byliny
        |
        v
      uloží do KV
        |
        v
      vrátí stránce

9. Upload obrázků

Admin nahraje obrázek
  |
  v
React Router action přijme upload
  |
  v
Soubor se uloží do R2
  |
  v
Metadata se uloží do D1
  |
  v
Cache detailu byliny se invaliduje

10. Cache

KV cache klíče:

homepage:v1:cs
filters:v1:cs
regions:v1:cs
topics:v1:cs
processing-methods:v1:cs
herb-detail:v1:{slug}:{language}
herb-list:v1:{hash-of-filters}
topic-detail:v1:{slug}:{language}
processing-detail:v1:{slug}:{language}
seasonal:v1:{region}:{month}:{language}
sitemap:v1

11. MVP rozsah

  • React Router v7 aplikace,
  • Cloudflare Workers deployment,
  • D1 databáze,
  • R2 storage pro obrázky,
  • KV cache,
  • Cloudflare Access pro admin,
  • veřejný katalog bylin,
  • detail byliny,
  • základní filtry,
  • admin pro byliny,
  • admin pro vědecké důkazy,
  • admin pro spirituální použití,
  • admin pro způsoby zpracování,
  • upload obrázků,
  • základní SEO metadata — částečně (sitemap, robots, sociální meta u části rout),
  • bezpečnostní upozornění,
  • základní sitemap.