Introducing Mood.site
Leveraging Spite-Driven Development to make a zero friction image sharing site
March 11, 2024
Tagged: Products Programming Mood
mood.site
I recently needed to send a friend some images in a way that could be referred to later/added to. Images to create a “mood”. A “moodboard” if you will.
Here were my options:
- Make a folder in Dropbox/drive and manage the sharing permissions on the folder to be public.
- Use a design tool like Figma or Miro to throw lots of images into and share a share link with him
- Use a “mood boarding” tool like Milanote and put the images in there
- Use a “social gallery” site like are.na and make a board with the images in it
None of those were/are particularly “bad” options, but each one had an outsized amount of friction before you got to the point of “sharing images”. Each of the above has at least a few of these characteristics:
- Require accounts/configured permissions for viewing and/or editing.
- No “gallery” view/generally bad photo viewing experience
- Bad/no mobile viewing experience
- Hard to edit (or - more complicated editing than necessary/not possible on mobile)
- Too many additional features that I don’t immediately need
In short - friction, friction, friction. I want to do as little as possible to share some images. I don’t want to be onboarded, I don’t want to make an account, I don’t want to sign up, I don’t want anything except a place to put images and then share that collection of images. Everything else is gravy.
Every site above doesn’t share the same values, or if they do they maybe got lost along the way. The closest tools like gomoodboard seem like a product designer gave up halfway through the project and said “good enough”! Other tools are trying to do more than share some images, or use at as a lock-in mechanism for a bigger offering.
Which, you know fine. Some people really want an experience where you’re effectively doing some light graphic designing on a canvas to sell an idea. This is totally fine, but also a bit antithetical to “just sharing some images”.
Additionally, the collaboration story on all of these varies from non-existent to horrendous. Multi-step processes to make accounts, get invited to collaborate, etc.
I think it’s easy to maybe get pigeonholed into thinking that I’m just talking about moodboard-shaped problems, but consider a scenario like this: you go to an event with some friends and you want to create a collaborative photo album where people can add their photos. What are your options? You’re going to add grandma to the Dropbox folder? Does she have the app installed? Maybe iPhoto albums, but what about the android friend? Facebook? Just dumping them into a group chat and hoping someone saves them all together? Why not just send them a website?
Surprisingly, there are practically zero options. Even with an internet whose modern incarnation seems to bend so completely to sharing photos, there are very few places where you can just… share photos.
Spite-driven Development, or “I guess I’m making this”
I’ve quoted Rich Hickeys idea of “Hammock-Driven Development” before, but with this project I uncovered an equally powerful cousin, “Spite-driven development”. Making something not slowly and deliberately over time, but instead making something as quick as possible because it’s so clear everything else is so wrong.
So fueled by spite driven development (and a few other things I’ll mention below) I built mood.site over the course of a few weeks. Here’s what it looks like (if you’ve added images):
The premise is basically: as little friction as possible to add some images to a website and then share that image collection to other people. And just fundamentally be really good at just that, at least to start. When you go to mood.site, you should see this:
That’s it. Add images, share the URL. Nothing more complicated than that. And it works on mobile.
Some Frills
There are other things going on though that operate at the periphery of the main experience. Specifically, the SPA nature of the site really kicks in:
When you go to mood.site, you’ll see that you get a URL like
https://mood.site/7iZjhVBh?edit=gAFlN–w
This is both the URL to view the site as well as share the site for editing. However, if you share someone on the URL without the edit portion:
They will still be able to see your site but can’t edit it. Pretty cool! Other small things:
- Clicking an image puts it in lightbox mode
- When in lightbox mode, use the arrow keys to navigate images (swipe on mobile).
- Increase or decrease the size of an image by clicking the plus or minus when hovering it.
- Delete an image by clicking the x on the image
I’ve shared it with probably about ~100 people now, and the initial reception has been pretty good, and really validated the idea in general. If you’re reading this, I welcome you to try it as well. Let me know what you think:
I’ve got a fair list of features I want to add into it as well, but for early people who try it, what do you think? What’s it missing? What would you like to see? There’s also the question of payment, which I do have ideas for, but right now just want people in the tool and trying to incorporate it into their creative work.
Now let’s talk about the how.
Using ChatGPT to actually build something
I have been wanting to really put ChatGPT through its paces to make something “real” recently. I’ve seen all the obnoxious Twitter threads by people talking about how ChatGPT did this and that, and felt like I should give it a go myself for something, but no project ever really seemed right.
A moodboard website though seemed like a perfect fit, primarily because: • I intuitively felt that the actual amount of code would be pretty small • No fringe tech by design, could just use standard web stuff • Not a domain I know a ton already about. I have done a lot of backend work and some front end stuff in the past, but definitely know not enough to just do it all myself. • I wanted it to be done as fast as possible (get the spite out of my system)
To be clear I have used ChatGPT on all sorts of things in the past, including programming things, but this would be the first project where I, soup to nuts, built something with the tool.
The approach I took was something like a product spec - basically talk to ChatGPT first as if it’s a consultant for how best to do the project, then put it more into a role of delivering those features/requirements. Just so it’s clear, here was the first prompt I used:
I want to build a website where, when you go to the URL (moood.com), it creates a new “edit” URL for a moodboard style site that you can return to to edit, and on that page you can drop images directly into the browser to have them uploaded to an s3 bucket and the page now shows those images in a mood board. You can also drag to rearrange images and click an X on an image in the browser to remove it. you can also share a “share” link that shows the same moodboard but you cant edit or add images. Walk me through what software and libraries you think I should use for this, listing their pros and cons.
ChatGPT and I then go back and forth a bit and I have it weigh pros and cons of different options:
One thing I also wanted to do with mood was to try a few different web things I had seen in the past and wanted to give a go. So I would prompt ChatGPT about those things and ask if it thought they were good ideas.
After a while, I felt like both I and ChatGPT had good context on the problem domain and requirements, and so I had it start to write code. I’d ask it for features, and basically take the output code and paste it into vscode and just spot check it for any obvious errors. Once it was in, I’d then start asking it for more features. I’d then just paste all that into vscode, rinse and repeat.
And then I got mood.site!
From 0 to 1
Well, not quite. As part of this process (and by my own design), this was an exercise in really understanding how much ChatGPT could do to “make” something. Simon Wilson said about LLM stuff that it makes him be more ambitious about his side projects, and I really echo that thesis here. ChatGPT made this whole idea possible, because if I think to how I would have made this before, I can just see myself in the despair loop of circling w3schools, mdn, and stackoverflow for out of date answers to questions about js/html and people recommending libraries or assuming you’re using React or whatever else (note: mood.site currently uses no framework!). What was effectively a two week project would likely have taken at least twice as long to get to something reasonable.
And this, based on having worked with ChatGPT a LOT on this project, is definitely where the tool shines — the 0 to 1 aspect. Past that though, the story is a bit different.
The iteration loop itself of prompt -> response -> copy -> paste -> prompt starts to feel like it is delivering diminishing returns. Spending the time to get GPT to understand that it just needs to change css variable to pixels instead of % can be hard thing to frame as a question, and by the time you figure out what question to effectively ask you realize you can basically fix the problem yourself. Once you’re at the “1” of 0 to 1, you really need to have a developer skillset to start reigning things in.
Beyond 1 (or, What it’s bad at)
One simple example is just general architecture. Because I wasn’t demanding ChatGPT use a specific code/file architecture, it just kept telling me to update existing files. The net result was one giant html file and one giant js file of tons of loose functions. If you know nothing about code, it’s hard to see whats wrong with this, especially if the app “works”.
But any developer can easily see that a 800 line file of loose functions is hard to maintain, so I had to refactor the app itself to have seperate js files and unified function calls to make everything more “logical”. ChatGPT never suggested I do this or even made mention of it as an issue — you have to be a developer to understand to do this, full stop.
Another big learning, maybe obvious here, is that ChatGPT has no idea of “aesthetics” or sense of UX when writing code. It can do things, but it does things really “directly”, no more or less than you instruct it to. Nor will it suggest things along those lines. For example, the cow button in the bottom left tilts a little bit when you hover it to indicate its interactable. ChatGPT didn’t do this, I had to tell it to do it because I knew it would feel good.
This isn’t necessarily surprising, but one thing that sort of was was that, when I instructed it to do the rotation, it was just thinking about that interaction element itself, not the whole user experience of the button. Specifically, that I would want some other action to happen on click (the cow now rotates a little further and back to confirm the click). These are the sort of things that “feel good to humans” but are something the LLM isn’t really considering when offering you its code.
Other things it’s bad at:
- Refactoring generally. ChatGPT never once suggested a refactor based on its context. All suggestions were additive, or made edits to code previously written if the prompt was about that code specifically. Relatedly, if the return values or input params of a function change based on this type of stuff, ChatpGPT doesn’t know to prompt you back to go to function call locations and update them.
- Similarily, it’s bad at general code flow. It seemed okay with understanding how one function could call into another, but if there were 3+ jumps between functions it started to cease to really understand how the functions operated in concert. I’m sure some people will read this and say that this is code smell, and maybe it is!
Overall though, it’s really hard to state how powerful the 0 -> 1 factor is. Mood.site only exists because ChatGPT could get over that first bump of inspiration/spite and get something workable pretty quickly. I would have totally just not done it in the first place had it not existed.
THE STACK
Okay now let’s really talk about the how. Or as we developers like to say, THE STACK.
Part of the goal behind mood was to not just use ChatGPT, but also give a run at a few web technologies I’ve seen in the past that seemed cool but I never had a use for. Mood gave me a perfect reason to try them out:
Supabase
At a previous company we used Firebase for the backend, and for this project I said, why not use Supabase. I had been tracking it’s development a bit and the integration with Deno via its cloud functions seemed like a nice fit for the SPA nature of Mood. Overall I’ve really enjoyed Supabase and think their DB integration is quite nice (I like it better than Firebase Document-store, at least for this use case). I’m also using Storage here to store all the images.
Cloudflare Pages
The site is served via Cloudflare pages, which provided a nice interop with hosting the project. I’m not really using a lot of what Pages offers (the functions are in Supabase), but I am considering moving the image storage to Cloudflare pending however mood does.
And… that’s sort of it. The frontend gallery uses Masonry for layout, and doesn’t have any framework.
Like I mentioned way up above, there are definitely a fair number of features I want to add, but most of it all is at the periphery. The core experience of “just get images on the page” is something I think is actually good in mood, and I don’t want to change that.
Bonus Section
All the API use for mood is brokered through a cloud function on Supabase, and all auth is done basically via query strings… which means you basically get an API for free for any board!
Knowing this, I created a shortcut on iOS that lets me post any screenshot I take (or anything from my clipboard) to a mood site I created with a single button. It’s become basically my own little tumblr/instagram… thing for my own inspiration:
Here’s a link to use the shortcut on iOS (you’ll need to configure it to give it your own board/edit key):
https://www.icloud.com/shortcuts/f6f83579522248e9a93de51016b240e8
Thanks for reading! Hope you check out mood! And of course, share around! I want the world to know!
Published on March 11, 2024.
Tagged: Products Programming Mood