Syntactics

Want to get started with LeetCode but is too hard? Syntactics, an AI-powered app can derive the problem and make it better to understand the approach to help practice in ANY language of your choosing!

Comment

Inspiration

As someone who's always afraid of technical interviews, I wanted to create an app where you can easily approach these interview questions using AI. LeetCode is a popular platform for people aiming to become engineers, however, some questions are particularly difficult to understand, this is where Syntactics comes in. It helps guide your approach to the correct direction where you can easily chat with the AI about what you understand about the problem and would go through the UMPIRE framework as you talk to it more.

What it does

  • First the user enters a leetcode question number, or a problem, and the AI would detect that problem and provides the output to the user, no leetcode API needed
  • The user is given two options to select a response style: Guided, Full Framework
    • In Full Framework response style, the user is given a full overview on how the AI approaches the problem, though UMPIRE, and provides detailed explanation to each of the steps used in the framework
    • This response style also provides code snippets, where they show you the code in which it leads to the correct answer, visualization to trace the algorithm, and the relevant topics required to understand this problem.
    • In Guided response style, the user can talk to the AI as if the AI is their tutor helping them solve leetcode problems through the UMPIRE framework
    • When the AI tutor is aware that you are ready to move to the next step of the UMPIRE framework, it would let you know and you can continue learning through the AI tutor to understand the LeetCode problem

How we built it

  • IDE: Jetbrains Webstorm, Claude Code CLI
  • Frontend:
    • Next.js 16.4.2 (App Router), frontend, API Routes
    • React.js 19.3.0
    • Typescript 5 (Strict Mode)
  • AI
    • Gemini API via google/genai SDK, 2.5 Flash
  • Database & ORM
    • PostgreSQL hosted on Neon (Lakebase Postgres)
    • Prisma ORM 7.10.1

Challenges we ran into

  • Limitations on Gemini API:
    • This project was built with the Gemini API, which only supports up to 20 requests per day
    • Gemini would often take very long to respond to the user in both Guided Style and Full Framework response style
    • Gemini may often incorrectly output code in the code snippet making the code itself unreadable and would occur often when choosing a lanuage other than python

Accomplishments that we're proud of

  • I was able to learn TypeScript for the first time ever, and it was an amazing experience to learn with Claude Code as it was interviewing me on how the app would function
  • I utilized a database that was easy to maintain

What's next for Syntactics

  • New modes:
    • Guided Mode: Where you can ask AI about any concept and you would learn through its framework and the visualization provided
    • Syntax Mode: Paste an ordinary coding question, problem, or code, and the AI would provide a detailed explanation of how your code works, how it can be improved, and provide visualization to trace how your code works.

Built With

Share this project:

Updates

Submission history