Leetr

Our Dashboard
Our Home Page
Our Dashboard

Inspiration

As third year students looking for internships, my group was looking for a way to make our job hunts a little easier and more organized. Any computer science student knows that a large part of many interview processes at tech companies is Leetcode data structure and algorithm problems. Aside from some Leetcode problems being extremly hard, it felt like even after understanding one, we would forget how to do it a week or two later. Thats when we learned about spaced repetition, a theory that says if you review a concept after a certain increment of time, you are more likely to remember it. We decided we needed something to help keep remind us to review the right Leetcode problems that we had already done, at the right times. Thats when we came up with Leetr.

What it does

Leetr has a few components. A chrome extension that links to your browser, a complete website dashboard, and SMS push notifications. When a leetcode problem is opened on a user's browser, the chrome extension helps the user record the current date, the Time Complexity, and any notes they may have regarding the problem. It also records things like the title, the amount of times attempted/successful, the difficulty level of the problem, and more. This information is stored in a database and accessed by the dashboard website. It has a table that shows users all the problems they have attempted alongside the information mentioned above, as well as graphs and charts that show their progress. They can review their attempts, notes, stats, and more. It also shows them the date that they attempted it, as well as the date they should review it again, in order to reenforce their learning. This is where the SMS feature comes in. Useres can opt in to have an SMS sent to their phone with the problem that they should try and review that day according to spaced repetition. This helps users stay on top of the Leetcode game, no matter how busy they may be.

How we built it

The Chrome Extension was build using HTML CSS JS. For our Database we used MongoDB Atlas, Node, and Express JS to connect to endpoints to connect to our frontend. The Frontend of the website dashboard was made using Reactjs, specifically with Charkra-UI for our components. The graphs were made using Plotly.js, an opensource graph maker for JavaScript.

Challenges we ran into

For the backend, we ran into problems with CORS because we did not have the right permissions, as Google was blocking us a lot. We had to come up with a way for the API to determine if a problem already existed, and if it should add that problem, or edit an existing problem (put request vs post request). Lastly, our frontend had to be overhauled because there were aspects of our code (ex. Plotly graphs) that would not talk to our backend no matter what we tried.

Accomplishments that we're proud of

This is our very first full stack MERN application that we built ourselves, from the ground up! This was also our first experience developing a chrome extension, which was a really cool learning experience. Lastly, we feel that our team chemistry was really good and it allowed us to work efficiently and trust eachother a lot.

What we learned

We learned many things including but not limited to, the MERN stack, how to use MongoDB Atlas, how to use plotly.js, how to use infobip, and generally we practiced our processes in connecting our database to show up in react tables and plotly graphs.

What's next for Leetr

Next, we hope to implement a mobile app for mobile push notifications, and the ability to review code on your phone on the go. Additionally, we are considering what a social feature might look like on this Leetr, maybe where friends can see eachother's progress, or can opt in to recieve the same alerts to practice the same questions.