Memories Space

Turn your photos and videos into private virtual memories you can revisit—together.

Comment

Inspiration

Photos and videos preserve moments, but they usually remain scattered across camera rolls and group chats. They show what happened, yet rarely recreate the feeling of being there together.

This project began with a simple question:

What if a day could become a place you could revisit?

Shared Virtual Memory Space transforms selected photos and short videos into a lightweight virtual environment organized into morning, daytime, evening, and night. Friends and family can explore the memories asynchronously or meet inside the same private space.

What it does

The current prototype lets users:

  • Explicitly select photos and short videos from their device
  • Place their media inside an interactive, swipeable 3D-style room
  • Organize a day into four time periods
  • Switch between immersive and accessible 2D views
  • Share a room URL between devices
  • Try peer-to-peer WebRTC voice with the microphone off by default
  • Use the interface in Japanese or English
  • Control visibility through private and unlisted sharing options
  • Join a waitlist for future capabilities without entering payment information

Privacy is part of the architecture rather than an optional setting. New spaces begin as PRIVATE, media is never imported automatically, and public sharing is designed around separate sanitized, view-only snapshots.

How I built it

I built the mobile-first web experience with Next.js App Router, React, and TypeScript.

For the prototype’s live memory room, I used responsive CSS 3D transforms to create depth without adding a heavyweight rendering dependency. The longer-term architecture supports optimized GLB/glTF scenes, while retaining a 2D fallback for devices that cannot render them reliably.

Selected images are resized in the browser to a maximum dimension of 1600 pixels and re-encoded as WebP. This reduces transfer size and removes embedded EXIF metadata. Media is then stored in a private, room-scoped Google Cloud Storage bucket and delivered through the application. Production authentication and authorization remain roadmap work.

The realtime voice experiment uses WebRTC for peer-to-peer audio and Firestore for signaling, presence heartbeats, offers, answers, and ICE candidates. Microphone access is only requested after an explicit user action, and transmission starts disabled.

The application is packaged with Docker and deployed to Google Cloud Run. Infrastructure is managed with Terraform, while GitHub Actions uses Workload Identity Federation to deploy without storing long-lived service-account keys.

Performance was treated as a product requirement:

[ B_{\text{initial}} \leq 15\text{ MB} ]

where (B_{\text{initial}}) is the initial non-video transfer budget. Videos do not autoplay, and the architecture progressively loads only the content needed for the current experience.

Challenges I ran into

Making 3D feel lightweight

A full 3D engine can quickly increase bundle size, rendering cost, and mobile battery usage. For the hackathon prototype, I focused on proving the spatial interaction with CSS-based depth while designing a path toward compressed GLB/glTF assets, texture optimization, and level-of-detail controls.

Combining privacy with effortless sharing

A memory space should be simple to invite people into, but an invitation link must not become permanent access to private media. This led to a clear separation between private collaborative spaces, unlisted links, and future discoverable snapshots. The prototype demonstrates the interaction model, while production authentication, membership enforcement, consent tracking, and revocation are the next security milestones.

Running realtime features on serverless infrastructure

Cloud Run instances are stateless and can scale independently, while WebRTC peers still need to discover one another and exchange signaling messages. I used Firestore as a shared signaling layer and added short-lived presence heartbeats. The current demonstration supports two audio peers; the planned MVP will use an SFU for configurable participation of up to eight people.

Supporting two languages from the beginning

Internationalization is much harder to retrofit than to design early. All primary interface text is maintained in Japanese and English dictionaries, browser language is detected on first visit, English is the fallback, and an automated check catches missing or mismatched translation keys.

What I learned

I learned that immersive experiences do not have to be technically heavy to feel meaningful. A carefully designed spatial interaction, progressive loading, and a strong emotional concept can create presence without requiring VR hardware or continuous video streaming.

I also learned that privacy affects the entire data model. It influences storage, metadata processing, invitations, public sharing, realtime APIs, consent, and deletion—not just a visibility toggle in the interface.

Finally, building WebRTC on serverless infrastructure reinforced how much of realtime communication happens outside the media stream itself. Presence, signaling, reconnect behavior, capacity limits, and safe microphone defaults are as important as the audio connection.

Accomplishments That We're Proud Of

We are proud that the project evolved beyond a static concept into a working, cloud-deployed prototype. Users can select their own media, place it inside an interactive spatial room, and revisit it from the same shared URL.

Our biggest accomplishments include:

  • Building a responsive, mobile-first experience in both Japanese and English
  • Creating an interactive 3D-style media room without a heavyweight runtime engine
  • Processing selected images in the browser to reduce their size and remove EXIF metadata
  • Persisting room-scoped media in private Google Cloud Storage
  • Connecting two devices through WebRTC audio, with the microphone safely off by default
  • Designing privacy into the product through private-by-default spaces and separated sharing modes
  • Providing a 2D alternative alongside the spatial experience
  • Deploying the application to Google Cloud Run using Docker, Terraform, and keyless GitHub Actions authentication
  • Defining a realistic path from the hackathon prototype to authenticated, moderated, multi-user production infrastructure

Most importantly, we proved that a virtual memory space can feel personal and immersive while remaining lightweight, mobile-friendly, and privacy-conscious.

What's next for Memories Space

The current release is a deployable interactive prototype. The next steps are production authentication, server-enforced membership, resumable media processing, optimized GLB/glTF scene generation, an SFU-backed eight-person realtime room, and sanitized public snapshots with consent and moderation workflows.

The goal remains simple: turn the photos and videos people already have into a private place where shared memories can feel alive again.

Built With

Share this project:

Updates