20 Feb 22

Friendly Reminder

My mind is frequently racing with ideas of apps and services I could build. Throughout the years, I've thought myself to code static websites, but until last summer, I couldn't program well enough to build complete experiences with user authentication, backend, and databases.

I also don't get to explore visual design and polish pixels a lot in my day job, since big orgs like Nubank and Twitter tend to have structured design systems that ICs can just pull components from.

When the pandemic hit, I decided to invest in honing my coding and design skills by building a simple app to help people remember their loved ones.

Want to see it live? Visit friendlyreminder.cc

The problem

After deleting my Facebook and Instagram accounts, the one thing I truly missed was getting birthday reminders.

I tried adding events to Google Calendar and set reminders there, but it didn't feel right...I didn't want my loved ones to be in the same place I store meetings. I also didn't want to use regular reminder or to-do apps, where I store tasks. I felt like birthdays and important events deserved their own special place.

I also wanted to:

  • See all events in one list
  • Quickly add notes, like birthday gift ideas
  • Get customized reminders, like monthly and weekly summaries, in addition to a reminder in the day of the event.

Tech stack

For frontend, I chose Next.js, which I was already familiar with. Next.js also comes with an easy framework for implementing backend functions, which made my life much easier. For user authentication and database, I chose Supabase, which is in its early stages but I've gotten a long way with the community's help. I've also been using this project to experiment with Framer Motion, which helps me make smooth animations in React. The last piece in the puzzle is Github Actions, which I use to run a cron job every day to send the corresponding emails. So many learnings!

It took me about 3 months to build it to the point where it looked good and worked reliably.

The final product

When users log in for the first time, they're presented with an empty state to add their first event:

The next events are added with a modal, which has a mobile friendly implementation:

As with any side project, I'll likely keep evolving Friendly Reminder over time. Pulling off this project made me feel empowered to go tackle bigger product ideas, and my mind is already racing again.

Remember what matters.

Want to see it live? Visit friendlyreminder.cc


This website was built using Obsidian, Eleventy and Vercel.
The text is set in Untitled by Klim Type Co.