I Built StickerLog With AI: A Real App in a Few Hours

00:00 Why I built a sticker tracker

I started collecting these stickers again for the first time since I was a kid for the World Cup that is coming up in a couple of weeks. Of course, I got this to collect the whole thing. And I realized I wanted to know how much you need to spend because there's people saying it costs hundreds of euros, especially since um this World Cup has 48 teams, the biggest World Cup ever in history. And uh it's 980 stickers, I think. So, what's the cost per sticker? Where did I get the stickers?

What was in the different packs that I opened? What is missing? And for example, with my brother and other friends, I was like, "Hey, I want to have a simple way to tell them what's still missing in my album." And so I built an app for this. Overnight, in less than I think less than 24 hours, I got this thing ready in the first version. It's on GitHub. And in this video here, I'm going to show you exactly how I did it, which tools I used, how I got there.

Yeah, give you a little rundown of the app and definitely open a pack with you together and show you how it works. Let's hope this one has some nice stickers in there. So, uh,

01:22 The app and what privacy first actually means

what you're seeing is the actual app. I called it StickerLog. This is unofficial. It has nothing to do with FIFA, Panini, Coca-Cola whatsoever. This is just a unofficial sticker tracker and it's completely privacy focused. It only runs in your browser. It's a PWA app. If you don't know what that means, basically if you go into the browser on your phone, then you can click add to your home screen and then you basically have it like a ready app and you also get the updates

02:04 The build workflow: Claude Code plan mode and Codex 5.5

if I push them to GitHub. All right. What did I do to get there? Before we do a little rundown of the app itself and we open the pack, I'm going to show you how I got there. So, first of all, I used Claude code and what I did is I explained what I wanted to do, what's the background, let it do some research for me, and it actually found a couple of trackers, but most of them were hunting for your analytics or you needed to create accounts or there was a paywall.

So, nothing was really privacy first and easy to use and that was the goal. So, I thought why not build it myself? So I went into plan mode with Claude Code and once I had the plan I went into Codex 5.5 both in Claude code I went with the max mode I always do this for the planning part and in Codex I went with extra high let it check the plan it saw some flaws in how you enter the different stickers the teams the packs and everything and then I Let Claude write a prompt for Claude design because most

03:12 Why I designed it in Claude Design instead of Claude Code

of the time if you give Claude code and Claude is very consistent with this, it always says, "Hey, you don't need Claude design. I got a design skill. I can do this on my own. I don't need anything else. This is way faster." And then you need to say, "No, use give me a prompt for Claude Design. I want to design it there and then give you back the design." and this is the front end that you're going to work with. And um this gives me at least way better results than if you let Claude design it in Claude Code.

So always suggest doing this. Let me know if you have other experiences. But this is how it looks. You can see the prompt that I pasted here. I also said that people that are older that have no clue on how to actually interact with a complex app will be able to actually use this. So, it really has a simple UI UX. This is the final result. To be honest, I had to do some uh some tweaks along the way, but those are some really good mockups.

If you want me to give the complete prompt that I gave Claude Design to actually create this, feel free to comment below. Happy to share everything here along the way. And you can see this here. This is the primary flow. You have the dashboard. We're going to go into this in the real app in a couple of seconds because, as I said, the GitHub is already online and public and everyone can access this. You can see the the swap screens. This is all German. Um, and then you can see same flow in dark mode.

We also had a onboarding and PWA banner. Add this to your home screen. There's a new version update. So, the nice desktop dashboard. Also, I wanted to make sure that I can save things. And I think this is missing and came later than the uh the settings part. Ah, no. We got it here with the backup function. So you can actually do backups because everything here sits in your browser. Nothing is online. You can save it as a JSON file. For example, I did everything on my phone here in the app.

Uh probably too too small for the screen now, but um I did everything in here. Did the backup. imported it here in my oh this is the local host here in my app on the desktop so we can see my actual data and enter

06:07 Handing the design back to Claude Code

some stickers together once I got this ready then I clicked on share and then where is it hand off to Claude Code and then you copy this command or you can also download the zip instead and give it in the chat manually But what I did is copied the command, gave it into my Claude Code session and said, "Hey, the plan is now approved. Take a close look at the actual designs. Keep it as close to this as possible." And actually, I needed to remind Claude Code a couple of times.

