Technology Stack
Discover the technologies powering Kisakata
Frontend
Next.js 16
Modern React framework with App Router, performance optimization, and Netlify deployment.
React 19
Latest React version for reactive and optimized components.
TypeScript
Static typing for improved maintainability and code safety.
Tailwind CSS v4
Utility-first CSS framework with custom "Brume de la Rivière" design system.
Framer Motion
Animation library for fluid and reactive interfaces.
GSAP
Advanced animation and precise scroll-driven transition control.
Mapbox GL JS v3
High-performance mapping engine for planetary 3D visualization (Globe), terrain, and dynamic atmosphere.
Backend & Database
Supabase
Hosted PostgreSQL + OAuth authentication + GraphQL/REST API. Complete data and user session management.
PostgreSQL
Robust relational database with Row Level Security (RLS) for multi-user safety.
Stripe
Integrated payment platform for managing subscriptions and transactions.
Deployment & Infrastructure
Netlify
Continuous deployment from main Git branch with optimized builds.
Node.js 18+
JavaScript runtime for backend and Next.js compilation.
Tools & Utilities
date-fns
Date manipulation and formatting with multilingual support.
Lucide React
Minimal and lightweight icon library.
@supabase/ssr
Server and client-side authentication for Supabase with Next.js.
Web Push API
Native push notifications via Service Worker + VAPID. Subscriptions stored in the push_subscriptions table.
KaTeX + MathLive
High-quality LaTeX math rendering and expression input for the École de la Brume.
withRetry (internal)
Internal retry utility with exponential backoff (300ms → 900ms → 2700ms). Required on every .insert(), .upsert(), .update().
Supabase Tables (v2.3.0)
chat_reactions — Emoji reactions on messages
push_subscriptions — Web Push subscriptions per user
ecole_scores — Exercise mode scores per chapter
chat_conversations — Extended with is_group, group_name, created_by
Architecture & Patterns
Server Components : Maximize use of React Server Components for performance optimization.
Client Components : Used only for interactivity, forms, and hooks.
API Routes : Serverless endpoints for backend logic and webhooks.
Context API : Global state management (authentication, language, preferences).
Custom Hooks : Reusable complex logic (messages, conversations, progress).
Anti-loop Subscription : isFetchingRef + silent fetch in realtime callbacks — never setLoading(true) inside a subscription.