Focish

Inspiration

The inspiration of this project came from improving productivity and focusing while working or studying online. In a world where distractions are just a tab away, we wanted to create a tool that could help keep users focused on a single task or website.

What it does

Focish is a Chrome extension that helps users stay focused on a specific task or website with a clock where you can select the time.

How we built it

We built Focish as a Chrome extension using HTML, CSS, and JavaScript. The extension is composed of several scripts: a popup script for the user interface, a background script, and a messaging system for communication between these components.

Challenges we ran into

The most challenging part is the message passing and data persistence where we spend a long time checking to ensure that data was persistent across sessions. Also, we spent a significant amount of time perfecting the fish animation to ensure it looked smooth, tidy, and visually appealing within the popup.

Accomplishments that we're proud of

We’re proud of creating an engaging, functional extension that can effectively help users stay focused.

What we learned

We also gained experience in building Chrome extension development, especially in working with the Chrome API for tab management and inter-script communication and creating smooth CSS animations and handling real-time DOM updates.

What's next for Focish

We’re enhancing Focish with even more interactive and motivating features! Soon, users will be able to set a specific study duration and input up to 10 URLs for their study sites. Focish will then monitor the user’s Chrome activity to ensure they stay focused on the selected pages. If a user navigates away from their chosen study pages, the water in Focish’s tank will start to decrease. If time spent on other pages reaches a certain threshold relative to the total study period, the fish, unfortunately, won’t make it. However, if the user stays focused and completes the entire study period, their fish stays alive and well! This feature will make Focish an even more engaging accountability partner, helping users stay on track while adding a playful layer to their study routine.

Built With

• and-javascript.-the-countdown-timer-is-implemented-by-leveraging-the-device's-system-time-for-accuracy-and-reliability.-additionally
• api
• css
• html
• javascript
• the-visual-design-of-the-fish-was-uniquely-crafted-by-one-of-our-talented-team-members