Pokédoro

Who knew Pokémon could help you be productive? This extension integrates the universe of Pokémon with the tried-and-true study technique, the Pomodoro method!

Comment 1

Pokédoro = Pokémon + Pomodoro

Inspiration

As students, the rise of learn/work from home has become the new norm. Not all of us can soak up textbooks like magic... everyone learns differently, and sitting in front of a screen for hours on end has forced us away from our usual study methods.

The Pomodoro technique is a classic study technique; 25 minutes of work paired with 5 minutes of break. Can we turn it into something more than just a skeleton schedule?

What it does

At its core, Pokédoro is a Pokémon-ified Pomodoro timer (all in a nifty 'lil Chrome extension) with a pause-able sequence of 25 and 5 minute timers. Your goal is to stay on task and earn coins to buy Pokéballs. When your five-minute break comes, you'll encounter random Pokémon; almost as if you're back in Viridian forest, encountering Caterpie for the first time... or on Mt. Moon looking for those novel fossil Pokémon (Kanto region, anyone?).

Choose your Pokéball (that you bought with the currency you earned while BEING PRODUCTIVE of course) and go for the good old "gotcha!" The extension rewards currency when your active tab's URL is not among a blacklist, while also being among a whitelist of sites (both of which are scalable to include a many sites as needed down the road).

All your info is loaded into a CockroachDB database that keeps track of your collection of Pokémon. From the GUI, you can access the shop, view and release your Pokémon if you so wish (hey, maybe you got another Pidgey again).

At the end of the day, our hack is meant to make an age-old study technique more engaging, fun and purposeful! We hope you enjoy it as much as we did building it.

How we built it

Pokédoro is consisted of three main parts: A Google Chrome extension, a frontend and a backend. All three parts serve a crucial role in delivering the final experience and functionality to the user. The most important part of this integrating all three parts in a seamless manner, achieved with custom APIs.

Backend (Flask and CockroachDB)

The backend runs on an DigitalOcean server and uses Python with the Flask framework. The backend has two main functionalities: to provide REST API endpoints and to manage the CockroachDB database.

The APIs are standard POST methods which accept and then return a JSON containing the information needed. Almost all of these APIs are connected to the CockroachDB database for usages such as signing up and logging in users, keeping track of Pokemons, managing users' currency, etc.

Managing CockroachDB is also an important part of the backend. We can create our tables, and keep track of any updates happening through the APIs, and adjust accordingly. CockroachDB, paired with SQLAlchemy, enables us to use powerful SQL databases, and also not worry about managing it as the cluster is automatically handled for us. Its command line interface allows us to manually edit the database without needing to type in any code.

CockroachDB

Frontend (React)

The frontend is made using React. React allows us to create dynamic, and reusable UI components, enhancing the user experience. The frontend uses the APIs created to connect with the backend. This means that we can completely separate the frontend and the backend, minimizing the chances of things going wrong.

Chrome Extension

The chrome extension is the key part of the Pokédoro, as it is the one that the user interacts with the most. It uses the Google Chrome API. The extension is simple and minimalistic, and it does not interfere with anything that the user is currently doing. Additionally the extension respects the privacy of the user, as it only keeps track of the general domain name of the active tab open, and nothing more.

We hope that the Pokemon design makes the user have a fun time during their break after a period of studying or working.

Integration and APIs

A challenging aspect of the project is the fact that all three sections have to be connected to each other at the same time. cTo connect all three of these parts together, we decided to create custom APIs. These custom APIs connect to the backend, and the CockroachDB and relay information to the frontend and the Chrome extension. This will be a fast and error-proof way. Furthermore, scaling such project is very easy, as we can simply add more APIs and expose them through endpoints. Additionally, we are able to repurpose most of the functionality that is being utilized with CockroachDB by reusing the APIs.

Challenges we ran into

Chrome extensions certainly are no joke. For the JavaScript and web-dev first-timers in our group, it was overwhelming to learn the syntax on the fly while working around the nuanced environment. Perhaps the most challenging aspect was the establishing the communication between the background and pop-up JS scripts using Chrome messaging.

Setting up CockroachDB proved to be difficult at the beginning. SQLAlchemy is beast itself, and now we had to deal with CockroachDB too. Finally, with the help of mentors and Cockroach lab personel, we managed to setup our database and everything was a smooth sail from there.

Accomplishments that we're proud of

Our group had a lot of first-timers. Some of us have never touched web-dev, ever, while others have never been to a Hackathon. We challenged ourselves to build novelty upon a simple but meaningful idea, and did so in programming facets that were, for the most part, completely new to us.

What's next for Pokedoro

Polish the looks and user experience; Make users interact with each other; add colours, dynamic/responsive aspects, and more functionality to the Collection GUI. The possibilities with the PokéAPI are endless.

Built With

+ 1 more
Share this project:

Updates