Technical Documentation

Key Terms

• Prisma — A tool that lets the app talk to the database using regular code instead of raw database commands
• ORM — A translator between app code and the database, so you don’t have to write SQL by hand
• PostgreSQL — The free database that stores all user, course, and progress data (like a giant organized spreadsheet on the server)
• NextAuth — The ready-made login system that handles signing in, staying logged in, and checking your role
• JWT — A small digital pass stored in your browser that proves you’re logged in, so you don’t re-enter your password on every page
• API Routes — Special server URLs that handle behind-the-scenes work like saving data or generating AI content

This section provides a comprehensive technical reference for the SisterShield platform. It is intended for developers, maintainers, and evaluators who need to understand how the system is built, how its features work, and how to set up a development environment.

Quick Reference

Technology	Version	Purpose
Next.js (App Router)	14.2.21	Full-stack React framework
TypeScript	5.7.2	Type-safe language
React	18.3.1	UI component library
PostgreSQL	—	Relational database
Prisma	6.2.1	ORM and database toolkit
NextAuth	4.24.11	Authentication (JWT strategy)
next-intl	3.26.3	Internationalization (ko-KR, en-US)
Tailwind CSS	3.4.17	Utility-first CSS framework
shadcn/ui (Radix UI)	—	Accessible component primitives
Lucide React	0.469.0	Icon library
Anthropic SDK	0.39.0	Claude Sonnet LLM integration
OpenAI SDK	4.77.0	GPT-4o and DALL-E 3 integration
Playwright	1.40.0	End-to-end testing
Zod	3.24.1	Runtime schema validation
bcryptjs	2.4.3	Password hashing

Section Map

System Architecture Overview

High-level architecture, component diagram, data flow, and how the major subsystems connect.

Key Application Flows

Sequence diagrams for authentication, course creation, course play, submission review, and the Quick Exit safety mechanism.

Feature Map

A table mapping every major feature to its code location, description, and implementation status.

How to Use SisterShield

Role-based user guide covering Student, Teacher, and Admin workflows.

Stack & Setup Guide

Prerequisites, installation steps, environment variables, and development commands.

Privacy & Safety Controls

Data lifecycle, authentication details, Quick Exit behavior, AI safety constraints, and privacy considerations.

Semantic Design Tokens

The token architecture, CSS custom properties, Tailwind configuration, CTA styling rules, and anti-creep guidelines.

AI Prompting & Disclosure

How AI is used across the platform, provider abstraction, safety controls, and ethical disclosure.

Course Generator LLM Prompt Spec

The full system prompt, reference standards, output structure, few-shot examples, and safety strategy for AI-generated courses.

Source Code Layout

src/
  app/
    [locale]/
      (auth)/         Login, Register pages
      (dashboard)/    Dashboard, Courses, Submissions, Progress, Settings
    api/              REST API routes
  components/
    ui/               shadcn/ui components
    layout/           Header, Sidebar, Footer, LocaleSwitcher
    twine/            TwinePlayer (iframe renderer)
    hero/             Landing page components
    safety/           QuickExit, GetHelp
    courses/          CourseCard, ImagePromptPanel
  lib/
    prisma.ts         Database client singleton
    auth.ts           NextAuth configuration
    analytics.ts      Event tracking
    storage/          File storage abstraction (local, future S3)
    twine/            Parser, compiler, injector, builder, renderer, error detection
    i18n/             Locale config, navigation, request handling
    llm/              LLM client, story generation, translation, error fixing, image prompts
  hooks/              useProgress and other custom hooks
  messages/           en-US.json, ko-KR.json (translation strings)
prisma/
  schema.prisma       Database schema
  seed.ts             Seed script for test data