code-institute-submissions / the-virtual-food-court Goto Github PK

The Virtual Food Court

A page created for easy creation and browsing of recipes.
Go to Website (to be added)

My Github Page . LinkedIn . Contact Details

This is a pretty straightforward recipe page aiming at providing an easy and motivating space to create and browse recipes. Many of the features are based on what I personally like in a recipe page, since as a food lover, I look for recipes online regularly. I have also gotten input from colleagues and friends on what they think is important when browsing a recipe page. Features inspired directly from specific pages will be added under acknowledgements, with a link to the page.

Page features in a table view

• Big and medium screen wireframes (pdf)
• Small screen wireframes (pdf)

This has been updated from the original database structure, since I realised there were some easier ways to get things from the database. Instead of having the food types separately as keys with the values of "on/off" (ex. "breakfast": on), I am adding a single key (food_category) which will have the value of each food type item that gets picked when creating the recipe. To see my old structure, here is the link. I also added a "title" key for the simple reason that I missed adding it originally, but it was already planned into the page structure.

(back to top)

• HTML5
• CSS
• JavaScript
• jQuery
• Python
• Flask
• MongoDB
• Bootstrap
• Gitpod
• Github
• Google Fonts

(back to top)

As a non-logged in user I want to:

• Upon entering the page, clearly locate all my options as to what I can achieve on the website (browse recipes, register to create, edit and delete my own recipes)
  • by having a simplistic and clear design focusing on UX and CRUD
• Feel excited to use the recipes found on the website
  • by having a good template for showcasing recipes that is easy to read and understand, with interesting images to draw people in
• Have many options to choose between for every mood and meal
  • by having categories for different meals such as breakfast, lunch, dinner and dessert

As a logged in user I want to:

• Upon logging in, find what I can do as a registered user of the page
  • by having the new options displayed clearly on the home page and in the menu
• Create, edit and delete my own recipes with ease
  • by having a clear and simple submit form with instructions that makes sense to everyone
• Have the option to end my membership
  • by having a button displayed in a corner as to not click on it by accident

(back to top)

The site was deployed to Heroku. Below is a list of the steps I took to get my page up and running.

1. I installed the dependencies needed for the project, and saved them in a requirements.txt file.
2. I created a Procfile to let Heroku know which file to run. I used the command: echo web: python app.py.
3. Logged in to Heroku and created my new app. The exact name I wanted to use for the app was available (the-local-food-court).
4. Since I am based in Europe, I chose EU for region.
5. I chose automatic deployment for this project, by going to the deploy tab in Heroku, picking GitHub for the deployment, and chosing my project repository before clicking on "connect".
6. Next step was to go to settings > "reveal config vars" and added the varables listed in my env.py file.
7. Enable automatic Deployment.
8. All done!

Link to Github issues section

1. Create the database ✅
2. Start on the base html for header, footer and other repeatable elements ✅
3. Create the rest of the front end content (not being too focused on details) ✅
4. Create browse recipes/ view recipe function ✅
5. Create register/log in/log out/delete account features ✅
6. Create add/ edit/ delete recipe ✅
7. Fine-tune ⬜
8. Testing ⬜
9. Deploy website ✅

• After having a talk with my mentor, I decided to change the layout of the how-to section in view-recipe.html slightly. Instead of having one big block of text with no breathing room, I now have list items separated with some room in between each other. In MongoDB the how-to attribute changed from a string to an array. This will also change the layout of the create-recipe page, since I will have to cater for the list items. I will make the input for the how-to section the same as for the ingredients input.

• I decided to remove the "clear recipe" - button in create-recipe.html since it is possible to remove the contents of the form manually and I wanted to make sure I had enough time to have good quality code for the more essential functions that would "make or break" the page.

• The columns in the create-recipe.html form was originally meant to be 3 horizontally aligned medium and bigger screen sizes. (See layout in my wireframes). But once it was created and I tested adding information to the forms, I saw that it looked too messy and decided to change the layout to max. 2 columns aligned horizontally. The how-to textarea needed a full col-12 (Bootstrap) since it generally gets more text than the other inputs.

• In the recipe preview cards I added additional information to the header. So instead of just a title and a preview of the recipe how-to section, the user can also see portions and time required. In my wireframes I added images as part of the cards too, but due to lack of time, I will unfortunately have to drop that.

• link to testing doc

(back to top)

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Send me an email
Or contact me on LinkedIn
Want to browse my other projects on GitHub?

(back to top)

• GitHub Docs
• README template from othneildrew
• Markdown Guide for customising README
• Cheat sheet for emojis

• Logo from clker-free-vector-images on Pixabay #
• cdnjs
• Stack Overflow
• W3 Schools
• Geeks for Geeks
• Flask official documentation
• Jinja official documentation
• Python official documentation
• jQuery official documentation
• Bootstrap
• Code institute mini project
• W3C markup validation service
• W3C CSS validatoion service
• JSHint
• pep8online
• WAVE web accesibility evaluation tool
• Google Fonts

(back to top)