This is a submission for the *Weekend Challenge: Passion Edition*.
What I Built
I built TuneWatch, a private collaborative media tracker for small groups.
TuneWatch gives friends, couples, families, and small communities a shared place to keep track of the entertainment they care about:
- movies
- anime
- books
- music
Users can create an account, choose a profile avatar, use a personal tracker, create private groups, invite other people with a code, add recommendations, rate entries, search their shared library, and view statistics based on real activity.
The idea is simple: the things we love are rarely enjoyed alone.
When I discover a great movie, finish an anime, read a memorable book, or hear a song I cannot stop replaying, I usually want to share it with someone. TuneWatch turns those scattered recommendations into one private and organized space.
Main features
- Self-service account creation
- Username and avatar setup
- Personal tracking space
- Private groups of up to five members
- Invite codes
- Real-time shared entries
- Movies, anime, books, and music
- Ratings, statuses, notes, and tags
- Search
- Group statistics
- Mobile-first interface
- Installable web application
The interface was designed around mobile use and inspired by the clarity, spacing, rounded surfaces, and comfortable touch targets found in Samsung One UI.
Demo
Live application
A new visitor can create an account directly in the application, choose an avatar and username, and start using a personal tracker without requiring an administrator.
If you'd like to explore TuneWatch without creating a new account, you can use the demo account below.
Email
Password
TuneWatch2026!
Video demonstration
The demonstration covers:
- Creating an account
- Configuring a profile
- Adding an entry
- Searching the tracker
- Creating and joining groups
- Viewing statistics
- Editing the profile
Code
The source code is available on GitHub:
How I Built It
TuneWatch uses:
- React
- JavaScript
- Firebase Authentication
- Cloud Firestore
- Firebase Hosting
- Lucide icons
Firebase Authentication handles account creation and login.
Cloud Firestore stores user profiles, groups, memberships, invite codes, and media entries. Each group owns its own entries subcollection, and Firestore listeners keep the tracker synchronized in real time.
The application is organized into separate layers:
Pages
↓
Components
↓
Hooks
↓
Services
↓
Firebase
The hooks manage authentication, groups, and entries. Firebase operations remain inside dedicated service files, while the pages focus on the user interface.
Personal and shared tracking
Every new user receives a personal space so that TuneWatch remains useful even when used alone.
A user can later create or join additional groups. Selecting, creating, or joining a group immediately activates it and returns the user to the Tracker.
Real data instead of mock content
The Tracker, Search, Groups, Statistics, and Profile screens all use real Firebase data.
Statistics such as completed entries, planned entries, average rating, and favorite category are derived dynamically from the active group.
Mobile-first design
I wanted TuneWatch to feel like a mobile product rather than a desktop dashboard squeezed onto a phone.
That led to:
- a persistent bottom navigation bar
- large touch targets
- rounded cards
- bottom sheets for important actions
- short and natural interface text
- graceful empty states
- a consistent visual hierarchy
The Hardest Parts
Secure group membership
Joining and leaving groups required more than updating an array.
Group membership is limited to five people, so joins use Firestore transactions to avoid race conditions. Security rules also ensure that users cannot arbitrarily modify another group's members or entries.
Keeping the active group consistent
TuneWatch supports both personal and shared spaces.
The application saves the active group in the user's Firestore profile and restores it after login. This keeps the experience continuous across sessions and devices.
Turning a web app into a mobile experience
The application was tested directly on a phone throughout development.
This exposed issues that were easy to miss on desktop, including touch target sizes, content hidden behind the navigation bar, inconsistent dialogs, caching, and the installed application's name and icon.
Connection to the Theme
The challenge theme is Passion.
For me, passion is not only the thing we love. It is also the need to talk about it, recommend it, remember it, and experience it with other people.
TuneWatch was built around that shared side of passion.
It is not a large public social network. It is a smaller and more personal space for the people whose recommendations actually matter to you.
Challenge Work
TuneWatch began as an earlier experimental tracker.
During the challenge period, I substantially rebuilt and completed the product experience, including:
- the mobile navigation and five-screen structure
- account creation and profile onboarding
- selectable avatars
- personal tracking spaces
- group flows
- dynamic statistics
- Firebase Hosting deployment
- the mobile-first visual system
- installable application branding
- the final demo and documentation
I am including this note to be transparent about the project's development history.
What I Learned
This project reinforced that a product is not finished when the main features technically work.
Small details had a major effect on the final experience:
- where the user lands after joining a group
- whether an empty Tracker feels welcoming
- whether a dialog belongs to the same visual system
- whether a username appears instead of a raw email
- whether an installed application still says “React App”
Building TuneWatch required thinking about the full journey rather than isolated components.
What's Next
After the challenge, I would like to explore:
- richer media metadata and cover artwork
- more media categories
- notifications
- offline support
- native Android and iOS versions
- better group activity insights
Thank you for reading.
What would you track with your own TuneWatch group?