Inspiration

The idea for this project came from observing how fragmented coding education platforms are. Most tools either focus only on problem-solving (such as competitive programming sites) or only on classroom management (such as LMS platforms), but rarely both. Teachers struggle to manage assignments and evaluate submissions efficiently, while students lack an integrated environment that combines learning, practice, and feedback.

This project was inspired by the need for a single, role-aware coding platform that works equally well for students, teachers, and problem authors, while remaining simple enough to run and extend independently without relying on heavy third-party services.


What We Learned

Building this platform helped us gain a strong understanding of:

  • Role-based application design and access control
  • Designing scalable API surfaces using the Next.js App Router
  • Modeling complex relational data in MongoDB (users, classrooms, assignments, submissions)
  • Secure authentication using JWT and HttpOnly cookies
  • Handling multi-language code execution using both local and remote execution strategies
  • Structuring a large full-stack project for long-term maintainability
  • Integrating AI-assisted workflows into traditional CRUD systems

We also gained practical experience balancing frontend UX decisions with backend constraints, particularly in the context of educational workflows.


How We Built the Project

The platform is built using Next.js (App Router) with React for the UI and MongoDB for persistence.

Architecture Overview

Frontend

  • Role-segregated dashboards (student, teacher, author)
  • Monaco Editor for in-browser coding
  • Tailwind CSS with Radix UI for clean, accessible UI components
  • GSAP for subtle UX animations

Backend

  • Next.js Route Handlers under app/api/**
  • JWT-based authentication stored in HttpOnly cookies
  • MongoDB with Mongoose models for users, problems, classrooms, assignments, and submissions

Code Execution

  • JavaScript sample tests run locally in the browser
  • Other languages (C++, Python) are executed through a remote execution service using job-based APIs
  • Execution results are polled and displayed in a terminal-style output panel

AI-Assisted Authoring

  • Authors can generate structured coding problems using a local Ollama-compatible LLM
  • The AI produces validated JSON that conforms to the internal problem schema

Challenges Faced

  • Role Separation Without Duplication Designing clean role-based flows without duplicating logic across student, teacher, and author dashboards required careful route and component structuring.

  • Secure Authentication in App Router Implementing JWT authentication with cookies in the App Router model required precise handling of middleware, route handlers, and edge cases.

  • Code Execution Reliability Managing asynchronous remote execution, failures, and partial outputs while keeping the UI responsive was technically challenging.

  • Schema Validation for Problems Coding problems require strict structure. Ensuring both AI-generated and manually-created problems followed the same schema required robust validation logic.

  • Mixed TypeScript and JavaScript Codebase Maintaining consistency and correctness while gradually introducing TypeScript into an existing JavaScript codebase required careful coordination.


Outcome

The result is a fully functional, extensible coding platform that supports real classroom workflows, structured problem authoring, and practical code execution. The project is designed to scale in features while remaining understandable and modifiable, making it suitable both as a production-ready foundation and as a strong full-stack portfolio project developed collaboratively.

Built With

Share this project:

Updates