Project Meal Tracker - Dev Log 1: Blog fix & first sketch

Cover Image for Project Meal Tracker - Dev Log 1: Blog fix & first sketch

It's the 17th of December, 06:14.

My little-more-than-one-year-old kid woke up around 04:45. I just put him back to sleep about 10 minutes ago. I'm not the best at getting back to sleep, so instead of trying for another hour to eventually get another 20 minutes of sleep before the kid wakes up again, I decided it's a great time now to make some progress on my project.

While spinning up my editor and opening, I realized the lists in my articles aren't appearing as they're supposed to be. I am writing these articles in markdown and use the remark package to convert them to HTML. Well, the truth is, I just started with one of Vercel's blog starters. It's also not very true that I just realized the lists aren't appearing properly, but until now, I just didn't bother fixing it. Perhaps, now it's also just a form of procrastination.

  • 06:24 - I'll start trying to fix it now.
  • 06:28 - After 4 minutes of trying to change some CSS properties with the dev tool myself, I was about to start googling what's wrong. But before I hit enter and submitted "why lists have no bullet points", I decided to open up ChatGPT instead. I've got the Pro subscription and use this thing almost every day for work.
  • 06:37 - As always, ChatGPT had a solution immediately.
  • 06:45 - As I was about to share the Tailwind styles that made it work, I realized that the pre and code tags aren't styled either, so I added a bit of styling to those as well. Here is all the new code:
.markdown ul {
  @apply my-6 list-disc list-inside;
.markdown ol {
  @apply my-6 list-decimal list-inside;
.markdown pre {
  @apply bg-gray-100 text-gray-800 p-4 rounded-lg overflow-auto;
  font-family: 'Courier New', Courier, monospace;
.markdown code {
  @apply bg-gray-100 text-gray-800 px-2 py-1 rounded-md font-mono text-sm;

It's 06:53 - the blog is fixed. Let's start.

Now that my lists work and my code samples look nice, I feel I accomplished something today, therefore the immediate urge to stop for now also kicked in. Funny. The fact that now I am documenting the process, including the time I spend on different activities, makes me want to go forward. The time I have left until the kid wakes up is uncertain. It can be anywhere between now and in an hour. My goal is to sketch out how I am going to start, and to document that as well. I'll take the average and count on the kid waking up in 30 minutes. It's 06:59 now. This leaves me 15 minutes for sketching and 15 minutes for documenting and deploying.

The first sketch

It's 07:19. I am a bit behind schedule. But the kid is still not awake. I've done the first sketch. I am not happy about it, but this is how far I can get in 19 minutes. I'll also refill my coffee cup now.

The first problem

1. Figuring out the menu.

I want my family to help with that. My wife sometimes throws in some wishes that I currently need to keep in mind. Which I am very bad at. Alternatively, I would need to write it down somewhere, which I don't do. So this is the first thing I want to automate. I want to have a "Wishlist" functionality. Ideally, in my head, the wishlist feature has access to a recipe database, and my family could just directly choose what meals they like and put them on their wishlist. To start with, it's also fine if they just put the name of the meal and perhaps a link to a recipe or perhaps an Instagram picture they found online.

However, I got off track, and first, I start with the "overview" of the weekly menu, so I know what's the end result I kind of have in mind for the main screen.

Meal Tracker Overview Sketch v1

I want to have a weekly overview of what's planned for each meal...

It's 07:42. The kid woke up.

This is it for now. Will continue hopefully soon.