Dear 2026

Deliver Your Heart : Anonymous Mailbox

Comment

Inspiration

We are international students living in Canada, away from our home country. As we are busy studying abroad, we felt that opportunities to convey our heartfelt messages to family, friends, and loved ones in different countries were gradually decreasing. This project began with the idea of ​​creating a digital mailbox that could transcend physical distance and time difference and reach the future, in 2026, with precious feelings.

What it does

"Dear 2026" is a service that allows users to create and share their own custom mailboxes and receive anonymous letters from their acquaintances.

  1. Create your own mailbox and share the link with friends via a unique URL.
  2. Level-up system: With every 10 letters accumulated, the mailbox's appearance grows from level 1 to level 10, providing visual enjoyment.
  3. Time capsule: A countdown function builds anticipation by preventing users from opening their letters until 2026.

How we built it

Hydration Error: To resolve hydration errors caused by data inconsistencies between the server and client (time, URL, etc.), we had to learn and apply useEffect and mount state management. DB Schema Design: We devised an efficient data query method to implement logic that would change the post level in real time depending on the number of posts.

Challenges we ran into

The field names of our letter object did not match the attribute names set in the database, and disabled the "Send Letter" button. After fixing the object field names, data properly sent from the client-side to the database.

Accomplishments that we're proud of

Going beyond simply exchanging letters, we've added an element called post level-up to encourage user participation. A major benefit was fully understanding Next.js's latest feature, App Router, and applying it to the project. Most of all, we're happiest having established a foundation that can provide a warm connection for our international student colleagues who are in the same situation as us.

What we learned

We learned the importance of communication while collaborating with my team members, adapting to code conventions, and resolving errors, and how a small animation can make a big difference in improving the user experience.

What's next for Dear 2026

We want to update some of our functions:

  1. Real-time notifications: We plan to add a feature that sends email or push notifications to users when a letter arrives.
  2. Animation: We would like to implement an effect that makes it feel like an actual letter envelope is being torn.
  3. Various customizations: We plan to expand beyond the postbox so that users can choose background themes and music themselves.

Built With

  • figma
  • next.js
  • react
  • supabase
Share this project:

Updates