TuneWatch: A Private Space for the Entertainment We Love Together

Thierno Abdoulaye Diallo — Sun, 12 Jul 2026 13:37:52 +0000

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

Open TuneWatch

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

demo@tunewatch.app

Password

TuneWatch2026!

Video demonstration

Watch the TuneWatch demo

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:

View the TuneWatch repository

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?

DEV Community: Thierno Abdoulaye Diallo