wddng - A wedding with tech support

#pwa #javascript #python #flask

This post has initially been posted on my personal blog

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:

I got married. Yay!
I initially came up with this idea a few years ago, when my best man got married.
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 perceived 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 pleasant 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:

Holds event data
Allows them to upload text messages and / or images
Is kind of "anti-social". Guests only see their own uploads, only my wife and I see all content
Doesn't look too sh****
Runs on various devices ranging from "This should be in a museum!" to "It just came out yesterday!", including various operating systems

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:

Polyfills
Promises
Fetch API
Intersection observer API
Service workers
Media queries
CSS transforms

Things I wanted to try:

Auth0 for authentication

Things I already knew, but still increased my knowledge

Python backend using Flask

Things I built myself to get a better understanding

A very basic kind of single page application
Routing, including authentification for certain routes
Lazy loading of images
Custom tailored caching via service worker

Pics or it didn't happen!

Conclusion

The best way to learn new things is to actually use them!
Having a fixed deadline and quite a few people to show your work to really boosts your motivation (and also increases your fear of failing)!
I've built a responsive, mobile first, material design website which supports modern browsers (Chrome, FireFox, Samsung Internet, Safari) from scratch
Learned a lot about responsive design, browser peculiarities and front-end development in general
I hope the result does not look too bad, comments are welcome!
I enjoyed the design part more than I thought (more on that later)
It worked! :)

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

Top comments (5)

Tunde • Apr 23 '18

Hi Simon,
First of all congrats on your wedding! All the best for both of you! :)
Regarding the app: It's an amazing idea (especially because we are planning our wedding for next year :D )! I can't wait to read about the technical part!