A few months ago, an email from my good friend Gerrit showed up in my inbox. Gerrit made a new "Pottoriginale" movie, and he needed a website for his film tour. I knew that it will only take me an evening to do, I had the feeling that I'd enjoy the challenge, and I knew that I have some time in the coming week. And a few days later, pottoriginale.de was live.

I've already built a few websites for Gerrit many years ago, so I know what he needs. Gerrit is very good at providing essential info without asking, which makes the process very nice.

i have 2 posters. + new dates. + a poster for the aftershow party of the premiere.
see here [file sharing link]
tickets for the aftershow party are available here [link]
would be epic to have the trailer on the page [youtube link]
tour dates:
[...]
Director, Idea, Producer: Gerrit Starczewski
Camera: [...]
press inquiries, theater inquiries etc [mail]
hugs and many thanks

Everything else, for example the actual design is a nice greenfield project, and he's always very grateful for everything you do for him. I took some inspiration from the movie poster: colors, fonts, and for example the red banner at the bottom.

Because I know Gerrit, I also know that he wants his website to include up-to-date info. In the end, it's a website for a movie, and of course there will be new tour dates. Does this mean I need a database and a server? I just want to build a website!

Tour dates need to be updated frequently. I don't want to make changes to code and deploy a new version just to insert a new date. It should be as easy as possible for both me and for Gerrit to update the dates. Because, when for some reason I cannot make changes anymore, Gerrit should still be able to add new dates.¹ I don't want a situation where someone's career depends on my availability.

So... what's a free tool, where you can enter structured data, for which everyone already has an account for, is always available, needs no explanation, and where you can restrict who has access to it? ✨ Google Sheets ✨

Yes, I use Google Sheets as CMS for pottoriginale.de. This is free real estate. The site uses Next.js' Incremental Static Regeneration, it's cached, and works very similar to how I built my blog. And you know the best thing about it? It just works.

It works like a charm. I told Gerrit that if he wants new dates on the site, he should just shoot me an email and it only takes me a few seconds to update it. I shared the Google Sheet with him and told him, that in case I'm not available, he can feel free to add it to the Sheet. There's a link inside the Sheet you can't miss, it's clearly labeled to click on it after making changes (that link invalidates the site's cache).

Every time Gerrit sends me an email with a new tour date, it just takes a few seconds to do and it's actually fun. It makes me very happy to see that he gets more and more screenings of his film.

A few days later, Gerrit emailed me:

New date
6.10 GELSENKIRCHEN SCHAUBURG
Tickets soon

The date had no link for the ticket presale yet, it should show "Tickets soon". But I was an idiot, because I did what every developer loves to do, and built an unnecessary restriction into my code: if a row is incomplete, it is ignored. I thought I was smart. I thought that "in case I accidentally write garbled data into the sheet, it won't break". But why should I do that? What a stupid decision. There was no reason to restrict myself, it doesn't make any sense to have.

Easy change, I removed that restriction, and added a "Tickets soon" banner for when there's no link yet.

Next time, I would probably go even further and make everything configurable:

• If there's no link, just don't link it.
• Make a column for the banner text. Instead of baking "Sold out" and "Tickets soon" hard into the code, just make it completely configurable for each date.
• Maybe even make the "Tickets" text configurable. Because why not, it won't hurt, it's just a row in a spreadsheet! I'm a big boy, I can type.

After watching some Pottoriginale Instagram Stories, I noticed that Gerrit is posting screenshots of the website's section with the upcoming dates, to update his followers on upcoming screenings in or near their city. It blew me away because I never thought of it, yet it makes so much sense. It's easy for him to do and the screenshots are of course already in the mobile form factor.

Next time, I will keep the screenshot-ability for social media in mind. For every section. It's such a good life hack. And it also encourages others to post screenshots, if the screenshots just look nice.

I'm not the best at "designing while you code", it's just not a process I like to do. I also didn't want to spend a lot of time on an actual design, because I wanted to do everything in one evening. On top of that, I don't have any practice anymore in actually sitting in front of a design app and and designing something. So, even if it's not my most favorite and productive workflow, I designed it while I coded it.

It was a fun process regardless, because I can do whatever. It's a website for a trashy film, so I have the chance to make a fittingly trashy looking website. Everything just happened while I did it. Why not put a good old tile table on a website? When do you get the chance to do that?

Why not make everything jump and move, get some motion in there? Crediting people – why not in the form of scrolling end credits? Taking the design inspiration from the poster and using the colorful scrolling banners as section separators worked great, in my humble opinion.

All in all, it was a lot of fun. In case I didn't link to it often enough, you can see the result on pottoriginale.de.

Footnotes

1. Always trying to minimize the bus factor ↩