The Fridge

Ever deal with scheduling roommate cleaning and chores? The Fridge is a fun, interactive website that helps you remember the house's responsibilities and schedule.

Comment

Inspiration

Living with roommates is equal parts community, chaos, and learning how to survive someone else’s “I’ll clean it later” system. We wanted to build something that captured the emotional reality of shared apartment life instead of another cold productivity app. Most chore trackers feel strict or corporate, but roommate life is messy, funny, and deeply human. “The Fridge” was inspired by the actual center of every apartment ecosystem: the refrigerator. It’s where sticky notes pile up, magnets collect memories, passive-aggressive reminders appear, and everyone unofficially communicates. We loved the idea of turning that shared space into a digital home for chores, updates, jokes, and survival. The goal became creating an app that feels like “us vs. the mess” instead of “me vs. my roommates.” We wanted people to smile the second they opened it. The suspicious “Allegedly Done” task status and passive-aggressive messages all came from real roommate experiences that felt universally relatable.

What it does

“The Fridge” is a cozy-chaotic roommate chore management app built with React, Vite, Tailwind CSS, and Butterbase. The app looks like a stainless steel apartment fridge covered in:

  • colorful magnetic letters
  • sticky note chores
  • roommate magnets
  • cleaning updates

Roommates are displayed as fridge magnets, while chores appear as rotating sticky notes that can move through statuses like: To Do In Progress Done Allegedly Done

The app calculates an apartment “Chaos Meter” based on unfinished chores. If the apartment becomes too chaotic, the fridge starts looking increasingly cursed.

How we built it

We built “The Fridge” using React + Vite for fast iteration and Tailwind CSS for styling and layout. We used Butterbase as the backend and database layer for storing:

  • roommates
  • tasks
  • cleaning updates

We structured the app around reusable functional components like:

  • ChoreNote
  • ChaosMeter
  • RoommateMagnets

One important design decision was to make Butterbase the source of truth. React state only mirrors backend data in the UI. Whenever a task changes, the app updates Butterbase first and then refreshes the frontend state from the database. We spent a lot of time designing the visual personality of the app. We combined:

  • Baloo 2 for playful magnetic headings
  • Patrick Hand for handwritten sticky notes
  • Nunito for clean readable text The color palette was inspired by real fridge magnets and sticky notes, while hover animations, slight note rotations, and soft shadows helped the interface feel tactile and alive.

Challenges we ran into

One of the biggest challenges was learning how to structure the app around a real backend instead of relying only on frontend React state. Since the project required Butterbase, we had to think carefully about APIs, database structure, and how data would move between the frontend and backend in real time.

A large part of the challenge was designing the database itself. We needed multiple connected tables for roommates, tasks, updates, chat messages, and translator history, and we had to make sure the relationships between them stayed organized and scalable. Even small features like changing a task status became more complicated because they triggered multiple backend actions, like updating the task, recalculating apartment chaos, and creating a new cleaning update entry.

Working with APIs was another major learning experience. We had to figure out how to properly fetch, insert, and update data through Butterbase while keeping the UI responsive and synchronized. A lot of debugging came from situations where frontend state updated visually but the backend database did not persist correctly, or vice versa.

Deployment also introduced challenges around environment variables, API configuration, and making sure backend requests worked correctly outside of local development. There were moments where the app looked complete visually, but data flow issues in production revealed problems with API calls and database syncing.

Because this was built during a hackathon, we also had to balance speed with clean backend architecture. We wanted the app to feel polished and playful on the surface while still having a solid database foundation underneath. That balance between creativity and technical implementation ended up being one of the hardest and most rewarding parts of the project.

Accomplishments that we're proud of

We’re really proud that “The Fridge” immediately communicates its personality the moment you open it. The fridge aesthetic, colorful magnets, and sticky notes all work together to create something that feels unique and emotionally recognizable.

We’re also proud that the app is not just visually fun, but actually functional. Tasks can be created, updated, persisted in Butterbase, and reflected in the chaos meter in real time.

Most importantly, we’re proud that the app feels human. It embraces the imperfections of shared living instead of trying to optimize people into perfect chore machines.

What we learned

We learned that strong visual identity can completely transform a simple CRUD app into an experience people emotionally connect with. The same backend functionality feels dramatically different when wrapped in personality, humor, and intentional design.

We also learned a lot about designing frontend architecture around a backend-first workflow. Keeping Butterbase as the source of truth helped us think more carefully about synchronization and data flow.

On the design side, we learned how much tiny details matter. Small rotations, hover effects, handwritten fonts, and playful microcopy added more personality than large complicated features ever could.

Most importantly, we learned that hackathon projects are strongest when they focus on one memorable idea and execute it well. “The Fridge” works because it fully commits to its theme.

What's next for The Fridge

We’d love to expand “The Fridge” into a more social and dynamic roommate experience.

Some ideas we’d love to build next include:

  • real-time multiplayer syncing
  • custom roommate avatars
  • recurring chores
  • streaks and rewards
  • voice notes on sticky notes
  • collaborative grocery lists
  • Chaos events triggered by overdue tasks
  • roommate chat and sections

We also want to deepen the emotional side of the app by making it feel even more alive and personalized to each apartment’s personality. Ultimately, we want “The Fridge” to feel less like a productivity tool and more like a shared digital space that roommates genuinely enjoy opening together.

Built With

Share this project:

Updates