Shuubox

Inspiration

A play on words from the Japanese Kanji for “collection,” Shuubox is the place where all your to-consume media can finally live together. While other apps exist to track specific types of media that people want to get to (Goodreads for books, Steam for games, etc), we realized that was overwhelming and inefficient. We asked ourselves: What if you could do all this in one place? And so, Shuubox was born.

We also did a bit of user research, asking 10 people about their media backlogs and tracking habits. We found that many of them reported feeling overwhelmed and almost everybody who kept a media backlog said they barely checked it. Furthermore, a few users even reported using a manual method to track the things they wanted to watch, read, or play (usually this was the notes app or Google Docs). Interestingly, many users brought up a social aspect when asked if they would use an app like Shuubox. This also inspired us, as it would be a way for users to be motivated to actually check and complete a backlog. Similar apps to Shuubox sometimes lacked this component as well.

What it does

Users can log in with email or Discord, manage personalized lists for different media they want to consume, and interact with our Discord bot, Shuubot. Shuubot adds a social layer to media tracking, allowing users to share progress with friends across Discord.

How we built it

Design & Research: We started with wireframes and prototypes in Figma, defining our UI/UX goals around simplicity and delight. Adobe Illustrator was used for logo and brand design.

Front-End: We used Next.js and React for structure and components and styled everything with Tailwind CSS.

Back-End: Shuubox is powered by Firebase for data and authentication. The Discord Developer Portal provided us with OAuth2 integration for Shuubot connectivity.

Challenges we ran into

Feature Prioritization: As a four-person team with limited time, we had to make tough decisions about which features to fully implement versus leave as conceptual demos. Discord: Integrating Discord through OAuth2 and making sure everything worked smoothly between the bot and website took a lot of troubleshooting and testing. Front and Back End: Styling the site with Tailwind CSS was tricky at times since it was new to us. Getting the sidebar and page components to align side by side without overlapping took multiple layout adjustments and debugging sessions. Using Next.js for the first time came with a learning curve, especially when linking it to Firebase for authentication and data storage. Understanding how to connect everything properly took patience and experimentation.

Accomplishments that we're proud of

We built a full prototype that became a mostly working site, complete with bot integration. Seeing designs come to life feels awesome. Our application is a true full-stack project with many promising features. Even though it is not fully functional in every area, it fills a niche gap and solves a problem many people haven’t thought about but would find useful. On top of that, we had a great experience working together and made friends along the way :D

What we learned

Working with Discord past the API was new, making it a great learning experience. We were also able to strengthen our React knowledge and skillset.

Collaborating as a team of designers and developers gave us valuable experience in communication, coordination, and balancing different roles to achieve a common goal.

What's next for Shuubox

The vision for Shuubox goes far beyond the last thirty six hours. If given the opportunity, here are some areas we'd like to improve upon:

Mobile Compatibility — making Shuubox accessible on phones and tablets

Enhanced Social Discovery — easier ways to find friends and shared interests

Privacy Settings — customizable visibility for lists and stats, not everybody has to be public if they don’t want to be

Expanded Stats & Gamification — comparing your taste overlap with friends, working badge system

Export Options — easily share lists with friends or to other platforms

Built With

• adobe-illustrator
• discord
• figma
• firebase
• firebase-for-our-database
• next-js
• react
• tailwind-css
• typescript