# Project export: Superclassroom This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small. ## Project metadata - Hackathon: TreeHacks 2025 - Tagline: Adaptive Learning Content Generation for Students with Disabilities - Devpost: https://devpost.com/software/superclassroom - GitHub: https://github.com/airjlee/superclassroom - Video: https://www.youtube.com/embed/2CCohCdx4zk?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent - Result: winner (Intersystems: Best Use of GenAI using InterSystems IRIS Vector Search ($2k Cash [1st] & $1.5k Cash [2nd] & 1k Cash [3rd])) - Team: 0 GitHub contributor(s) — ## Devpost submission (written by the team) ### Inspiration Every since I could remember, I've happily dedicated countless hours to helping my brother, Zac, digest content and prepare for his exams. Zac was very naturally smart, but always struggled with learning the way that the US education system wanted him to. As it turns out, he wasn't alone -- an overwhelming 74% of students nationwide are dissatisfied with means in which they are provided to learn and absorb concepts, and are proven to perform upwards of 200% better when introduced to more adaptive ways of learning. But it gets bigger than that -- Zac was also diagnosed with dyslexia, making his journey towards academic success an even steeper climb. The support for dyslexia in the US remains a frightening concern, as over 95% of diagnosed dyslexics claim that they do not receive the appropriate accommodations in school, amongst the rigid education system. Inspired by my brother's struggles and the infinite curiosity that lie in the different ways that human beings love to learn -- I wish to create a platform that is able to adapt to each student's individual needs. ### What it does Superclassroom is a student-adaptive exam preparation and learning material generation tool designed to adapt to each student's needs. Students using the platform will upload course material relevant to their upcoming exam or topics that they want to study, establishing a personalized knowledgebase for each course the student is taking. Superclassroom then uses this information in a RAG pipeline to generate highly-relevant course study material, such as comprehensive notes, topic summaries, adaptive flashcards, and practice exams. There is also a space to leave notes about the student's profile, which is used in the RAG pipeline to generate more personalized results and accommodate disability. How I built it Superclassroom is built with MCP servers and RAG architecture with Intersystem's Iris vectorized database and vector search to store multimodal sources of course content. Superclassroom then uses Mistral's LLM along with the relevant information to create highly accurate and relevant results based on the documents that the student provides. Superclassroom uses a dataset of over 1200 relevant documents in the pipeline related to disability, accessibility, and research on how to best provide a positive learning experience in order to generate adaptive and considerate learning material. Challenges I ran into The hardest challenge for me was definitely finding a way to accommodate all kinds of learners. Incorporating notes about the student's learning styles into the RAG pipeline was a great way to work around it and develop a platform that can truly adapt on its feet. ### Accomplishments we're proud of Getting a tool that is functional and something that my younger brother can actually use is a huge accomplishment for me. ### What's next Keep building and eventually develop a platform that will change the lives of many students worldwide! ## README (from the GitHub repository) # superclassroom superclassroom pivot ## Detected evidence (automated analysis) Indexed codebase: 34 recognized source files, 362 KB. - CSS (language) — detected in the code - HTML (language) — detected in the code - JavaScript (language) — detected in the code - React (technology) — detected in the code - Mistral AI (technology) — claimed on Devpost, not found in the code ## Codebase structure (from repository index) ### Files (80 of 80) ``` .gitignore frontend/package.json frontend/public/fonts/CooperHewitt-OTF-public/-CooperHewitt-FontLog.txt frontend/public/fonts/CooperHewitt-OTF-public/-CooperHewitt-OFL-201406.txt frontend/public/fonts/CooperHewitt-OTF-public/-OFL-FAQ.txt frontend/public/fonts/CooperHewitt-OTF-public/CooperHewitt-Bold.otf frontend/public/fonts/CooperHewitt-OTF-public/CooperHewitt-BoldItalic.otf frontend/public/fonts/CooperHewitt-OTF-public/CooperHewitt-Book.otf frontend/public/fonts/CooperHewitt-OTF-public/CooperHewitt-BookItalic.otf frontend/public/fonts/CooperHewitt-OTF-public/CooperHewitt-Heavy.otf frontend/public/fonts/CooperHewitt-OTF-public/CooperHewitt-HeavyItalic.otf frontend/public/fonts/CooperHewitt-OTF-public/CooperHewitt-Light.otf frontend/public/fonts/CooperHewitt-OTF-public/CooperHewitt-LightItalic.otf frontend/public/fonts/CooperHewitt-OTF-public/CooperHewitt-Medium.otf frontend/public/fonts/CooperHewitt-OTF-public/CooperHewitt-MediumItalic.otf frontend/public/fonts/CooperHewitt-OTF-public/CooperHewitt-Semibold.otf frontend/public/fonts/CooperHewitt-OTF-public/CooperHewitt-SemiboldItalic.otf frontend/public/fonts/CooperHewitt-OTF-public/CooperHewitt-Thin.otf frontend/public/fonts/CooperHewitt-OTF-public/CooperHewitt-ThinItalic.otf frontend/public/fonts/fago/fagopro 2.otf frontend/public/fonts/fago/fagopro 3.otf frontend/public/fonts/fago/fagopro-bold 2.otf frontend/public/fonts/fago/fagopro-bold.otf frontend/public/fonts/fago/fagopro.otf frontend/public/fonts/fago/fagoprobold.otf frontend/public/fonts/helvetica/Helvetica Neue LT Com 77 Bold Condensed.4b396b4f18559b5980a1.woff 2 frontend/public/fonts/helvetica/Helvetica Neue LT Com 77 Bold Condensed.woff 2 frontend/public/fonts/helvetica/Helvetica Neue LT Com 77 Bold Condensed.woff 3 frontend/public/fonts/helvetica/Helvetica Neue LT Com 77 Bold Condensed.woff 4 frontend/public/fonts/helvetica/Helvetica Neue LT Std 47 Light Condensed 2.otf frontend/public/fonts/helvetica/Helvetica Neue LT Std 47 Light Condensed 3.otf frontend/public/fonts/helvetica/Helvetica Neue LT Std 47 Light Condensed 4.otf frontend/public/fonts/helvetica/Helvetica Neue LT Std 47 Light Condensed.88ce1fd144e27ccc7bd9 2.otf frontend/public/fonts/helvetica/Helvetica Neue LT Std 47 Light Condensed.88ce1fd144e27ccc7bd9.otf frontend/public/fonts/helvetica/Helvetica Neue LT Std 47 Light Condensed.otf frontend/public/fonts/helvetica/Helvetica Neue LT Std 57 Condensed 2.otf frontend/public/fonts/helvetica/Helvetica Neue LT Std 57 Condensed 3.otf frontend/public/fonts/helvetica/Helvetica Neue LT Std 57 Condensed 4.otf frontend/public/fonts/helvetica/Helvetica Neue LT Std 57 Condensed.753036847e6f777af67d 2.otf frontend/public/fonts/helvetica/Helvetica Neue LT Std 57 Condensed.753036847e6f777af67d.otf frontend/public/fonts/helvetica/Helvetica Neue LT Std 57 Condensed.otf frontend/public/fonts/open-dyslexic/OpenDyslexic-Bold-Italic.otf frontend/public/fonts/open-dyslexic/OpenDyslexic-Italic.otf frontend/public/fonts/OpenDyslexic-Bold.otf frontend/public/fonts/OpenDyslexic-Regular.otf frontend/public/index.html frontend/src/App.css frontend/src/App.js frontend/src/components/Assignment/Assignment.css frontend/src/components/Assignment/Assignment.js frontend/src/components/AssignmentCreator/AssignmentCreator.css frontend/src/components/AssignmentCreator/AssignmentCreator.js frontend/src/components/AssignmentPage/AssignmentPage.css frontend/src/components/AssignmentPage/AssignmentPage.js frontend/src/components/Header.css frontend/src/components/Header.js frontend/src/components/Home/Home.css frontend/src/components/Home/Home.js frontend/src/components/MultiPartAssignment/components/PartContent.css frontend/src/components/MultiPartAssignment/components/PartContent.js frontend/src/components/MultiPartAssignment/components/PartsSidebar.css frontend/src/components/MultiPartAssignment/components/PartsSidebar.js frontend/src/components/MultiPartAssignment/data/assignmentDefinitions.js frontend/src/components/MultiPartAssignment/MultiPartAssignment.css frontend/src/components/MultiPartAssignment/MultiPartAssignment.js frontend/src/components/MultiPartAssignment/utils/partValidation.js frontend/src/components/MultiPartAssignment/utils/progressUtils.js frontend/src/components/SocraticDialogue/SocraticDialogue.css frontend/src/components/SocraticDialogue/SocraticDialogue.js frontend/src/components/SubmissionPage/SubmissionPage.css frontend/src/components/SubmissionPage/SubmissionPage.js frontend/src/components/TeacherDashboard/CourseDashboard.css frontend/src/components/TeacherDashboard/CourseDashboard.js frontend/src/components/TeacherDashboard/TeacherDashboard.css frontend/src/components/TeacherDashboard/TeacherDashboard.js frontend/src/index.css frontend/src/index.js frontend/src/shared/components.css package.json README.md ``` ### Dependencies - frontend/package.json: @chatscope/chat-ui-kit-react@^2.1.1, @chatscope/chat-ui-kit-styles@^1.4.0, @testing-library/jest-dom@^5.16.4, @testing-library/react@^13.3.0, @testing-library/user-event@^13.5.0, katex@^0.16.22, progressbar.js@^1.1.1, react@^18.2.0, react-dom@^18.2.0, react-katex@^3.1.0, react-router-dom@^7.6.3, react-scripts@5.0.1, web-vitals@^2.1.4 - package.json: @chatscope/chat-ui-kit-react@^2.1.1, progressbar.js@^1.1.1 ### Recent commits (newest first) - fixed assignments chat error - discrete sliders - # -> / - fixed search bar dropdown tracking - added search bar functionality - updated ai chat log - changed performance summary - added new ai sliders - changes to ai log - chat log ai history - minor chat changes - Merge branch 'main' of https://github.com/airjlee/superclassroom - Add loading dots animation to Socratic dialogue and reduce timing between loading and typing - Assignment creator page publish button - transition from search bar to assignment creation - Merge branch 'main' of https://github.com/airjlee/superclassroom - Merge branch 'main' of https://github.com/airjlee/superclassroom - AI Settings and other settings on the creation page - ui improvements - Assignment Creation Page ## Key source files (fetched from GitHub, selected and truncated for size) ### package.json ``` { "dependencies": { "@chatscope/chat-ui-kit-react": "^2.1.1", "progressbar.js": "^1.1.1" } } ``` ### frontend/package.json ``` { "name": "superclassroom", "version": "0.1.0", "private": true, "dependencies": { "@chatscope/chat-ui-kit-react": "^2.1.1", "@chatscope/chat-ui-kit-styles": "^1.4.0", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", "katex": "^0.16.22", "progressbar.js": "^1.1.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-katex": "^3.1.0", "react-router-dom": "^7.6.3", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } ``` ### frontend/src/index.js ```javascript import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); ``` ### frontend/src/App.js ```javascript import React, { useState, useEffect } from 'react'; import './App.css'; import Home from './components/Home/Home'; import Assignment from './components/Assignment/Assignment'; import MultiPartAssignment from './components/MultiPartAssignment/MultiPartAssignment'; import SocraticDialogue from './components/SocraticDialogue/SocraticDialogue'; import AssignmentCreator from './components/AssignmentCreator/AssignmentCreator'; import TeacherDashboard from './components/TeacherDashboard/TeacherDashboard'; import CourseDashboard from './components/TeacherDashboard/CourseDashboard'; import AssignmentPage from './components/AssignmentPage/AssignmentPage'; import SubmissionPage from './components/SubmissionPage/SubmissionPage'; import Header from './components/Header'; function App() { const [currentPage, setCurrentPage] = useState('home'); const [currentCourseId, setCurrentCourseId] = useState(null); const [currentAssignmentId, setCurrentAssignmentId] = useState(null); const [currentSubmissionId, setCurrentSubmissionId] = useState(null); const [currentStudentName, setCurrentStudentName] = useState(null); const [showCreateDropdown, setShowCreateDropdown] = useState(false); const handleCreateSelection = (type) => { setShowCreateDropdown(false); setCurrentPage('create-assignment'); }; const handleNavigateToSubmission = (submissionId, assignmentId, studentName) => { setCurrentSubmissionId(submissionId); setCurrentAssignmentId(assignmentId); setCurrentStudentName(studentName); setCurrentPage('submission-page'); }; // Close dropdown when clicking outside or changing pages useEffect(() => { setShowCreateDropdown(false); }, [currentPage]); const renderPage = () => { switch(currentPage) { case 'assignment': return setCurrentPage('home')} />; case 'multi-part-assignment': return setCurrentPage('home')} />; case 'socratic': return setCurrentPage('home')} />; case 'create-assignment': return setCurrentPage('course-dashboard')} />; case 'dashboard': return { setCurrentCourseId(courseId); setCurrentPage('course-dashboard'); }} onNavigateToCreate={() => setCurrentPage('create-assignment')} />; case 'course-dashboard': return setCurrentPage('dashboard')} onNavigateToCreate={(type) => setCurrentPage('create-assignment')} onNavigateToAssignment={(assignmentId) => { setCurrentAssignmentId(assignmentId); setCurrentPage('assignment-page'); }} />; case 'assignment-page': return setCurrentPage('course-dashboard')} onNavigateToSubmission={handleNavigateToSubmission} />; case 'submission-page': return setCurrentPage('assignment-page')} />; default: return setCurrentPage(type)} />; } }; return (
{currentPage !== 'assignment' && (
setCurrentPage('home')} onNavigateToCreator={handleCreateSelection} onNavigateToDashboard={() => setCurrentPage('dashboard')} onShowCreateDropdown={() => setShowCreateDropdown(!showCreateDropdown)} showCreateDropdown={showCreateDropdown} /> )} {renderPage()}
); } export default App; ``` ### frontend/src/App.css ```css /* App.css - Global Layout */ .App { min-height: 100vh; display: flex; flex-direction: column; } /* Ensure header is always at the top and visible */ .App > header { position: sticky; top: 0; z-index: 1000; flex-shrink: 0; } /* Main content area should take remaining space */ .App > div:not(header) { flex: 1; min-height: 0; /* Important for proper flex behavior */ } /* Reset any problematic styles */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; overflow-x: hidden; } ``` ### frontend/public/index.html ```html Superclassroom
``` ### frontend/src/index.css ```css /* Font Face Declarations */ @font-face { font-family: 'Fago Pro'; src: url('../public/fonts/fago/fagoprobold.otf') format('opentype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Fago Pro'; src: url('../public/fonts/fago/fagoprobold.otf') format('opentype'); font-weight: bold; font-style: normal; } * { margin: 0; padding: 0; box-sizing: border-box; /* Remove blue focus outline from all elements */ } input:focus { outline: none; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #f8f9fa; font-weight: 1200; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } ``` ### frontend/src/shared/components.css ```css /* ===== SHARED COMPONENT STYLES ===== */ /* This file contains styles shared across multiple assignment components */ /* ===== SHARED BUTTON STYLES ===== */ .btn-submit { width: 100%; padding: 16px 24px; background-color: #e1e5e9; color: #6c757d; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .btn-submit.active { background-color: #007bff; color: #ffffff; } .btn-submit.active:hover { background-color: #0056b3; } .btn-submit:disabled { cursor: not-allowed; } /* ===== SHARED FEEDBACK STYLES ===== */ .feedback-base { margin: 24px 0; padding: 16px 20px; border-radius: 8px; border: 1px solid transparent; display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 500; } .feedback-success { background-color: #d4edda; border-color: #c3e6cb; color: #155724; } .feedback-error { background-color: #f8d7da; border-color: transparent; color: #721c24; } .feedback-icon { font-size: 18px; font-weight: bold; flex-shrink: 0; } .feedback-text { font-size: 16px; font-weight: 500; flex: 1; } /* ===== SHARED OPTION STYLES ===== */ .option-letter-base { font-weight: 600; background-color: transparent; } /* Simple variant for linear layouts (Assignment.js) */ .option-letter-simple { margin-right: 12px; min-width: 20px; } /* Circular variant for card layouts (PartContent.js) */ .option-letter-circular { width: 32px; height: 32px; border-radius: 50%; color: #374151; display: flex; align-items: center; justify-content: center; font-size: 14px; } /* ===== SHARED NEXT BUTTON STYLES ===== */ .btn-next { padding: 16px 32px; background-color: #28a745; color: #ffffff; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease; } .btn-next:hover { background-color: #218838; } ``` ### frontend/src/components/Header.js ```javascript import React from 'react'; import './Header.css'; const Header = ({ currentPage, onNavigateHome, onNavigateToCreator, onNavigateToDashboard, onShowCreateDropdown, showCreateDropdown }) => { // Show Back Home button if not on the home page const showBackButton = currentPage !== 'home'; // Show create button on dashboard pages const showCreateButton = currentPage === 'dashboard' || currentPage === 'course-dashboard'; return (
{currentPage === 'home' && ( <> {onNavigateToCreator && ( )} {onNavigateToDashboard && ( )} )} {showCreateButton && (
{showCreateDropdown && (
)}
)} {showBackButton && (
PA
)}
); }; export default Header; ``` ### frontend/src/components/Header.css ```css .socratic-header { position: sticky; top: 0; z-index: 100; height: 60px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; background-color: #f8f9fa; width: 100%; flex-shrink: 0; } .logo-button { background: none; border: none; padding: 0; cursor: pointer; transition: opacity 0.2s ease; } .logo-button:hover { opacity: 0.8; } .header-actions { display: flex; align-items: center; gap: 16px; } .profile-avatar { width: 36px; height: 36px; border-radius: 50%; background: #805ad5; color: white; display: flex; align-items: center; justify-content: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.5px; } .create-button { background: linear-gradient(135deg, #4c05ff 0%, #c820c8 100%); color: white; border: none; padding: 10px 20px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .create-button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3); } .dashboard-button { background: linear-gradient(135deg, #28a745 0%, #20c997 100%); color: white; border: none; padding: 10px 20px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .dashboard-button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3); } .create-button-circular { width: 45px; height: 45px; border-radius: 50%; background: linear-gradient(135deg, #4c05ff 0%, #c820c8 100%); color: white; border: none; font-size: 1.75rem; font-weight: 300; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; line-height: 1; } .create-button-circular:hover { background: linear-gradient(135deg, #3a04cc 0%, #a01ca0 100%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(76, 5, 255, 0.3); } .create-dropdown-container { position: relative; } .create-icon { font-size: 1.125rem; font-weight: bold; } .dropdown-arrow { font-size: 0.75rem; transition: transform 0.2s ease; } .create-dropdown { position: absolute; top: 100%; right: 0; margin-top: 0.5rem; background: white; border-radius: 12px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border: 1px solid #e5e7eb; overflow: hidden; z-index: 10; min-width: 280px; } .dropdown-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: none; border: none; width: 100%; text-align: left; cursor: pointer; transition: background-color 0.2s ease; } .dropdown-item:hover { background-color: #f9fafb; } .dropdown-item:not(:last-child) { border-bottom: 1px solid #f3f4f6; } .item-content { display: flex; flex-direction: column; gap: 0.25rem; } .item-title { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif; font-weight: 600; color: #1f2937; font-size: 1rem; } .item-description { font-size: 0.875rem; color: #6b7280; } .logo { font-family: "Fago Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 23px; font-weight: 600; /* Add fallback color first */ color: #4c05ff; background: linear-gradient(135deg, #4c05ff 0%, #c820c8 100%); background-size: 100%; background-repeat: no-repeat; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -moz-background-clip: text; -moz-text-fill-color: transparent; background-clip: text; display: inline-block; letter-spacing: -0.5px; } /* Add support check */ @supports not (-webkit-background-clip: text) { .logo { color: #007bff; background: none; } } ``` [25 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]