Features Class Overview Dashboard — At-a-glance performance breakdown across all students and physics topics Per-Student Deep Dives — Score breakdowns, recent quiz trends, identified misconceptions, and trajectory (improving / stable / declining) AI Intervention Planner — Chat with an AI assistant to get step-by-step intervention plans for any student Topic Coverage — Tracks 6 Physics topics: Kinematics, Newton's Laws, Energy & Work, Momentum & Collisions, Fluid Mechanics, and Waves & Sound Animated Onboarding — Smooth "analyzing" transition screen before entering the dashboard Responsive Design — Clean dark-themed UI with gold accents built for classroom projection or desktop use
Tech Stack LayerTechnologyUI FrameworkReact 18 (via CDN)JSX TranspilationBabel StandaloneFontsDM Sans, Playfair Display, JetBrains Mono (Google Fonts)StylingVanilla CSS with CSS custom propertiesLogicVanilla JavaScriptHostingNetlify No build step required — runs entirely in the browser.
Project Structure classpulse/ ├── index.html # Entry point — loads React, Babel, and all scripts ├── styles.css # Global styles and CSS variables └── js/ ├── data.js # Student roster, topic list, class stats (mock data) ├── chatbot.js # AI chatbot response logic ├── components.js # Reusable React components (ScoreBar, Pill, cards, etc.) └── app.js # Root App component and screen routing
Getting Started No installation needed. Since the project uses CDN-hosted React and Babel, you can run it directly in a browser. Option 1 — Open locally bash# Clone the repo git clone https://github.com/YOUR_USERNAME/classpusledashboard.git cd classpusledashboard
open index.html # macOS start index.html # Windows
Note: Some browsers block local file imports. If components don't load, use a local server (see Option 2).
Option 2 — Local dev server bash# Using Python python -m http.server 8000
npx serve . Then open http://localhost:8000 in your browser. Option 3 — Deploy to Netlify The project is already configured for Netlify. Simply connect your GitHub repo in the Netlify dashboard — no build command or publish directory settings are needed (set publish directory to /).
AI Chatbot Usage Once inside the dashboard, select a student and use the chat panel to ask questions like:
"What are her weaknesses?" "Give me an intervention plan" "How is he doing in fluids?" "What are his strengths?"
The chatbot uses keyword matching against each student's pre-loaded profile to generate contextual, actionable responses.
Built For Highschool teachers managing large classrooms who need quick, data-driven insights to prioritize student support — without digging through spreadsheets.
License MIT — free to use, modify, and distribute.
Developer: John Uy