3 Years Wrapped

Overview

3 Years Wrapped is a personal interactive web experience inspired by Spotify Wrapped, created to celebrate three years of shared memories through a sequence of story-driven screens. The project combines visual storytelling, transitions, and interactive progression to turn a collection of moments into a more engaging digital experience.

The Problem

A traditional photo gallery or static anniversary page would not capture the sense of progression and storytelling I wanted. The challenge was to create an experience that felt more immersive and intentional, where each screen contributed to a larger narrative while still remaining simple to navigate.

Constraints & Requirements

• The experience needed to feel smooth and sequential without making navigation confusing.
• Shared progression state had to remain consistent across multiple interactive sections and components.
• Transitions, timing, and UI effects needed to feel polished without making the application difficult to maintain.
• The experience had to remain responsive across mobile devices, tablets, laptops, and larger screens.

The Approach

I built the experience with Next.js, TypeScript, and Tailwind CSS, structuring the application around a sequence of reusable story sections. I used React state, effects, and shared hooks to coordinate progression between screens, manage interactive behavior, and keep components focused on presentation. The overall architecture was designed to separate UI content from navigation and interaction logic so the experience could remain easier to extend and maintain.

Key Decisions

• Modeled the experience as a sequence of story states instead of treating each section as an independent page.
• Used shared and reusable hooks to coordinate progression and interaction logic across multiple components.
• Separated presentation components from state and navigation logic to reduce unnecessary coupling between sections.
• Used effects carefully for transition timing, screen progression, and other lifecycle-driven interactions.
• Designed the experience mobile-first so the story remained comfortable to navigate on smaller screens while still scaling well to larger displays.

The Outcome

The result is an interactive, story-driven experience that presents personal memories in a more engaging way than a traditional gallery or static page. Beyond the visual outcome, the project gave me practical experience managing shared state, coordinating effects, and structuring reusable logic across a highly interactive frontend.

Lessons Learned

• I gained a stronger understanding of how state should be structured when multiple components depend on the same progression logic.
• I learned that effects are most useful when they are tied to clear lifecycle or synchronization needs, rather than being used as a general solution for application logic.
• I gained more experience extracting shared behavior into reusable hooks to reduce prop drilling and keep components easier to reason about.
• This project reinforced the importance of separating presentation, state management, and interaction logic when building highly interactive interfaces.
• If I were rebuilding the project, I would further formalize the story flow as a state machine or configuration-driven system to make adding and reordering sections even easier.
• A gift doesn't need to be expensive to be meaningful; It's the thought and effort that counts.