DEV Community

Cover image for YuMe - Miles apart, moments together
Katie Roberts
Katie Roberts

Posted on

YuMe - Miles apart, moments together

DEV's Worldwide Show and Tell Challenge Submission πŸŽ₯

πŸ”— Demo

This is a functioning website (with a few little kinks here and there), so I have created a couple of accounts for you to try things out for yourself. You can sign as two different accounts to see the full story as a "couple"

Sign in:

Username: pro.dev.test.00@gmail.com
Password: FRY3bxmz6HtbMhz-MDha

Username: pro.dev.test.01@proton.me
Password: ter2qjg@EQE0bpg.xdv


Problem & Opportunity

Long-distance couples communicate constantly, but across scattered apps. Photos live on social media, memories sit in camera rolls, messages are buried in chats, and plans end up in notes or spreadsheets. Over time, it becomes easy for intimacy to get lost in the noise.

YuMe exists to give two people one private space designed for connection. It is a modern digital memory box that keeps small moments meaningful and helps partners feel close, even when they are far apart.

The Story Behind It

My partner and I have been long-distance for almost a year, and upcoming military service will make that distance harder. We wanted a space that felt private, meaningful, and truly ours.

YuMe began as a Christmas gift built from that need. It has since strengthened our connection, helped us stay aligned on our future, and turned everyday gestures into shared joy. Playlists, notes, dreams, watchlists, and reunion countdowns all live in one place.


Solution: Five Core Experiences

1️⃣ Every place tells your story πŸ—ΊοΈ

  • Save locations you have visited together
  • Attach photos and memories to each place
  • Watch your shared journey unfold on an interactive map
  • See where you both are in real time

Technical highlights

  • Mapbox API for interactive maps, markers, and geocoding
  • Autocomplete location search
  • Real-time location display with time zones
  • Supabase Storage for photos and media
  • Custom map markers with interactive detail views

2️⃣ More than words. Share the feeling πŸ’¬

  • Send text, voice, video, and photos
  • React with emojis
  • Pin important messages
  • Keep special moments easy to find

Technical highlights

  • MediaRecorder API for voice and video recording
  • Camera API with front and back camera support
  • Supabase Storage for media uploads
  • Real-time emoji reactions stored in the database
  • Message states including active, pinned, and archived
  • Canvas API for photo capture from video streams

3️⃣ Experience everything together πŸŽ΅πŸ“Ί

  • Create shared playlists
  • Track films and series you are watching
  • Rate and recommend content to each other
  • Build a shared soundtrack and watchlist

Technical highlights

  • Spotify Web API integration with OAuth authentication
  • Persistent mini music player using React Context
  • TMDB API for up-to-date film and TV data
  • Dual rating system combining TMDB ratings and personal ratings
  • Support for Spotify links, YouTube URLs, and manual entries
  • Secure OAuth flows handled via Netlify Functions

4️⃣ Dream it, plan it, live it together 🎯

  • Vision board for goals and dreams
  • Shared calendar for events and plans
  • Countdown timers for special moments
  • Automatic reminders for birthdays and anniversaries

Technical highlights

  • Dynamic countdown calculations
  • Calendar system with filtering and navigation
  • All-day and timed events
  • Vision board image uploads via Supabase Storage
  • Goal tracking with progress states
  • Distinct visual indicators for goals, wishes, and events

5️⃣ Your story, beautifully preserved πŸ“Έ

  • Upload photos from your device and in future Google photos
  • Organise memories by date and location
  • Create shared albums
  • Browse your journey in a responsive gallery

Technical highlights

  • Google Photos API integration with OAuth
  • Secure authentication via Netlify Functions
  • Supabase Storage for images and videos
  • Metadata system for descriptions, locations, and dates
  • Multiple upload modes for individual or grouped media
  • Responsive gallery with full-screen viewing

Value Proposition & Audience Benefit

YuMe is built for couples who want to feel close even while physically apart.

It is not social media. It is private, intentional, and designed for two people only.

YuMe helps partners:

  • Stay emotionally connected through small shared moments
  • Look forward to reunions and future plans
  • Build goals and dreams together
  • Preserve their relationship story as it grows

Relationships are built on small moments. YuMe makes them last.


Scalability & Investment Potential

YuMe began as a real tool for my own long-distance relationship, but the potential is far wider.

Future roadmap

  • Mobile app development
  • Shared gift wishlists
  • Push notifications and reminders
  • Google and Apple Calendar integration
  • Travel planning tools
  • Shared long-term life planning features
  • Expansion beyond couples to families and loved ones living apart

With funding, I would invest in premium APIs, infrastructure improvements, UX refinement, and development support. With enough backing, this is a project I would build full-time. I truly believe in its impact.


Technical Highlights

Architecture and Stack

  • Modern TypeScript single-page application built with Vite
  • React with hooks and context for state management
  • Tailwind CSS for responsive UI design
  • Supabase authentication and PostgreSQL database with row-level security
  • Secure linked partner accounts with real-time updates
  • Netlify Functions for serverless backend logic
  • Designed for future mobile scalability
  • Codebase is 99.6 percent TypeScript
  • Over 260 commits showing steady iteration and refinement

API Integrations and Security

  • Spotify Web API with OAuth2 authentication
  • TMDB API for film and TV data
  • Google Photos API for media imports
  • Mapbox API for maps and geocoding
  • All API keys secured server-side
  • Token refresh handling for persistent connections

Database and Storage

  • Supabase PostgreSQL with relational data modelling
  • Supabase Storage for images, videos, and audio
  • Real-time subscriptions for shared updates
  • Optimised queries and indexing

Technical Challenge I Am Most Proud Of

One of the biggest challenges was building a fully persistent Spotify music player that works across the entire application.

Maintaining playback state while navigating between pages, handling authentication, refreshing tokens, and supporting a mini-player view required careful architecture.

I implemented a global Spotify player using React Context that allows uninterrupted playback across the app. This turns YuMe into an immersive experience, where music plays while browsing memories, viewing photos, or planning future moments. It transformed YuMe from a collection of features into a cohesive emotional space.


Thank you for reviewing my project πŸ’™

It was built with love, tested in a real relationship, and grown with care. My partner is the one encouraging me to share it more widely, believing it could help others too. I am very grateful for that support.

Long distance is already challenging enough. YuMe exists to help strengthen that love, and soften those challenges.

Top comments (0)