I was annoyed by calculating how to stack food containers. So I built software to do that for me. I full well know that I'm the weirdo here.
tl;dr: Software here, source here.
Dividing numbers is hard. Like, really hard? That's why I built a tool to divide all the numbers at once. Well, not all the numbers obiously. Just all the measurements for LocknLock food containers, starting with about 2/5 of their HPL line of containers.
LocknWhat?
I'm not sure how well known they are internationally but LocknLock is a company producing food containers and in Germany they're a thing. We get them at LIDL, we get them at QVC, we get them everywhere. All our parents have three and a half shelves dedicated to them and now my generation started having kids we're dedicating shelves to them ourselves (knowing my generation it's probably a Kallax).
What really annoyed me was that their website makes it really hard to get the measurements of multiple containers at once. And I like stuff to be stacked neatly, so everytime I bought one of their containers I had to check that atrocius website for the measurements of multiple containers to make sure they fit each other and my cupboard. Last week I was annoyed so much I started using my superpower of making rocks do math to make it less annoying.
Five minutes of concept work
The idea was pretty clear: Have a list of all the containers, let me pick one of those as the base container and, for every other container, calculate if they fit on top. I had a million more ideas swirling around my head but I wanted to get this done quickly.
That's how the actual code came to be, too: Not thinking about anything too much and just doing whatever gets the job done fast. As I'm very much into web technologies I just spun up the Vite React project template generator to get LocknStack off the ground now and that's basically all the thought that went into the tech stack. Well, there was one more decision. I added Mantine to the project.
My feelings on Mantine were overwhelmingly positive even a few weeks ago but started to be more mixed. As I use it more and more for Meeple Party I started to notice that, sometimes, it's still a bit rough around the edges. Especially making pages responsive is often harder then I'd hope it'd be. Just look at this commit for example where I basically gave up building something responsive and just built two different components for mobile and desktop. I still like how the Mantine components look and feel (when they are working for me) but for the next project where I actually want to learn something new I think I'm going to go with something headless.
Four hours of implementation, tops!
I have no idea how long it really took me, as working in my free time is often erratic, with all that kid, doing taxes and playing eight hour long board games business in between. I should really start timing myself. But all in all it felt like half a working day, so let's go with that.
As it is a simple app I was just working top-down. I created a component for displaying all the containers which meant I needed some place to store container data. So I built a context with a matching hook for that. I already knew that I'd need a place to store the current base container, so I put it in the same context.
1interface ContainerContextType {
2 containers: Container[];
3 current: Container | undefined;
4 setCurrent: (container: Container) => void;
5}
6
I could have put the current container into its own context, but I don't see the point. I can always do that any time in the future when the context gets to complicated, but that should be pretty far away.
The actual functionality is entirely in this function. It calculates if and how often some container fits on top of some other container. There's another function called calculateBestFitting that just tries flipping one of the containers to get a better multiplicator. The function isPrecise just checks if the deviation from a perfect fit is smaller than 10%.
1function calculateFitting(bottom: Container, top: Container): FittingResult {
2 const x = bottom.width / top.width;
3 const y = bottom.depth / top.depth;
4 const multiplicator = Math.floor(x) * Math.floor(y);
5 const fits = multiplicator > 1;
6 const precise = isPrecise(x) && isPrecise(y);
7
8 return {
9 fits,
10 precise,
11 multiplicator,
12 };
13}
14
A million more ideas
As I said, there's a lot more thing I could have done. I'd really like it if this was a real application where I can virtually stack containers on top of each other with layers and all that. But you know what? It's fine! It's absolutely fine as it is! It gets the job done and that's what counts. The only feature I'd like to add is calculating the height of two stacked containers to see if they fit my cupboards and drawers. Maybe basic search functionality because it's pretty unwieldy already and there's a lot of data missing. But apart from that? It's fine!
So, what is your way too specific problem of the day?