Brain Breaks Browser is a web app that lets you create, store, track, and organize “brain break” activities. These are fun tasks and exercises that you can use to split up work time into more manageable chunks, and exercise your brain while enjoying a break.
Where to Get It
🔗 brainbreaksbrowser.netlify.app
Demo
Features
- Create multiple boards, share activities between boards
- Create custom activities with an easy-to-use form
- Use activity types for extra automatic features
- Videos: Task automatically marked as complete and popup closed when video reaches the end of its duration
- Website / URL: Embed an entire webpage, securely, into your activity
- Timed: Multiple activity types, even the completely customized one, supports an integrated timer component
- Track activity completion, reset progress, or disable repeat limits entirely
- Randomize activities, or even mask activity icons
Why?
These types of activities used to be common to do in person, and were often the type of thing to be written on flashcards or popsicle sticks and picked out of a cup. With the combination of COVID, advancement of technology, and renewed focus on remote learning and professional work, these offline systems simply are not feasible for many users.
I thought it would be a fun project to create a simple web portal to organize these activities, and provide extra features like built-in timers and progress tracking, so that not only will users not miss their stacks of activity flashcards, but they might even prefer the new system.
Although the focus is on remote learning, there are many use-cases:
- Classrooms, tutors, remote education settings
- Business Meetings / Standups
- Web conferences
- Yourself! Control your break time with preset activities and auto-closing tasks
What I Used
- TypeScript
- Preact
- Preact / React Hooks
- React Player
- Chakra UI
- Dexie.js (IndexedDB wrapper)
- Javascript, HTML, CSS
- And more!
I also published a writeup around a specific issue I ran into with this app – “How to Deploy Preact from a Subdirectory”.
