Reverie ∞ a nostalgic atmosphere creator

🎯 Track Category

Wellness / Mental Health / Experience Design Table Number: 13

🌱 Inspiration

Reverie came from something very personal.

I’ve always found myself thinking about small moments from the past, not necessarily big events, but quiet feelings: a calm evening, a familiar place, a nostalgic atmosphere. What I realized is that what I miss isn’t the memory itself, but the feeling attached to it.

At the same time, most digital tools focus on productivity, they help us do more, faster, but they rarely help us slow down or emotionally reset.

I was also inspired by soft, nostalgic visuals, especially Ghibli-like environments, that naturally create a sense of calm and comfort.

So I started thinking: 👉 What if users could recreate those feelings themselves?

Reverie is my attempt to turn emotions into something visual, interactive, and revisit-able.

⚙️ What it does

Reverie is a full-stack web application where users can create and explore personalized emotional spaces called atmospheres.

Users can:

Register and log in
Create atmospheres with:
title
images
songs or ambient audio
mood-based tags (e.g., calm, nostalgic, cozy)
Browse public preset atmospheres
View detailed atmosphere pages
Favorite and save atmospheres
Manage their own created spaces

Each atmosphere acts as a digital comfort environment that users can return to whenever they want to relax, reflect, or reconnect with a feeling.

🧠 How I built it

I built Reverie as a full-stack application, transforming a design-focused concept into a functional system.

Frontend: I reused and extended an existing Reverie component system built with React and Vite. I added new pages for authentication, atmosphere creation, browsing, and user management, along with an Auth context to connect everything to the backend. Backend: I developed a Node.js + Express API with MongoDB Atlas and Mongoose. The backend handles authentication, atmosphere CRUD operations, and favorites through secure endpoints. Database: MongoDB Atlas stores users and atmospheres in a flexible structure that supports tags, media, and personalization. Media & Experience: Ambient sounds are stored locally and triggered when entering an atmosphere to create a more immersive experience. Seeding: I added preset atmospheres so the app feels complete and demo-ready.

⚔️ Challenges I ran into

Asset handling across tools: Integrating assets from Figma and Vite required restructuring imports and switching to local asset paths for reliability. Audio playback limitations: Browsers block autoplay, so I had to redesign interactions to trigger sound through user actions while keeping the experience smooth. Frontend-backend integration: Aligning API responses, schemas, and UI state required careful debugging. Database setup: Configuring MongoDB Atlas, environment variables, and connection strings took time to get right.