StudyBuddy

Welcome to Study Buddy: the Chrome extension to get you motivated and keep you focused! With a calming aesthetic, to-do list, Pomodoro timer, and a buddy, nothing can distract you now!

Comment

Discord Handles

Victoria Kenton - vi0lettes_ Maia Gonzalez - bearbnb Darrien Lee - motormaniac.

Inspiration

As students ourselves, we understand how easy it can be to get distracted from your studies. Therefore, we decided to create a Chrome extension that would help users track their progress, stay focused, and stay motivated along the way.

What it does

The to-do list lets you add items, check them off, and remove them. The timer is inspired by the Pomodoro method, which prompts users to study for 25 minutes, take a five-minute break, and come back to study again. This approach helps users take care of themselves while studying, prevents burnout, and provides study motivation. The buddy, currently a dog, will be present to provide emotional support for them throughout their studies. Additionally, when the cursor hovers over it, it moves as if being petted. We also intentionally chose our color scheme based on what we thought would keep users most motivated, focused, and calm.

How we built it

Since Victoria and Maia are both graphic designers, Maia and Victoria worked on frontend while Darrien worked on backend. Victoria drew character concept sketches, Maia designed the layout in Figma, and Darrien set up the code environment. Our environment uses vite and crxjs which automatically hotloads react frontend into the chrome extension. This setup runs a react page directly into the extension sidebar, letting us develop just like a regular web frontend. For all of us, it was our first time learning React, which made the development process long and difficult. Unfortunately, we realized the scope of our project was too large for our limited skillsets and time constraints, forcing us to reduce the amount of features we had planned.

Challenges we ran into

At first we had difficulties with running crxjs, vite and React together. Additionally, we were struggling to implement the side panel extension appearing on-click, but we resolved the issue after realizing a few lines of code were missing in our manifest.json. The biggest issue we ran into was realizing during the early development process that our scope was too big, and we did not have the time or skillset to implement everything we wanted in time. We came to this realization after mapping out each feature and what the code behind it might look like, and from there we decided to cut some features and keep our focus on what we thought was the most important.

Accomplishments that we're proud of

Despite the numerous challenges we faced, we are proud that we produced a usable, aesthetic, chrome extension. Even though the project scope was smaller than expected, our art style adds a personal, welcoming touch that improves your mood on a difficult day. The experience we gained in React and web development will be transferrable to many future projects.

What we learned

We learned how to use React features, such as defining components and using states, and we learned how to set up an environment for Chrome extensions, such as defining manifest.json. We also realized how to keep realistic expectations for the scope of the project and focus on a Minimum Viable Product. We gained more experience with setting up and organizing the structure of a web project. Additionally, during our planning phase we learned more about Figma and how to format our initial ideas of what we wanted the layout of the features to be and what it would look like in the Chrome browser.

What's next for StudyBuddy

In the future, we are planning to add a feature to create study sessions with friends. Their buddies would also show up on your island, and vice versa, and they could send each other encouraging messages. This could be through a join code system. We would also like to implement other widgets, such as Spotify for study music. It would also be interesting to find ways to connect Canvas to the extension so people can more easily upload specific assignments they need to complete to the to-do list. Lastly, we plan to give the user the option to choose their own buddy, including a dog, a cat, a bunny, a capybara, or an axolotl.

Built With

Share this project:

Updates