Projects
These projects demonstrate classroom-focused systems built with React and Firebase, deployed to production with custom subdomains.
Bar Time Trivia (BTT)
Problem
Group-hosted trivia requires synchronized gameplay, live score control, and structured session management beyond simple quiz tools.
Solution
Built a real-time host-controlled trivia platform using React, Firebase, and Socket.io with join codes and session state handling.
Technical Highlights
- Real-time multiplayer state via Socket.io rooms
- Firestore data modeling for users, games, and sessions
- Reconnect logic to preserve player state
- Custom subdomain deployment via Cloudflare Pages
Next Iteration
- Session analytics dashboard
- Improved moderation tools
Exit Ticket Generator
Problem
End-of-lesson formative assessments often require paper collection, manual sorting, and delayed feedback, making it difficult to quickly gauge student understanding during a lesson.
Solution
Built a lightweight formative assessment tool using React and Firebase that allows teachers to create and publish live multiple-choice or short-response questions. Students submit responses (with confidence ratings), and teachers can view results in real time and review historical submissions.
Technical Highlights
- Public/private Firestore document separation to prevent answer leakage
- Subcollection structure for ticket-scoped student submissions
- Firebase Anonymous Authentication for teacher session control
- Real-time updates using Firestore onSnapshot listeners
Next Iteration
- Persistent teacher accounts with role-based authentication
- Grouping questions by student learning targets or standards
Graph Maker
Problem
Creating clean, customizable graphs for classroom activities often requires manual formatting in external tools, consuming instructional planning time.
Solution
Built a lightweight, frontend-only graphing tool using React that allows teachers to generate up to four-quadrant coordinate grids, customize axis labels, and plot points or segments for instructional use.
Technical Highlights
- Canvas-based rendering driven by React state
- LocalStorage persistence for saving graph presets
- Stateless frontend architecture (no backend dependency)
- Custom subdomain deployment via Cloudflare Pages
Next Iteration
- Export graphs as downloadable images (PNG)
- Smoother rendering for non-linear segments and curves