The Vision: A Digital Apartment
Long-distance relationships are often lived through a fragmented series of apps: WhatsApp for chatting, Zoom for calls, and shared Google Sheets for travel planning. For our one-year anniversary, I wanted to create something more cohesive—a single “Digital Apartment” that serves as a shared space for my girlfriend in Brazil and me in Switzerland.
“Our Place” is a React-based web application that mimics a physical home. By navigating through different “rooms,” we can interact with shared memories, plan our future, and spend time together in real-time.
A Guided Tour of the Apartment
The core of the app is the Room Controller. Instead of a traditional navigation bar, I used an AI-generated image of a cozy apartment as the interface. Using relative positioning and “Click Zones,” different furniture items trigger specific modules, each living in its own dedicated component:
- The Fridge (
Fridge.jsx): A real-time, drag-and-drop canvas using@dnd-kitfor notes and photos. It features a Deep Dive Clipboard that serves a new thought-provoking question every day. - The TV (
LivingRoom.jsx): A synchronized YouTube player where playback and video selection are synced in real-time across the ocean. - The Couch (
Couch.jsx): Our digital photo album. It handles image uploads to Supabase Storage and uses the OpenCage API to geocode our memories. - The Map (
Timeline.jsx): An interactive Leaflet map that pins our geocoded memories, followed by a vertical scrollytelling timeline of our relationship. - The Window (
FutureDreams.jsx): A collaborative planner for travel bucket lists and long-term life goals, complete with progress bars and financial tracking. - The PC (
Arcade.jsx): A “Relationship RPG” that gamifies our daily life, allowing us to earn gold for tasks and spend it on shared rewards. - The Carpet (
Milestones.jsx): A digital ledger that tracks our relationship tenure down to the day and aggregates shared stats from across the app. - The Title Area (
Utilities.jsx): A set of practical tools for international life, including dual clocks for Switzerland and Brazil and a real-time BRL/CHF currency converter.
This spatial metaphor makes the app feel less like a tool and more like a destination.
Real-Time Presence: The Digital Fridge & Living Room
To make the apartment feel “alive,” I used Supabase Realtime for instant synchronization across the Atlantic.
The Fridge
The “Fridge” module is a drag-and-drop canvas using @dnd-kit. We can leave sticky notes, “magnet” photos, and answer a Daily Deep Dive question. When one of us moves a note in Switzerland, it moves instantly on the screen in Brazil. It captures that small, domestic joy of leaving a note for your partner to find in the morning.
The Virtual Living Room
Watching movies together is a staple of LDR life. I implemented a shared YouTube player using react-youtube. The state (play/pause, current time, video URL) is persisted in a Supabase table. If I pause the video to grab a snack, her player pauses too, keeping us in perfect sync without the “3, 2, 1, click!” countdown.
Mapping Our Journey: The Couch & Timeline
As we travel between Europe and South America, our history becomes a collection of coordinates.
- The Couch (Archive): When we upload a photo, I use the OpenCage Geocoding API to turn city names into latitude and longitude.
- The Timeline: These memories are then mapped using React-Leaflet on a dark-themed interactive map. Scrolling down reveals a vertical “Scrollytelling” timeline, where Framer Motion handles the animations to make the journey feel fluid.
Playful Logistics: The Relationship RPG
To make daily chores and goal-setting more engaging, I built the Relationship RPG. It’s a gamified task tracker where we earn “Gold” for completing shared or individual tasks. This currency can then be redeemed for custom rewards (like “Partner chooses the next movie”).
It’s backed by a straightforward PostgreSQL schema, but the impact on our daily interaction is significant—it turns the logistics of a relationship into a collaborative game.
Conclusion
“Our Place” taught me that the best use of technology is often the most personal one. By using modern web abstractions like React and Supabase, I was able to build a functional, reliable, and emotionally resonant space that helps bridge the 9,000-kilometer gap.
Happy Valentine’s Day <3