I'm a terrible cook. There's nothing I can do about that. What's more, I hate grocery shopping. So why spend an entire week on an app that helps do both of these things? Because I figured one week working on an app would save me countless hours and a lot of money spent on doing these two things that I dread so much.
Enter Plan to Cook: a personal web application and API that helps me whip up quick shopping lists, keep track of recipes, and go shopping more easily.
Project Process
Plan to Cook was both designed as a programming exercise as well as a small convenience app. I started and finished the project in about a week, and my wife and I have used it every week since. The app works in three steps:
- Find a meal you like
- Add it to your meal plan
- Go shopping for ingredients (listed automatically)
But while the app is simple, building it was another story. I had several layers of architecture to overcome. First, I had to implement a database. I chose Mongod for its easy implementation and flexibility in storage. Next, I had to create an API so that I could actually save recipes and other information into my database. I built the API via Node.js + Express. At long last, I was able to build the user interface. I decided to go with React.js for the front-end, because the website I wanted to build was very compartmentalized and modular, as well as heavily data-driven. Once I had all these three things in place, it was a matter of adding more and more features to the app until it was ready to go!
Final Result
The final result is a simple web app and API, and is used pretty much by me and my direct family, which was exactly its intentions. I have reached out to Kroger, Walmart, Amazon, and some other places to see if there is any interest in commercializing it, but for the time being, it does exactly what it needs to: saves us money on groceries and cuts down on the amount of time spent in the store.
Here are a few screenshots of the app in production:
Plan
Shop
