This project is an interactive educational tool created to teach the concepts of Object-Oriented Programming (OOP). It provides a hands-on environment where students can write Java code and immediately see the results visualized on a canvas, making abstract concepts like objects, classes, and inheritance tangible and easier to understand.
The Learning Environment
The core of the platform is its integrated lesson view, which combines theory and practice into a single, cohesive interface. The screen is divided into four quadrants: an infographic-style theory guide, a code editor for completing exercises, a list of objectives for the current lesson, and a procedural canvas where the user's code comes to life.
Platform Features & UI
The frontend, built with React, offers a clean and intuitive user experience. Users can navigate through a structured curriculum via a lesson selection screen. Within each lesson, the code editor provides a space to experiment, while the theory panel offers detailed explanations and examples.
Backend: Dynamic Code Interpretation
The platform's unique functionality is powered by a Node.js backend that dynamically executes user-submitted Java code. To achieve this safely and effectively, it uses Java's Reflection API. This allows the backend to inspect the user's code, interpret the creation and state of objects, and translate them into a series of frames and actions. This data is then sent back to the frontend to be rendered on the canvas, creating a visual representation of the code's logic.
Key Features:
- Interactive Learning: Combines theory with hands-on coding in a single view.
- Real-Time Visual Feedback: A canvas renders Java objects and their interactions as the code runs.
- Dynamic Java Interpreter: A Node.js backend uses Java Reflection to safely execute and visualize user code.
- Modern Frontend: A responsive and user-friendly interface built with React.
- Structured Curriculum: Organized lessons and stages to guide students through OOP principles.
