Tech Doc Builder est une application web construite avec Next.js (App Router), TailwindCSS et TypeScript, visant à automatiser la création et la gestion de documents techniques.

Le dashboard a été modernisé avec TailwindCSS et les composants shadcn/ui pour un SaaS de gestion de projets :

• Cartes KPI (Total projets, Documents, Avancement, Stockage)
• Graphique de tendance (sparkline) sur 7/30 jours sans dépendances externes
• Flux d’activité récent (exemples) prêt à connecter à Supabase Realtime
• Tableau des projets récents avec badges et états de chargement
• Actions rapides (Nouveau projet, Nouveau document, Import)

Fichiers principaux :

• src/app/(app)/dashboard/page.tsx — composition générale du dashboard
• src/components/dashboard/StatsCards.tsx — cartes KPI
• src/components/dashboard/TrendsChart.tsx — sparkline SVG avec Tabs
• src/components/dashboard/ProjectsTable.tsx — table shadcn des projets
• src/components/dashboard/ActivityFeed.tsx — flux d’activité
• src/components/dashboard/QuickActions.tsx — boutons d’actions

Astuce: pour alimenter les KPI/graphes avec de vraies données, exposez une RPC Supabase (ex: dashboard_stats) ou un service côté src/server/ et branchez les hooks correspondants.

techdoc-builder/ ├─ components.json ├─ eslint.config.mjs ├─ next-env.d.ts ├─ next.config.ts ├─ package.json ├─ postcss.config.mjs ├─ README.md ├─ roadmap.md ├─ tsconfig.json ├─ public/ # Fichiers statiques (images, icons) ├─ src/ │ ├─ proxy.ts │ ├─ app/ # Routing principal (Next.js App Router) │ │ ├─ globals.css # Styles globaux │ │ ├─ layout.tsx # Layout racine │ │ ├─ not-found.tsx # Page 404 │ │ ├─ page.tsx # Page racine │ │ └─ (app)/ # Espace connecté │ │ ├─ layout.tsx │ │ ├─ dashboard/ │ │ │ └─ page.tsx │ │ └─ projects/ │ │ ├─ page.tsx │ │ └─ [id]/ │ │ └─ page.tsx │ ├─ (auth)/ # Authentification (login/register) │ │ ├─ login/ │ │ │ └─ page.tsx │ │ └─ register/ │ │ └─ page.tsx │ ├─ components/ # UI réutilisable │ │ ├─ charts/ │ │ ├─ dashboard/ │ │ │ ├─ Sidebar.tsx │ │ │ └─ Topbar.tsx │ │ ├─ layout/ │ │ └─ ui/ # Design system (shadcn/ui) │ ├─ features/ # Dossiers métiers (feature-based) │ │ ├─ auth/ │ │ │ ├─ components/ │ │ │ ├─ hooks/ │ │ │ ├─ services/ # authService.ts, tokenService.ts │ │ │ └─ types/ │ │ ├─ documents/ # types.ts, components/, hooks/, services/ │ │ └─ projects/ # types.ts, components/, hooks/, services/ │ ├─ hooks/ # Hooks réutilisables │ │ ├─ useDebounce.ts │ │ └─ useMediaQuery.ts │ ├─ lib/ # Utilitaires framework/infra │ │ ├─ env.ts # Validation des variables d’env │ │ ├─ fetcher.ts # Wrapper fetch API │ │ ├─ logger.ts │ │ ├─ pointMeta.ts │ │ ├─ rules.ts │ │ ├─ supabaseClient.browser.ts # Client Supabase côté navigateur │ │ ├─ supabaseClient.server.ts # Client Supabase côté serveur │ │ ├─ utils.ts │ │ └─ zod.ts │ ├─ public/ │ │ └─ icons/ │ ├─ server/ # Server Actions & services backend │ │ ├─ actions/ │ │ │ ├─ authActions.ts │ │ │ └─ projectActions.ts │ │ └─ services/ │ │ └─ projectService.ts │ ├─ store/ │ │ └─ settings.store.ts │ ├─ styles/ │ │ ├─ tailwind.css │ │ └─ tokens.css │ ├─ types/ │ │ └─ globals.d.ts │ └─ utils/ # Fonctions utilitaires pures │ ├─ cm.ts │ ├─ date.ts │ ├─ exportCsv.js │ ├─ exportPdf.js │ └─ generation.js

Pour configurer l’application, créez un fichier .env à la racine du projet en vous inspirant de .env.example. Ce fichier est destiné uniquement à un usage local/développement.

NEXT_PUBLIC_SUPABASE_URL=https://sonhxzxofsfdytwxmlee.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InNvbmh4enhvZnNmZHl0d3htbGVlIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjEzMjAzNjEsImV4cCI6MjA3Njg5NjM2MX0.XBTZX2DGgq1NEOzDlaCi5uMXEg_-r43ii_yReudaUeY

# Logger
NODE_ENV=development
NEXT_PUBLIC_LOG_LEVEL=info
LOG_LEVEL=info

• Next.js App Router avec Server Components et Server Actions pour limiter le boilerplate API et optimiser le SSR/streaming.
• Auth & données via Supabase (clients séparés browser/server pour éviter les fuites de clés et améliorer DX SSR).
• UI avec Tailwind v4 (fichier styles/tailwind.css) et composants shadcn/ui pour accélérer la livraison tout en restant accessible.
• Validation avec Zod et utilitaires centralisés dans src/lib (fetcher typé, logger, règles, mapping pointMeta).
• Découpage feature-based dans src/features/* pour l’évolutivité et l’isolation métier.
• État local léger et store global src/store/settings.store.ts pour les préférences.

• Dépendance à Supabase: fonctionnement offline limité, quotas/rate-limit côté free tier.
• Edge/SSR: certaines APIs côté navigateur seulement; bien utiliser supabaseClient.server.ts vs browser.ts.
• Tests: suite de tests limitée à ce stade; à renforcer (unitaires sur lib, e2e sur flux critiques).

• Socle (setup, routing, UI, auth de base): 6–10 h
• Projets (CRUD, liste, détails, filtres, hooks): 8–14 h
• Documents (génération PDF/CSV, templates): 8–16 h
• Tableau de bord (widgets, graphiques): 6–10 h
• Qualité (tests, perf, a11y, CI): 6–12 h

Hypothèses: 1 dev, design existant, Supabase prêt. Les estimations varient selon périmètre exact et complexité métier.

La conception ainsi que le développement de l'application ont duré 7,5 heures pour l’initialisation et le socle actuel.