Uh, after the first build session, so once I got this, I um set Opus 4.7. In the meantime, Opus 4.8 8 was released, but this was built with 4.7. I set it to high, I think, because for stuff like that, at least in my experience, I get better results with the high. Most of the time, if it's not too complex work, then with the extra high or max and you use less tokens, that was good. But the only thing that was missing after the first builds for example was the uh desktop version.

Actually for the mobile for the desktop version it it also did this here as the desktop version. So it built everything through because I set it to auto mode because we got everything planned out in detail first with Claude Codex reviewed it. I got it. Yeah, it was a little bit of a back and forth discussion then I got the Claude Design. So basically everything was set in stone. So then I could give Claude Code the go with this prompt here with the Claude Design hand over and set it to auto mode and after half an hour I had the first version locally running with everything.

So there were a couple of bugs that I needed to take care of, but um basically it was working in the local environment, right? So we got the onboarding screen. You can uh type in the codes,

08:08 App walkthrough: onboarding and entering sticker codes

simple and easy. It's private and local. And you can always save your safety copies. Of course, for this video, I'm going to switch it to English. Uh this is something that I added later. So the first version was my local version was in German only. I changed it to to variables which took a little bit of time. Uh could have thought about this right from the beginning. But it's easy if you can tell Claude Code to do this. This is already 0.11. So there's a little bug here because about this app says version 0.10 but it's actually 0.11 because I did a a couple of bug fixes.

for example, with the with the sticker names. Let's just go through the app. So, once you went through the onboarding, then you can see your actual album progress. And we're going to go again. This was the locally hosted version here. Let's switch to the one that is online where I imported my backup. And as you can see, I got 48 stickers already in my album from the 980 that are out there. This does not include the Coca-Cola ones. So maybe I'll add those in an update or you can because this is a public repo with MIT license.

So everyone can Yes. Well, basically go in here. Now if you want to enter stickers is super simple. You can see your owns, your missing ones, and what you spend. So let's click on enter stickers. And then you can easily enter the sticker code. So, one of the first things that I'm going to do in the next version is add a experimental photography feature. So, if you got your smartphone or take a picture of the stickers of the back of your stickers, then it autofills this here.

So, let's open this together and see what's in here.

10:04 Opening a real pack and entering the stickers live

Not sure if you can actually see this because I'm really small here on the screen. Going to drag myself a bit larger. And let's see. So, we got Umamush Egypt 20. Then we got Tak Salmon Kata 8. We got Italy especially as uh the winner of the World Cup here in Germany 2006. FWC 17. So this was one of the bugs. I got it as int uh 20 for the World Cup special stickers, but it's actually O and then FWC. So I got that wrong and then I changed it and then I could enter them.

Uh then we got Jane Castanir Cui19. I'm going to enter them in a couple of minutes. Uh Gonzalo Platter nice 16. We got Ain Deurovich. Nice. He's in the Bundesliga actually with uh for Bishkat and Rodrigo Bentacur. He's with Tottenham and this is Uruguay 12. So, what I'm going to do is just to have this in here super fast and it works on mobile. And doesn't matter if you type it like this or like this, right? But it's actually 8. Then we got FWC17. Actually, nice uh pack.

And also it doesn't matter if they are tied together. This just works. This was one, this was also one of the fixes that I did um while testing it then on the phone. Uh because you just want to type them in until there's the photography version B17 and Uru 12. So um this shows this is seven out of seven. Those are the normal packs from the pouch. Then you can see here those are different ones. I will probably add type your own. For example, there's um but you can add in here as many as you want and then just add.

It says where you bought it last and what the price was. So for a little here in Germany actually €1.25. Uh if you switch it to Rewe there's only €1 at least until the 6th of June I think. And for example, we got Idikica there. It has the normal price or others or online. But I know that I got this one here from Lidl. So it's 125. So I know those were in one pouch. And I'm going to save those seven stickers.

13:14 Album progress and cost per new sticker

