back to blog

Creating a gift chooser for my girlfriend

Practicing my frontend with a small webpage dedicated to my girlfriend's birthday

2 min readAnselm Long
personalnext.jstailwind css
I hid the sappy stuff for this demo, but I'm happy with how it turned out

Context

What do you do when you're a 15 hour flight away from your girlfriend and her birthday is coming up? For me - I thought of coding her a website! It was impractical to ship her gifts, and I wanted to get her a few things, so I decided to let her choose!

Features

This website included a nice user flow including:

  • A nice letter with a button that plays 22 by Taylor Swift upon pressing it (yes, she turns 22 this year)
  • A nice scrolling photo gallery with captions
  • A gift chooser where she could select gifts and vouchers that she wanted - vouchers would download upon button clicks and she could "redeem" it when we met again.

Tech Used

This was built using the same stack that this website is built on, the T3 stack (Tailwind, TypeScript, tRPC, Next.js)! Most of it was done in a sequential pattern.

Reflections

This was a fun and meaningful project for me - it wasn't super hard, and helped me dip my toes more into building with this stack, which led the foundation for this entire portfolio website. And as someone who struggles to pick gifts for my girlfriend, this vastly helped simplify my process (and she liked to pick!). Would recommend for other coders to try :)

Edit: Unfortunately, we're no longer together - but this was still a project that meant a lot to me so I'm not deleting this.