Confidently Incorrect since 1987
The set-up
So I have been continuing to code whilst looking for my first Apprenticeship (Alternance, here in France) job as a software dev, as I have said previously I have been continuing following The Odin Project curriculum, but have recently had my focus switched onto a personal side-project that I had been toying with whilst I was studying at Ada Tech School, a website where people could curate their own collection of recipes from a variety of different, well known, recipe/cooking websites.
The initial inspiration was seeded when I stumbled across a web-scraping library made in Python for the express purpose of scraping from these popular recipe resources, recipe-scrapers.
My initial, now long abandoned, plan was to use Next/Nuxt to create the front-end and have the back-end be in Python, to allow me to use the recipe-scrapers library, and to use Supabase to organise the database of users and their collection of recipes, and allow the users to enter a list of ingredients and be presented with a selection of recipes from their own curated collection that contained those recipes, allowing people to get some inspiration on what to cook based on the ingredients available to them at the time. Using the recipe-scrapers library, I would have allowed them to enter a URL to add a recipe into their collection, as well as a page displaying all the recipes currently stored in the collection and allow them to delete any they no longer wished to be included. Nothing too crazy, a pretty sweet simple idea, which I would make sure was responsive enough to look good when viewing on a phone.
A week or two of work, and it’ll be done….
The ==real== beginning
So with all the confidence of someone about to discovery how incorrect he was, I went about setting up a Nuxt project in my frontend directory, and very quickly got lost in the bells and whistles and functionalities included, all of them very useful and baked in, but quickly realising that, in reality, all I really wanted was to practice using Vue, so with a quick back track and a quick Vite install of Vue3, I was back to square one, albeit with a tiny sliver more of understanding of where and when to use Nuxt, namely, in a bigger and more complex project and in the future when I had a touch more experience.
The next step then was to get my backend directory set-up, that should be a bit simpler, I’ve used python a little bit before, no need to dive into Django, I knew that Flask was a relatively lightweight framework that I could use for my backend, and I was pretty certain it would have the essentials that I needed for my project…and at least so far I was correct.
But boy did I not anticipate virtual environments and dependency issues….
Virtually environmentally dependent
My previous experience with Python had been pretty shallow, just writing little scripts and following a few tutorials, making simple console based games and such. Setting up a virtual environment wasn’t necessarily difficult, although not the simplest thing I have done since starting to learn coding, it is obviously very useful. Creating a customisable environment, where I define the version of Python I want to use and install the needed libraries in a local environment, stopping me from polluting my global python environment with relatively specialised and particular libraries.
The real issue was after setting up my virtual environment and installed the recipe-scrapers library and it’s dependencies…..it didn’t work.
Now, it had been a couple of months since the last time I had tried using the recipe-scrapers library, but I couldn’t see why it wasn’t working. My initial instinct was that I had made a mistake in my code, but eventually after verifying it was correctly implemented, I thought perhaps I had made a mistake with setting up my venv (virtual environment), that being the most recent technology that I had implemented, but after removing it and setting it up again, and no obvious issues… I was stumped….for at least 3 days (more like a full week, if I am being honest…)
Eventually I went back to the GitHub for the library and checked out the raised Issues, and lo-and-behold, right there at the top is someone pointing out that :
Adding lxml>=5.0.0,<5.1.0 to requirements-dev.txt and reinstalling via pip resolved this issue for me.
Ahah! Sweet relief, it wasn’t my own stupidity causing issues, but some dependency for the recipe-scrapers library having a breaking update! And the solution is right there, thank god for disconsented!
This sent off on a short detour exploring the use and usefulness of a requirements.txt file (A pythonesque json.lock file which lists all the necessary libraries and the version required), and solved my issue.
Finally, a working recipe-scraper!
Preparations Complete….now what?
So finally I had everything in place. My root directory had backend and frontend directories, with a Python virtual environment set up with Flask framework structure in place, and a working recipe-scraper library, and a vite-Vue project set up in my frontend directory.
The next step is planning the architecture of the site and figuring out what routes I would need to define, what kind of different pages I would need, what functionality I want to include for the MVP….wait, I’m forgetting something….
Basic Databasing
The final part of my set-up tripod, a database! So my initial thought was to use a SQL based database with tables everywhere, with the help of a colleague I had sketched out a fairly basic schema for my relational database….but with a bit of reflection, and realising that recipe-scrapers was returning a JSON, I decided to look into MongoDB, knowing that it’s document based system might not be more suitable to my application, with storing recipes as documents in a collection for recipes and the relevant information (Title, Image, Time to cook, Ingredients, Cooking Instructions) and having a separate collection for Users (Username, email, password). So using the MongoDB Atlas online set-up, I created a basic database, and using the connection string provided, I will be able to connect from my backend to my database!
The End of the Beginning
So for now I have all the pieces in place and ready, and will need to give some thought to sketching out the architecture of the site itself, and roughly sketching out the API routes. In my next article, I will detail the next steps I have taken and how the structure of the actual site began to take form and evolve, as well as more of the details of the actual code being used in the front and back ends.
Until next time, be safe and stay happy, thank you for taking the time to read my little side project introduction and set-up.
