jewinjibu/eduspark

Purpose and Runtime

EduSpark 2.1 is a TypeScript React learning platform: curriculum browsing, topic learning, quizzes, missions, flashcards, progress, an IDE, certificates, and an AI-assisted coding workspace. The browser app is built and served by Vite; a separate Node/Express service proxies AI requests to OpenRouter. Entry points are src/main.tsx, src/App.tsx, and server/server.js.

Application Shell and Navigation

src/App.tsx is the likely composition and route-selection boundary for page-level experiences. Shared presentation and fault containment sit around those pages through src/components/AppLayout.tsx and src/components/ErrorBoundary.tsx. Page modules under src/pages/, notably src/pages/LearningWorkspace.tsx, src/pages/IDEPage.tsx, and src/pages/SubjectDetailPage.tsx, own major user workflows rather than a server-rendered backend.

Learning Content and Curriculum Flow

Curriculum is primarily client-owned static data: subject, course, lesson, quiz, mission, and flashcard definitions in src/data/subjects.ts, src/data/lessons.ts, and src/data/courseSchema.json (with language-specific JSON datasets alongside them). Users move from subject/topic views into learning content and practice; reusable content renderers include src/components/LanguageSection.tsx, src/components/LessonCard.tsx, and src/components/CodePractice.tsx.

User State, Authentication, and Persistence Boundary

Firebase is the external identity/application-service boundary, initialized in src/lib/firebase.ts. Authentication state is exposed through src/contexts/AuthContext.tsx and consumed via src/hooks/useAuth.ts. Learning-state concerns are separated into focused hooks—progress, streaks, missions, notifications, recommendations, and spaced repetition—such as src/hooks/useProgress.ts, src/hooks/useMissions.ts, and src/hooks/useSpacedRepetition.ts; shared client state utilities reside in src/lib/store.ts.

Learning Feature Modules

Feature directories package interactive learning surfaces independently from general pages: quizzes (src/features/quiz/QuizPanel.tsx), flashcards (src/features/flashcards/FlashcardPanel.tsx), missions (src/features/missions/MissionPanel.tsx), and mastery/progress (src/features/progress/MasteryPanel.tsx). This creates a flow from static curriculum and authenticated learner state into task-specific panels, then back into progress-oriented hooks/state.

IDE and AI Coding OS

The coding environment is split between a conventional IDE workspace—src/features/ide/IDE.tsx, src/features/ide/IDEWorkspace.tsx, src/features/ide/VisualBlockEditor.tsx—and the broader AI Coding OS at src/features/ai-coding-os/AICodingOS.tsx. The latter organizes Learn/Build/Debug/Review/Ship/Grow stages through panel modules such as src/features/ai-coding-os/panels/BuildPanel.tsx and src/features/ai-coding-os/panels/DebugPanel.tsx, backed by local concepts, paths, templates, and progression logic in src/features/ai-coding-os/data/ and src/features/ai-coding-os/lib/progression.ts.

AI Service and Deployment Boundary

The browser must not call OpenRouter with credentials directly. server/server.js owns /api/ai/* proxy behavior, obtains OPENROUTER_API_KEY from server/.env, and can enforce Bearer-token and CORS-origin controls. The front end’s AI integration surface includes src/hooks/useAIModels.ts; requests cross from Vite-hosted client code to Express, then OpenRouter. Production frontend deployment is configured by vercel.json; the Express server remains a separately runnable/deployable Node service.