DEV Community

Cover image for I built a website maker for birthday surprises, and the music part almost broke me
RA Fahim
RA Fahim

Posted on

I built a website maker for birthday surprises, and the music part almost broke me

A text message gets buried in a chat list. A paper card gets read once and goes in a drawer. I kept thinking there should be something in between, a small private page with your photos, their favourite song and a letter that's only for them. So I built one, and called it Wishly.

Quick disclosure, since this is my own project: I designed and built the whole thing myself, with Next.js, TypeScript, Supabase and Cloudinary. If you want the stack details, they're on my project page.

What it does

You pick a template, change the text and photos, add a song, and share one link. The person on the other end doesn't need an account or an app. They just open the link on their phone.

Editing is mostly tapping. Tap a line to rewrite it, tap a photo to swap it. No forms. Drafts autosave, and if you spot a typo after sending, you can fix it and republish. The link stays the same, which I think matters more than it sounds.

It works in English and Bangla. Bangla fonts breaking on a love letter is the kind of thing I really didn't want, so that got tested a lot.

The occasions

There are six: birthday, proposal, wedding and anniversary, sorry, miss you, and letter. About 31 templates in total, two of them Bangla proposal designs.

The sorry one is my favourite. It's quiet on purpose, with a layout inspired by Kintsugi, the Japanese idea of fixing broken pottery with gold. An apology shouldn't look like a notification.

The proposal one has floating hearts and click-to-reveal cards, and ends with a "Will you be mine?" question. Yes, there's a No button too. You can guess how that goes.

The music problem

This was the annoying part. Mobile browsers block audio that starts by itself, so a page that plays a song the second it loads just stays silent on most phones.

I stopped fighting it. The music starts after a tap, usually when the visitor opens the letter, and it fades in. Works on both Android and iOS, and they can switch it off if they want.

Phones first

Most people will open these on a phone, often on a slow connection, so I kept the pages light and built mobile-first. Everything sits behind Cloudflare for caching and protection, which helps a lot on average mobile data in Bangladesh.

If you make one

A few things I'd tell a friend:

  • Use fewer photos than you think. Five good ones beat fifty.
  • Write one real memory in the letter instead of a list of generic wishes.
  • Open the link on your own phone with sound on before you send it.
  • Send it right after midnight if it's a birthday. It feels planned.

Making an account, picking a template and building a page is free. Try it at wishly.rafahim.com.

I'm RA Fahim, a web developer from Bangladesh. If you need a custom site for a business or a product, my work is at rafahim.com. Happy to answer anything about Wishly in the comments, especially the Supabase and music bits.

Top comments (0)