Skip to content

Latest commit

 

History

History
35 lines (28 loc) · 1.75 KB

File metadata and controls

35 lines (28 loc) · 1.75 KB

Python code comparator

A code comparing platform for beginner coders. The aim is to lets beginner coders understand the their practice codes better and have a positive learning experience.

Technologies Used

Frontend:

  • HTML, CSS, JavaScript
  • CodeMirror: Used for rendering and highlighting syntax in both the student and correct code areas.
  • Side-by-side code input and real-time line-by-line comparison.
  • Session based history management.

Key Features

  • Real-time code comparison between a student’s solution and a reference solution.
  • Syntax highlighting with CodeMirror.
  • Persistent history: Users can view and revisit previous code comparisons.
  • Delete selected and delete all options for easy history clearing.
  • Support additional languages like, C, C++, HTML, CSS, JavaScript etc.
  • Toggle mode option to switch from light mode to dark mode according to user's convinience.
  • Backend development in progress to support data storage and advanced features.

Planned Enhancements

  • Improved history management: Better interface for navigating saved comparisons.
  • Scoring system: Calculates accuracy score based on line-by-line matches.
  • AI-based suggestions: Provides beginner-friendly explanations and improvement tips to help students learn from their mistakes.
  • Backend:

  • Node.js & Express.js: Server setup and API routes.
  • MongoDB + Mongoose: Used for storing and retrieving comparison history.
  • Fetch API: For communication between frontend and backend.

Learning Outcomes

  • Improved understanding of how to build full-stack web applications.
  • Hands-on experience with HTML, CSS and JavaScript and code mirror.
  • Strengthened my frontend-database integration and debugging workflow.