As software engineers preparing for technical interviews, we often find ourselves switching between platforms like LeetCode and GitHub. While not everyone wants their LeetCode submissions publicly reflected, some of prefer documenting our code for future reference, portfolio building, or simply tracking progress over time.
However, the manual process of copying code, adding metadata, formatting lines, and uploading it to GitHub can be tedious and time-consuming. To address this inefficiency, we created SyncLeet, a Chrome extension that automates the synchronization of LeetCode submissions to GitHub. Here’s what we learned along the way.
Challenges with Existing Tools
Many current solutions for synchronizing LeetCode submissions rely heavily on interacting with the website’s UI. For example, actions like clicking the “Submit” button often serve as triggers for capturing data. While this approach works in the short term, it is inherently fragile. In fact, LeetCode previously upgraded its coding layout, which broke many UI-based automation tools. Future UI changes could again disrupt these workflows, forcing developers to re-identify HTML elements and rewrite their scripts.
Alternatively, some other solutions use GitHub Actions for syncing, but this requires users to manually copy and paste session cookies from LeetCode into the their workflows. Unfortunately, session cookies expire over time, creating a hassle of repeatedly renewing and updating them, which is cumbersome and prone to errors. This extra step adds more friction to the process and complicates what should be a seamless experience.
A Better Approach: Network Traffic & OAuth Integration
To address these issues, we took a different route. Rather than depending on UI elements or session cookies, we focused on capturing network traffic directly from the browser. By monitoring the network activity during problem submissions, we discovered these key insights:
-
GraphQL Endpoints: LeetCode’s backend uses GraphQL APIs to manage submissions, and we identified the specific endpoints responsible for handling submission results. This gave us a reliable way to capture data.
-
Rich Data Payloads: These endpoints return detailed metadata, including problem identifiers, runtime, memory usage, and success status. This information not only enables automation of the syncing process with GitHub but also unlocks powerful organizational features, such as grouping problems into different algorithmic topics or difficulty levels.
To further streamline the process, we integrated OAuth with GitHub. This allows users to securely link their GitHub accounts without the need to provide sensitive credentials. Using OAuth tokens, SyncLeet can push submissions to both private and public repositories—making the whole experience smoother, safer, and more efficient.
Looking Ahead
This project was made possible through the collaboration of our team, including Sen Feng, whose exceptional management and innovative designs were crucial in developing the extension. We’re also thankful for the support and feedback from our developer community, which played an instrumental role in shaping SyncLeet into what it is today.
Explore More: Check out the implementation on GitHub: SyncLeet Extension and install the extension from Chrome Web Store: SyncLeet. Happy coding!
