Skip to content
<Hyun/>
All projects

CodeMate

Team project · Code analysis workspace

From a repository to an issue you understand.

Inspect a source file and its finding together, then compare an illustrative correction with the original code.

Interactive explanation · not the live service

Loading interactive explanation…

Explore the architectureSystem diagrams, design decisions and detailed flows

System overview

  1. React SPAVite, CodeMirror
    Step 1, login
    Auth0login, access tokens
  2. React SPA
    REST + JWT
    Spring Boot APIOAuth2 resource server
    Step 2, zipball
    GitHub REST APIrepository download
  3. Spring Boot API
    scan, issues
    SonarQubeself-hosted scanner
  4. React SPA
    review, chat
    Flask AI servicereview, judge, tutor
    Step 3, chat + assistant
    OpenAI APIGPT-4o + Assistants

Other connections

  • Spring Boot APItoAuth0verify token
  • Spring Boot APItoSQL database
The React SPA (1) signs in with Auth0 and calls two back ends: the Spring Boot API (2) downloads the GitHub repository and runs the SonarQube scan, and keeps users and game records; (3) the Flask service makes all OpenAI calls, including the assistant that explains the issues.
View the diagram as text

Parts

  • React SPA (Vite, CodeMirror): Client / UI
  • Auth0 (login, access tokens): External service
  • Spring Boot API (OAuth2 resource server): Owned service
  • Flask AI service (review, judge, tutor): Owned service
  • GitHub REST API (repository download): External service
  • SonarQube (self-hosted scanner): External service
  • SQL database (users, games, streaks): Data store / broker
  • OpenAI API (GPT-4o + Assistants): External service

Connections

  • Step 1: React SPA → Auth0: login
  • React SPA → Spring Boot API: REST + JWT
  • Step 2: Spring Boot API → GitHub REST API: zipball
  • Spring Boot API → SonarQube: scan, issues
  • React SPA → Flask AI service: review, chat
  • Step 3: Flask AI service → OpenAI API: chat + assistant
  • Spring Boot API → Auth0: verify token
  • Spring Boot API → SQL database

From a GitHub repo to AI-explained issues

  1. Connect a repo

    After signing in with Auth0, the user enters a repository URL, and the SPA calls the Spring API with an Auth0 bearer token.

  2. Download and unpack

    Spring fetches the repository archive from the GitHub REST API and extracts it with a path check against zip-slip.

  3. Scan with SonarQube

    Spring creates a SonarQube project, runs the scanner and pulls bug and code-smell issues, building a JSON tree of the source files in parallel.

  4. Explain the issues

    The Flask service keeps only issue types and messages, uploads them to an OpenAI vector store and has a GPT-4o assistant return the top ten issues with explanations and learning links.

  5. Review, chat and compete

    Selected snippets get a score, feedback and a revised version, a tutor chat keeps the snippet in context, and a duel mode compares the user's rewrite with the AI's while Spring records wins, losses and streaks.

The project & my contribution

Problem
Static-analysis reports are hard for learners to act on.
Solution
Analyzes a GitHub repository with SonarQube and has AI explain the top issues, plus scored code reviews, a tutor chat and a duel against AI code.
Result
Goes from a repository link to the top ten issues explained by AI, shown with the source-file tree.
Explore features

My part

  • Built the whole Spring Boot back end
  • Repository analysis: download a GitHub repository as a ZIP, create and run a SonarQube project, and return the issues with a source-file tree
  • Auth0 token-based users with a win-streak endpoint, and the game-record API for the duel mode
  • My teammate built the React front end and the Flask service with the OpenAI logic

How it's built

  • React + TypeScript front end with CodeMirror, Recharts and Auth0
  • Spring Boot fetches the repository from GitHub and runs a self-hosted SonarQube scan
  • A Flask service uses GPT-4o and the OpenAI Assistants API with file search

Highlights

  • Download, scan and issue fetching are chained reactively with WebClient
  • The SonarQube report goes into a vector store, and the assistant explains the top ten issues
  • Duel results drive win, loss and streak counters on the profile