Recipe Storage Web App

Written in python using Flask

App contains recipe creation and automated recipe ingredients amount calculation depending on how many person recipe serves.

Purpose

This project was made as part of the weekly programming challenge hosted by DevJam. The project was made for learning purposes.

What I learned

The project was once aging very interesting and I learned lots of things like using css media print, lots of javascript, and for example using white-space:no-wrap;. Project included adding html elements via button clicks and using database relationships.

Screenshots and Demo

Live Demo

Recipe creation | List of recipes | Recipe card

About the Challenge

🛠 Difficulty Level (of user stories): Beginner

📅 Start: December 30th
📅 Deadline: January 6th 16:00 (4PM) GMT

📝 Project Description

Like programs, recipes are a series of imperative steps which, if followed correctly, result in a tasty dish.

📑User Stories

• ✔️ User can see a list of recipe titles
• ✔️ User can click a recipe title to display a recipe card containing the recipe title, meal type (breakfast, lunch, supper, or snack), number of people it serves, its difficulty level (beginner, intermediate, advanced), the list of ingredients (including their amounts), and the preparation steps.

🌟 Bonus features

• ✔️ User can see a photo showing what the item looks like after it has been prepared.
• ❌ User can search for a recipe not in the list of recipe titles by entering the meal name into a search box and clicking a 'Search' button. Any open source recipe API may be used as the source for recipes.
• ❌ User can see a list of recipes matching the search terms
• ✔️ User can click the name of the recipe to display its recipe card.
• ❌ User can see a warning message if no matching recipe was found.
• ✔️ User can click a 'Save' button on the cards for recipes located through the API to save a copy to this apps recipe file or database.

✨ Custom features (not part of the challenge)

• ✔️ Automatical adding and reducing (not compleated yet) incrediants for certain amount of servings.
• ✔️ User can create complicated recipes with unlimited ingrediants.
• ✔️ User can copy recipe link via button
• ✔️ User can print recipe
• ✔️ User can see times recipe takes to compleate, prepare and cook.

✨📋 TODO Custom features (not part of the challenge)

• User can add tags to recipes and sort all recipes by tags.
• User can edit recipes they have made and admin user can edit all recipes
• ✔️ Admin user can delete recipes.
• Recipes cards show recipe creator.
• User can upload their own recipe images to the server and it will be saved in some 3rd party storage.
• Unit conversions (kg -> pounds for example)
• ✔️ Show saved recipes in different list.

Tech

The app is written in python using Flaks-library. Frontend is written in html5, css and vanilla js. Backend uses Flask sqlalchemy and flask-login. App is deployed in Heroku.

Frameworks and libraries:

• Flask - Micro web framework written in python.
• Flask-login - Flask-Login provides user session management for Flask.

Installation and running

This app requires python 3.7+ to run.

Clone git repo

git clone https://github.com/JesperKauppinen/quizapp.git

After cloning or downloading this git repo, install required python libraries

pip install -r requirements.txt

run app.py

python app.py

Deployment

App is hosted in Heroku. The deployment requires Procfile.

Database

for Database is used postresql and flask-sqlalchemy. Database structure

Contribute?

Want to contribute? Awesome!
This project was part of weekly challenges hosted by DevJam and won't be updated. Maybe you would like to work with us, hit me up and let's talk. :)

Credits

• Valio - Style of recipe page inspired from valio website.
• Card design - Cars design template.
• Fontawesome - Icons

Did I miss some credits, let me know and I will update them

License

MIT

Disclaimer

Images and text (recipes) may be copyrighted.