simon-hofmann.org

Welcome to my mind.
Watch your step, it's a bit messy around here!

wddng - A wedding with tech support

• Fullstack, PWA, JS, Python, and Flask

It might earn me the “Nerd of the month” prize, but I want to tell you how (and why) I built a PWA for my own wedding. :)

Some hard facts first:

  1. I got married. Yay!
  2. I initially came up with this idea a few years ago, when my best man got married.
  3. It might sound super weird at first, but I think my reasons why I did this are legit.

No really, why would anyone do this?

Back when my best man got married I initially came up with this idea to provide them with an app / website which would allow wedding guests to upload photos and text messages throughout the day to kind of document their wedding day as percieved by others. Unfortunately, back then I had to finish my Master’s thesis and also had to spend some time in hospitals (which is why I at the end also missed his wedding). But the idea somehow stuck in my mind.

Fast forward to a few weeks ago, I’m close to getting married myself. And to be honest, it’s been my wife who put my idea back on the table.

Besides the obvious reason that I simply like to learn by building things, I also liked the idea to allow our guests to share their impressions privately. There are dozens of social media platforms to share stuff like this, but in my opinion you’ll only capture the “true” spirit (stupid faces, fun stories, you name it) of an event if you provide a way to share data privately. You know, stuff you wouldn’t post on your Facebook, Twitter etc. Also I didn’t / don’t want many pictures from my wedding wander through social media.

Another pleasent side effect of such an app / website would be the possibility to provide our guests with infos. Things like a time table, the meal plan, credits and so on.

So here’s the summary of our requirements:

Provide an app / website to our guests which:

Ok, it doesn’t sound that stupid. How did you build it?

At first I came up with the idea of building a cross-platform native app using Flutter. I’ve built little demo apps back when it was in alpha state and really liked it, so in case of a native app this would’ve been my goto solution. But native apps require a proper way to distribute them, which in turn would require an Apple developer account, which in turn would cost me 100$ per year, which is why I discared my native app idea.

Having heard a lot of positive things about the possibilities provided by progressive web apps (PWAs), I decided to brush up my frontend web development skills. And since my frontend web development skills were basically non-existent, I decided to do it the hard way, using only plain JS, HTML and CSS.

Sounds reasonable, but what did you learn from building the app?

Things I had not (knowingly) used before and therefore no clue about:

Things I wanted to try:

Things I already knew, but still increased my knowledge

Things I built myself to get a better understanding

Pics or it didn’t happen!

Landing page
wddng landing page
Landing page
wddng menu drawer
Time table
wddng time table
Menu
wddng menu
Image stream
wddng image stream

Conclusion

This post has skipped all technical details and should picture my motivation as well a high level overview. A more technical post will follow, but right now I’m too tired.

If this has got you interested, feel free to contact me via comments, mail, Twitter etc.

So long

Simon