Samys-Cookbook

Making a simple app using React and Flask.

What

  • This will be a simple site to host my recipes.
  • It will have a react front-end, a flask back-end with a Sqlite(for now atleast) db.
  • I will have to learn both react (from scratch) and flask (of which I do have a basic knowledge).\

My Plans

Front-End (made on 20211105 00:15:45, I don’t know what will actually happen)

Nav bar

  • Home
  • Recipes
  • Skills
  • What can I make page
  • About

Home Page

  • A nice header image.
  • Display 5 (randomly) of each type of cards:
    • skills (how to do stuff like dice onions, boil your pasta, etc.)
    • recipes (actually making the stuff needed)
  • Recipe cards:
    • An image
    • The name of the dish.
    • The preparation time.
    • A short description.
    • The Difficulty level.
    • Veg or non-veg badge at the top.
  • Skills cards:
    • An image
    • The name of the dish.
    • The preparation time.
    • A short description.
    • The Difficulty level.
    • Veg or non-veg badge at the top.
    • How important the skill is

Recipes/skills Page

NOTE: These will be two separate pages

  • A list (maybe just a grid of cards) of all the recipes/skills (which can be filtered).
  • Clicking on which will open the page of the specific recipe/skill

Individual Recipe/skill pages

Separate pages for each (using templates i guess)

  • A header image
  • All the info on the card
  • Ingredients
  • Steps (clicking on a sentence which is a skill should include a link to that skill, for example: the line is ‘boil your pasta until al dente’, then it should be a link to the skill page of ‘boiling pasta’)
  • How to prepare or whatever else i will need

About Page

  • A link to my github, and socials(lol!).
  • And a short bio or such

What can I make page

  • The user should be able to select a number of ingredients. (and what to search: recipes or skills)
  • The site must then give back the possible recipes/skills which are possible with the given ingredients

Back-End

  • I need a rest api using flask
  • This is the first thing i will do

Routes:

  • /: the home page
  • /Recipes: the recipes page
  • /Skills
  • /Recipe/name: the page for an individual recipe
  • /Skill/name: the page for an individual skill
  • /get-recipes(workshop the name for this one): the page for the ‘what can i make page’, it will send a get/post (i don’t know which) request which will return the
  • /about
  • There will be an easter egg, find it if you can 😉

DB

  • Look at the database_design.graphml (or .jpg) file.
  • I don’t know how a db this complex will be stored, i might have to use plain sql cause i don’t know how the flask sqlalchemy stuff works.
  • this is going to be tricky

GitHub

View Github