Study Buddy

bear states

Inspiration

We were inspired by nostaligia for Tamagotchi e-pets, but Natalie asked a great question: What if we could feed our cute digital pet by doing homework?

What it does

We scrape data from the canvas webUI, analyze the results and feed the bear accordingly.

How we built it

We used React, Vite, and Typescript/JavaScript that interacts with the chrome browser extension API.

Challenges we ran into

We had issues with using Vite as a bundler before it was uploaded to the browser as a browser extension package, which added some complications when building. We also had trouble using certain methods in the chrome API like sending messages between scripts. Also, the canvas API's restrictions prevented us from fetching relevant data the proper way.

Accomplishments that we're proud of

We are proud of the design of the buddy avatar itself. We were able to use a .svg file that uses fill colors to allow live, user defined, color scheming. We were able to work well in a team, especially when breaking down problems and trying to tackle them as efficiently as possible. We were able set up a system that can easily integrate the canvas data to then dynamically update the avatar. And finally, we created a functional browser extension that stays in the corner of the screen.

What we learned

We learned in depth about interacting with various APIs, especially common pitfalls and limitations of the canvas API. We learned how to work as a team in accomplishing a large task and persevere despite setbacks. We improved our skills at researching and overcoming problems.

What's next for Study Buddy

Integration with the official API, integration with schedules, cosmetic, chat bot integration for starting ideas, streak element, statistics for studying, more animations, and able to portion out study time to incentives more learning and growth.