My Food

It all started when I opened Pinterest to find our favorite cornbread recipe. It was no longer there, the link was dead, the image blank, my favorite recipe was gone!

I quickly searched the internet to only find the recipe on a fragmented webpage full of overwhelming advertisements trying to get a click. Worried I would lose the recipe again, I copied the recipe to my notes.

After this experience and frustration of filtering through dozens of sites to read a recipe, I knew there has to be a better process. What started as a simple markdown site turned into an out-of-control static collection of recipes. Add in wanting the ability to edit the recipe, and I had a feature-lacking solution.

The Solution

MyFood.dev was created to provide a web-based solution to manage and store the recipes we create and use. It's more than just a simple digital recipe book—a few thoughtful features make cooking more efficient.

One of the pain points to using recipes on the internet is the volume of ads placed on the page. Nothing's worse than scrolling down to the recipe ingredients to only have an ad load and cause the browser to scroll back up or the entire page shifts around.

These pains drove me to create a simple layout without ads, no long story about how you can make this 15 different ways. One simple split screen with the ingredients on the left and instructions on the right.

I didn't stop with the simple layout. I added the ability to track the ingredients by the step you're on. As you move through the instructions, the ingredients for your step are highlighted, providing the right cue to what needs to be measured or mixed into the meal.

Check it out and let me know what you think. It's not feature-complete, and there's still a lot to do, but like everything, you have to start somewhere and just ship it.

The Tech

Now, I'm not a frontend developer, so all of this is out of my comfort zone. I've iterated a few times with frameworks, tools, and hosting providers. I've settled on Vercel as a hosting provider because of the ease to bring a Next.js application online.

Next.js 15 is the framework at the time of writing. I've really enjoyed the change from the pages router to the app router. It's really reduced the amount of boilerplate code throughout the site.

TailwindCSS is being used for styling over writing CSS stylesheets. I remember learning CSS in my younger years, but TailwindCSS has really bundled up CSS nicely, allowing me to not stress about the styles. Again, I'm not a frontend developer, so I've adapted nicely to this approach of styling.

MongoDB is the storage engine behind the site. I don't require a lot of storage currently, so this solution is simply tossing JSON back and forth, so a document-oriented NoSQL database made sense for now. MongoDB can also scale and adapt to my storage needs for the current list of features.

Clerk is one of the best discoveries of this entire project. I started with Auth0 for the identity system and was discouraged by the integrations or lack of integrations. Clerk's thoughtfully designed SDKs and ready-to-use TypeScript components are out of this world! What would have taken me months to create was now a simple component import. Clerk is handling the entire user sign-up and management flow for the site. Clerk also manages the billing and pricing panels across the site with integrations directly with Stripe. I was able to migrate my Auth0 integrations directly to Clerk within a couple of hours and have an entire configuration pushed to production in one evening.

What's Next?

It's a work in progress, and I have a decent list of features to make cooking at home so much easier. As time permits, these will appear in the platform and be ready to use.

Feel free to check it out at MyFood.dev