01
FRAMEWORK
TS
TanStack Start
Full-stack React framework
TanStack Start powers the application structure,
combining file-based routing, server-side rendering
and server functions into one full-stack React
architecture.
HOW IT WORKS
Route → Render → Server Function
02
UI
R
React 19 + TypeScript
Component-driven interface
React handles the interface through reusable components,
while TypeScript keeps data flow, props and application
logic strongly typed and predictable.
HOW IT WORKS
Component → State → Typed UI
03
DESIGN SYSTEM
TW
Tailwind CSS v4
Design system & styling
Tailwind provides the styling foundation while
shadcn/ui supplies accessible interface primitives.
Design tokens keep the visual system consistent
across the platform.
HOW IT WORKS
Tokens → Components → Consistent UI
04
MOTION
FM
Framer Motion
Interaction & animation
Motion is used for page reveals, transitions and
interaction feedback, giving the interface responsive
movement without making the experience distracting.
HOW IT WORKS
Interaction → Motion → Feedback
05
BUILD
V
Vite 7
Development & production build
Vite powers the development environment with fast
hot-module replacement and creates optimized
production bundles for deployment.
HOW IT WORKS
Source → Bundle → Production
06
EDGE
CF
Cloudflare Workers
Edge runtime
Server-side rendering and server functions execute
at the edge, bringing application logic closer to
users instead of relying on a single central server.
HOW IT WORKS
Request → Edge → Response
07
DATABASE
PG
PostgreSQL
Data, authentication & realtime
PostgreSQL stores application data while the
Supabase-compatible platform provides authentication,
storage, row-level security and realtime channels.
HOW IT WORKS
Request → RLS → Data
08
AI
AI
Server-side AI
GPT-powered intelligence
AI capabilities power tutoring, resume analysis,
career roadmaps, question generation, coaching and
assistant experiences through a server-side gateway.
HOW IT WORKS
User Input → Server → AI → Result
09
PYTHON
PY
Pyodide
Python directly in the browser
The AI Notebook runs real Python through Pyodide inside
a Web Worker. NumPy, Pandas, Matplotlib and
scikit-learn can run without freezing the interface.
HOW IT WORKS
Python → Web Worker → Browser
10
OFFLINE
PWA
Workbox + PWA
Offline-first experience
A service worker caches the application shell and
important assets, while local storage keeps notebooks,
problems, Sparks metadata and game progress available
when connectivity disappears.
HOW IT WORKS
Network → Cache → Offline
11
VIDEO
YT
YouTube IFrame API
Lessons & Sparks
Course lessons and the Sparks short-video experience
use the YouTube IFrame API for playback controls,
fullscreen, interaction and feed navigation.
HOW IT WORKS
Content → IFrame → Interactive Player
12
SECURITY
RLS
Server Functions + RLS
Protected application architecture
Sensitive operations stay on the server. Inputs are
validated, authentication is attached to protected
functions and Row Level Security determines which
records a user can access.
HOW IT WORKS
Auth → Validation → RLS → Data
