I'm currently developing a local HTML site where I plan to showcase cooking recipes. The layout I envision involves creating a CSS grid that includes sections for the recipe name, image, and a list of ingredients. However, I'm facing a challenge in how to structure the ingredient data since the number of ingredients will vary from recipe to recipe. Instead of flattening everything into a single column with the format "flour, water, eggs" and their respective amounts, I'm looking for a more relational approach. I was thinking of using two separate Excel or CSV tables (one for recipes, and another for ingredients) and loading them as JSON to manage this in JavaScript. Is this method practical, or is there a better option to consider? I've also thought about using a relational database with Node.js, but that seems more complex than I need. Additionally, I want the data structure to be flexible enough to accommodate changes easily, like adding a new column for "recipe history" without having to modify each recipe manually in a JSON file. Any advice?
1 Answer
It sounds like you might want a database for better scalability, especially if your site might grow in terms of recipes. If you keep your recipes in a database, you can easily manage changes and updates without needing to mess with individual JSON files. For prototyping, though, using Google Sheets can be a good option; you can publish your sheet as CSV and fetch that data directly in your HTML. Just keep in mind that performance might vary, especially if you're loading a lot of data.
I've heard mixed things about using Google Sheets for this. Some say it can be a bit slow, but I wonder how much that actually matters in practice. Maybe just testing it out could give you a clearer idea!