Now the album progress. And it calculates the cost per new ones as soon as there's double in there. And I was lucky so far, but I tested. If it's working, then it shows um for example 55 owned and then the cost per new goes up of course because I want to know how much new I got. So I will put those here in the album later. I can also see um my purchases as you can see here. I I put them in here. I can also I note that I got this here on the 26 not today.

It automatically goes to the 26. So, I got all of those on the 26. So, I can see the purchases, the best hit rate. This will get interesting as soon as there's ones with doubles, and they will come after the first couple of

14:08 Teams view and trade list

packs. Then we got the teams view. And this looks a bit awkward now since the newest update. So, I need to make this a bit nicer. But what you can do is for example you can see uh with Brazil I already got four. And what I will do is I will add the names also but I did not find any list. So I will probably crowdsource those or um just type them in from my album. So this is the teams um enter stickers. We've been there.

Then we got the trade view where you can then click I offer if you have any duplicates. I don't have any. And I see this is pretty full right now, but this gets interesting once the album is more full and once you actually search for stuff. And then you can click share and then you can see messages. And this is more interesting on a smartphone because then WhatsApp, Telegram, and all that other stuff opens up. You can also download a CSV file and uh take it from there.

But um yeah, that's that's the uh trade view. Then a stats is still a bit boring right now for me. Well, that's basically the the overview and the stats will work on those. And then we got the settings where you can actually um save the backup. If you import, you can choose if

15:32 Settings, backup, and language switch

you overwrite or merge in. For example, if you put in something on your phone and then just want to merge that into your database here, then you can basically just merge in import and then both are combined. You can also override um but it makes sense to save from time to time because again this is privacy first is only on in your browser. Well, language uh switcher uh light mode for the ones that want to be blinded. Uh, not me definitely. You can switch it here as well.

And that's basically it. It's super simple. Um, it's all on GitHub. As you can see here, it still says 0.10. I definitely need to change that. Your private album tracker for the 26 sticker season. You can see the features here. I will add some screenshots as well. Again, this is just 0.10 and not 1.0. Let's see when and if it gets there. But you can access this under lukashuettis.github.io/stickerlog. Then you directly get this one here, the app, and then you can save it, for example, to your home screen on your phone.

And let's step back from the stickers for a second.

16:59 The real point: anyone can build tools like this now

They're a lot of fun. But why am I doing a video on this? Because this shows a lot of things. The thing is with tools like Claude Code, Claude Design, Codex, and everything that is out there, you can now build stuff like that in hours. I mean, it wasn't 24 hours until I got this. And the actual time I put in there thinking about this and doing this, which was a lot of fun, was only two to three hours maybe. And now for something that there wasn't a really fitting solution.

I just was able to build this myself. And there's this one here is a fun thing for a hobby where I can now better track my purchases, what I'm missing, um what doubles I have to better share this with my friends and actually see where where did I get which pack? Um was it part of a uh of a bigger one like like this one here? Um, this is also possible to put in there or like a bigger one like this one here. And this just shows that even for a small thing like that, for a hobby, you can build tools now with vibe coding.

That's how you call it. And this definitely was vibe coding. It definitely felt like a vibe to do this. And this option didn't exist one or two years ago. Again, this is a fun project, but this is something that you can also use for your daily workflows, for your actual work. Automate stuff. build little things that make your life so much easier where you can build things for like I did for a couple of hours or for a day that save you time for weeks and months to come and you get that time back because those are things that you do not want to do.

Maybe this showed how how powerful those those tools are like Claude Design, Claude Code, Codex, all of it. And if you combine it in the right way, then you'll be a able to build stuff like that even as a nondeveloper. Last thing, if you're collecting those as well, let me know in

19:21 If you collect too, let us trade

the comments. Then we can trade uh we can share the the CSV files. uh what we're still missing, what doubles we have once I opened all those packs that I got here. Also, feel free to build on top of that. And that all being said, thank you so much for watching. Let me know which dumb idea you already built something for or if there's something that you want to build. And if you have trouble doing that or need someone to build stuff that can automate the boring task for you, feel free to contact me.

The link to my website is down below. Feel free to try out the StickerLog. Let me know what you think. And then thank you so much for watching. See you again in the next