Building ClassSense AI taught me how real-time computer vision, facial-expression analysis and engagement scoring work together to create meaningful insights for teachers, and I learned how to integrate frontend AI models with backend automation tools like n8n to handle data storage, reporting and AI-generated summaries. I built the project by capturing camera input in the browser, analyzing student expressions using a lightweight on-device model, and sending the processed engagement data to n8n using webhook APIs, where workflows stored timelines, generated daily and weekly reports, triggered alerts for attention drops and produced natural-language class summaries. While developing the system, I faced several challenges such as optimizing the model to run smoothly without lag, maintaining accurate engagement detection under different lighting conditions, designing workflows in n8n that were reliable and scalable, and creating a user interface that was simple enough for teachers to understand instantly. I also had to handle privacy concerns carefully by ensuring most processing stayed on the client side and by only sending necessary engagement data to n8n. These challenges helped me improve my problem-solving, system-design and AI-integration skills, and ultimately shaped ClassSense AI into a stable and meaningful educational tool.
Built With
- a
- and-base44-cloud-hosting
- chart.js/recharts
- classroom
- classsense-ai-is-built-with-react
- complete
- data-workflow-logic
- database-operations-and-cloud-tasks.-altogether
- end-to-end
- engagement
- focus-levels-and-attention-patterns-without-needing-a-backend-server.-all-backend-automation
- for
- forming
- integrated-through-n8n-workflows.-the-project-uses-supabase-/-firebase-/-google-sheets-for-secure-data-storage-depending-on-workflow-needs
- javascript
- mediapipe
- n8n
- notifications-and-ai-generated-summaries-are-handled-using-n8n
- openai/gemini-apis
- real-time
- reporting
- running-as-a-fast-and-lightweight-single-page-application.-real-time-engagement-detection-is-powered-directly-in-the-browser-using-tensorflow.js-and-mediapipe
- solution
- supabase/firebase
- tensorflow.js
- this-project-is-built-using-a-modern-and-fully-serverless-ai-architecture.-the-entire-frontend-is-developed-with-react.js-and-deployed-on-base44-cloud-hosting
- which-connects-to-the-frontend-through-custom-webhook-apis.-ai-summarization-and-intelligent-text-generation-inside-the-platform-are-supported-by-openai/gemini-apis
- which-process-camera-input-to-identify-facial-expressions
- while-charts-and-analytics-on-the-dashboard-are-built-using-chart.js-/-recharts.-this-architecture-allows-the-browser-to-handle-on-device-ai-inference-while-n8n-manages-automation
Log in or sign up for Devpost to join the conversation.