BrewBoard

BrewBoard transforms your to-do list into a wizarding quest — craft potions, collect hand-drawn Harry Potter ingredients, and brew your goals to completion. ✨

Comment

BrewBoard: Project Story

Inspiration

As college students, we know how fast tasks can pile up. Deadlines stack, assignments multiply, and suddenly your to-do list starts feeling less like a helpful tool and more like a stress trigger. Most task managers (checkboxes, grey progress bars, endless lists) work fine, but they’re kind of lifeless and they don’t make you want to come back. Our team of four had the same thought: task management doesn’t have to feel like work. We wanted something that made progress feel rewarding, with a little personality and a sense of “game” to it. Since this year’s hackathon was Harry-Potter themed, the potion metaphor clicked right away. Goals become potions, steps become ingredients, and finishing something feels like you actually made something. BrewBoard came from the idea that a theme can change your whole mindset. If opening your task manager feels more like stepping into Hogwarts than opening a spreadsheet, you’re more likely to use it.

What it does

BrewBoard is a Harry Potter-themed task tracker that turns productivity into potion-making.
Homepage: The Brew Dashboard The homepage shows an animated cauldron and a live Brew Dashboard with totals: potions created, completed, in progress, and points earned. It’s basically the overview page so you can see where you’re at before jumping in.
The Shelf: Your Potion Collection The Shelf is where you manage your potions. There’s a filter toggle for In Progress vs Completed, depending on whether you want to focus or just see what you’ve finished. Users can create a new potion by choosing from canonical Harry Potter potions they’ve unlocked — each one hand-drawn and referenced from the films (Amortentia, Polyjuice Potion, etc.). After selecting a potion, users add custom subtasks as the ingredients needed to brew it (their real assignments and goals). Once created, it shows up under In Progress.
Potion Detail: Brewing in Action Clicking a potion opens the Potion Detail page, where users see the potion illustration, the ingredient checklist, and a golden progress bar that updates as tasks get checked off. When the last ingredient is completed, a “Brewing Complete” celebration modal appears, points are added automatically, and the potion moves to Completed on the Shelf.
The Gallery: Wizarding World Art The Gallery highlights the potion and ingredient artwork our team made. Each item is a flip card: the front shows the illustration, and the back shows a Harry Potter universe description and the ingredients it requires. It’s half art gallery, half mini encyclopedia.
The Shop: Spend Your Points The Shop is where points actually matter. Users can view potions and ingredients they haven’t unlocked yet and purchase them with earned points, which creates a loop: finish tasks → earn points → unlock content → set more goals.

How we built it

We built BrewBoard as a full-stack web app during a 24-hour hackathon. Frontend: Angular (TypeScript) with component-scoped SCSS. We used reactive data binding for the progress bar and conditional states (loading / empty / complete). We built the UI from scratch (no component libraries) so we could match the wizarding aesthetic.
Backend: Java Spring Boot with a REST API for potions, ingredients, completion toggles, and point calculations. We kept the backend modular so future features (auth, persistent accounts, expanded shop economy) wouldn’t require big refactors.
Design: All potion and ingredient art was hand-drawn by our team using Procreate, digitized, and integrated into the app. We referenced the films to keep the visuals accurate.
Version Control & Tooling: Git + VS Code.

Challenges We Ran Into

Time was the main challenge. 24 hours disappears fast when you’re building a full product and coordinating a team, so we had to cut or scale back a few features we started.

  • We wanted the potion bottle to visually fill up (animated liquid) instead of using a progress bar, but the CSS/canvas work was too time-consuming to finish within the hackathon.
  • We designed an urgent ingredients panel (tasks closest to deadline) and partially built it, but didn’t have enough time to fully integrate and polish it.
  • We sketched out a bigger Shop experience with more potion types, decorative backgrounds, and Hogwarts-themed UI skins, but kept the Shop scope smaller due to time constraints.
  • We discussed user accounts for persistent progress, but chose to focus on completing the main flow (create potion → complete ingredients → earn points) during the hackathon.

We also ran into the usual team build challenges:

  • Merge conflicts
  • Last-minute integration
  • Keeping everyone aligned as the idea evolved

Styling also took longer than expected. Getting the wizarding vibe to feel right (fonts, glow effects, gold palette, candlelit textures) required a lot of iteration to make it feel intentional.

Accomplishments That We’re Proud Of

First and foremost, the art and visual style. Within a 24-hour hackathon timeline, we created and integrated a large set of potion and ingredient illustrations, then built a Gallery page specifically to showcase that work. We referenced the Harry Potter films to keep the visuals consistent with the wizarding world and to make the experience feel intentional.

Beyond the art, we are proud of how cohesive the overall experience feels. The Hogwarts House banner navigation, candlelit dark palette, Cinzel typeface, gold glow effects, and Gallery flip cards all work together so the app feels like a real product instead of a rushed demo.

We are also proud that BrewBoard is fully usable from start to finish. Users can create a potion, add ingredients as subtasks, track progress as they check items off, earn points when they complete it, and spend those points in the Shop to unlock more content. Even with tight time constraints, we shipped a complete and functional core experience.

What we learned

We learned how much stronger ideas become when you build them together. The final app looks very different from our first sketches because we kept improving it as we went, like turning the navigation bar into Hogwarts House banners and adding flip cards to the Gallery.

We also learned, the hard way, that styling takes time. It’s not just about writing CSS, but about iterating until everything feels intentional instead of overdone. It was frustrating at times, but it’s also what gives BrewBoard its personality.

Overall, the hackathon reminded us that constraints force you to focus. We didn’t build everything we imagined, but what we shipped is polished, functional, and genuinely fun to use.

Styling is a pain. But when it finally clicks, it really does feel like magic.

What's next for BrewBoard

  • Animated brewing visuals: Replace the progress bar with a potion bottle/cauldron that visually fills as ingredients are completed.
  • Urgent ingredients panel: Highlight tasks closest to their deadlines so users know what to prioritize.
  • Expanded Shop content: Add more potions, ingredients, backgrounds, and Hogwarts-themed skins to unlock with points.
  • User accounts & persistence: Save potions, points, and progress across sessions with authentication and a real database.
  • Potion Class (collaboration mode): Let groups share a potion and assign ingredients to different members for team projects or study groups.

Built With

Share this project:

Updates