Study Showdown | Devpost

Get Started!

Inspiration

As we would soon be entering university, we were suffering from the burnout-inducing, near-endless grind that was our final months of highschool, feeling very unmotivated to do any work, much less study. However, we (along with many other students) recognize the importance of studying, committing yourself to something you may not want to do in the moment, but will ultimately help you grow as a learner and a person. Even with this in mind, it can be hard to build the discipline to study when you need to, which is why we introduced Study Showdown!

What it does

Study Showdown incentivizes staying on track with your studying by tracking the sites each user visits in a given period. Study Showdown does this by logging tab activity on Google Chrome, as its a Chrome Extension that connects to a NextJS website. By staying on studying and productivity-based domains like KhanAcademy, you earn points, and by going on unproductive websites, you lose points. At the end of the period, your points are calculated for that session and ranked amongst other users on a global leaderboard!

How we built it

Study Showdown has two main components, one being a full-stack website and one a Google Chrome Extension. The website was built with NextJS and TypeScript, while the Chrome extension was a React project with JavaScript and TypeScript. TailwindCSS was used to extensively design the UI of both the website and Chrome extension. for user authentication, we used Auth0 and Google Auth, and our database consisted of MongoDB Atlas and Prisma, connecting the data collected by the extension to the website.

Challenges we ran into + What we learned

Initially, setting up Sign In and Login pages using Auth0 proved difficult, as the Auth0 documentation for NextJS was sparse and confusing, eventually leading us to reformat our code. Due to the backend experiences being different for our Chrome Extension and website, it was hard to do POST and GET requests to MongoDB Atlas to forward our data to the website. However, Prisma helped simplify this process greatly and allowed us to connect the two backends. As a result, our group learned tons about full-stack development and connecting multiple technologies that we haven't used before, like authentication and databases.

Accomplishments that we're proud of

As a team, we're proud of being able to build an app on two different platforms (Chrome Extension and website) and have them work together. In addition, learning more about TailwindCSS helped us with both the extension and website, making our application a lot more engaging and visually appealing.

What's next for Study Showdown

To drive engagement and raise the stakes more, we want to implement a simultaneous multiplayer experience connecting friends through the use of our Chrome Extension to increase engagement and productivity for the users.