olek/AI_template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add foundational documentation templates to support product design and architecture planning, including ADR, archetypes, LLM systems, dev setup, and shared modules.

Browse Source
This commit is contained in:
olekhondera
2025-12-12 02:31:03 +02:00
parent 5053235e95
commit c905cbb725
26 changed files with 759 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/frontend/FRONTEND_ARCHITECTURE_PLAN.md
View File

@@ -1,26 +1,30 @@
# Frontend Architecture Plan — AI Product Template
> **Status:** Phase 0 (Planning) — recommendations to finalize in Phase 1
> **Scope:** Next.js (App Router, TS) + Tailwind + React Query/SWR for ingestion → categorization → approvals → reporting → billing
> **Scope:** Next.js (App Router, TS) + Tailwind + React Query/SWR. The concrete flows (chat, generation, pipeline, approvals, billing) depend on the chosen archetype in `/docs/archetypes.md`.
> **Sources:** Next.js App Router best practices (per latest docs), product/domain docs in `/docs`
> **Purpose:** This file is a scratchpad for exploring options and trade‑offs.
> Move finalized decisions into `/docs/frontend/architecture.md`.
> **Archive or delete this plan after Phase 1** to avoid duplication.
## 0. Goals & Non-Goals
- Ship a clear, predictable frontend for users in your target domain: fast tables, reliable status, explainability (rule hit, embedding score, LLM reasoning trace).
- Optimize for multi-tenant, webhook-driven states, and payment‑provider‑hosted billing; no direct provider/LLM calls from the browser.
- Ship a clear, predictable frontend for your chosen archetype: fast core interactions (chat/workflow/pipeline/automation), reliable status, explainability when applicable (scores, traces, source).
- Optimize for long‑running or webhook‑driven states if your product uses them; no direct provider/LLM calls from the browser.
- Non-goal: custom card forms or direct provider SDKs in the browser.
## 1. Routing & Layout
- App Router with `app/`; root `layout.tsx` imports globals (per Next.js docs).
- Layout shells: public (marketing), app shell (auth/tenant-protected), auth screens.
- Minimal routes: `/`, `/records`, `/records/review`, `/rules`, `/reports`, `/settings/billing`, `/settings/integrations`, `/settings/team`.
- Minimal routes depend on archetype. Example for pipeline products: `/`, `/records`, `/records/review`, `/rules`, `/reports`, `/settings/billing`, `/settings/integrations`, `/settings/team`.
- Navigation state from `next/navigation`; avoid dynamic `href` objects in `<Link>` (App Router requirement).
## 2. Feature/Folder Structure
```
src/
app/ # routes/layouts
features/ # onboarding, records, approvals, rules, reports, billing, settings
entities/ # tenant, user, record, rule, report, event, integration
features/ # archetype flows (e.g., onboarding, chat, items, approvals, reports, billing, settings)
entities/ # domain entities (tenant/user optional; items/messages/drafts/tasks, etc.)
shared/ # ui kit, hooks, api client, lib (formatting, domain utils), auth client
widgets/ # composed UI blocks (dashboards, charts, tables)
```