Learnings From Creating a Guest Book App

So it seems my sister is currently my biggest muse for side projects. She was the reason I created Neule.art, from which you can read more in the blog post "How I created Neule.art".

A while back, she asked me if I could create a guest book app for a party they had with their friends. The idea was simple - there should be a possibility to add a photo, some text, and the name(s) of the sender(s). They tried to search for a readymade app, but every one of them had some problems.

I also know, from experience, that these kinds of apps can be... how to put this... Not so good usability-wise. For example, no one wants to download an app for one night to be able to take one or two pictures. No one wants to create an account for that one night (and then forget that they have it).

So I wanted to try out if I could build a simple enough, non-account-needing web app. In this blog post, I won't share the code for that app. It was a bit hacky, as the app needed to work only for that one night. Aaand I was a bit in a hurry. However, I will share some learnings from creating that app. Let's first have a look at what the app was like.

The Guest Book App

The guest book app consisted of two pages: Login, which had this one input field for writing the password, and a page for guest book entries. In addition, there was a modal for adding a new entry. That had a form with the possibility of taking a photo (a file-type input field with accept="image/*" to open the camera) and adding names and a message.

As for the tech stack, I used NextJS with TypeScript, GraphQL, and GraphCMS (at the time, they changed their name just after I finished the project to Hygraph) for CMS. As for the photos, I stored them in an AWS S3 bucket and their URL to the CMS.

I've worked with all the other technologies before, but AWS was something new. However, I was pretty sure that because it's a fairly common use case to store things in AWS S3 buckets, and as React is so popular, there must be an easy solution for uploading files to S3 buckets from React apps. Turns out there is - but it wasn't that easy to upload the photos. That leads us to the first lesson learned.

There's Always a Typo Somewhere

As mentioned, this was my first time working with AWS. But I've heard the stories (mainly about someone forgetting to turn off something and getting an astronomical bill when they realize it the following day) - and I was prepared for problems.

I followed some tutorials on setting up an AWS S3 bucket, and to my surprise, that was easy. The problems started when I tried to upload the photo to the bucket. I tried a couple of packages and had CORS issues I couldn't solve.

I didn't understand why, and I was already ready to quit software development after spending a couple of days banging my head on the wall because of this issue. But I finally solved it.

The cause? Typo in the bucket name in the code.

The following tweet is highly related to this situation.

Netlify, NextJS Images, and Orientation

Another issue I had (way more minor than the CORS issues) was with the NextJS Image component and Netlify. I had planned to use Netlify for hosting, and I was almost finished. I deployed the app and sent it for testing.

It turned out that Netlify removed the EXIF data from the images for some reason. Some of the photos were weirdly rotated. I found some discussions where (if I remember correctly) the team confirmed that this is what can happen. While writing this blog post, I searched for the issues/forum posts/anything I've read, but I couldn't find anything. So I can't back this up.

I would have loved to solve this problem in some elegant way. However, at that point, I didn't have too much time to finish the app. So I decided to use Vercel for hosting - NextJS images worked well with it as it's the company behind NextJS.

Simple Things Go a Long Way

Sometimes, we need to remind ourselves that simple things go a long way. When we build apps and sites, it doesn't always have to be something super complicated and have a multitude of features.

As I mentioned initially, this app aimed to be as simple as possible. It was an answer to my (and others') frustrations with the available guest book apps that either required app installation or an account (or both). And it delivered what it was supposed to: People could leave guest book entries for the hosts.

I'm not saying this app was distribution-ready, but it would have been a good starting point had I had time to make it more configurable. Or to open source it, because right now, the codebase looks like I hacked it together in a couple of days. That's precisely what I did.

I try to remind my mentees and anyone seeking my advice that it's better to have a simple app completed than a bigger one in progress when applying for jobs. The simple app can always have improvements and next steps, but I try to stress that it's good to have the MVP finished.

Stepping Out From the Tech Bubble Does You Good

The fourth thing I want to talk about is that if you usually spend time with developers (like I do), try sometimes showing your projects to someone outside that bubble. It can really boost your confidence.

When I went to the party and spoke with one of the hosts, it helped me to remember that what I can do is a lot. If I'm showing my projects to anyone who knows about coding, I think a lot about what could be better and the improvements. Case in point: I don't want to share the code with you, my reader.

Another person who I can rely upon to remind me about these points is my sister. I love her enthusiasm when I show her something I've coded. It's been like that ever since I started to learn to code, and I appreciate her for that 💖

Wrapping Up

It was fun to create a project for someone's use. Even though there were some problems to solve, I'm proud of myself. I'm proud that I made this app, and it was usable. I'm also proud that I solved those problems.

Do you have any apps/sites in progress? Or have you finished something lately?

Links

• Neule.art
• The blog post "How I created Neule.art"
• Link to the tweet