liqu0r is a Web based cocktail app that allows anyone to upload a recipe and share it with the world.

1. UX
   • Project Goals
   • User Stories
   • Developer Goals
   • Design
     • Color Scheme
     • Fonts
     • Wireframes
2. Features
   • Existing Features
   • Future Features
3. Testing
4. Deployment
5. Technologies
6. Credits & Acknowledgements

Lockdown Kitchen is part of my Code Institute Full Stack Software Development studies, the Data Centric Development module. The scope for this milestone project is to "Create a web application that allows users to store and easily access cooking recipes", using the CRUD operations of Create, Read, Update, and Delete for their recipes. My directive was to make an online cokctail app that users could find and share recipes, at the same time impoving their bussineses. Inspire, entertain and educate anyone—and everyone—interested in what happens in the glass.

• easily acces cocktail recipes from different kind of devices.
• all recipes in one place.
• find cocktails by spirits.
• find cocktails by ingredients I have at home.
• share cocktails by adding them to database.
• edit existing cocktails when I find a mistake or I have a better version of the recipe.
• delete recipes.
• send a feedback to the developer.
• get success or error message to know my feedback was successfully submitted.

• Provide a nice, easy to use online cocktail book where the user can create, edit, delete recipes, and filter them by categories and ingredients.
• Learn by practice about databases, Jinja templating, Materialize, and how to use Python with JavaScript.
• Get an insight into Heroku's platform.

To make an integrated design for this site I used Materialize Icons and Materializecss. The cards with borders, the logo with forms. The best-used components are cards. I choosed cards as container of the infos, recipes, and detailed descriptions because the structure of a card helps me to organize the information in a user-friendly way. For providing feedback and adding recipe I used forms with simply put placeholders.

The Colour scheme has modern colours. The supplementary colours are a mix of colours (white,grey,red) used in the cards that is throughout and at the Delete button I set red background color. It contrasts nicely with the text. The two most important colors are dark blue and the "brick brown"used for the Header/Navigation/Footer and the Feedback form.

The fonts I selected to this page are Arvo and Playfair from GoogleFonts because it fits perfectly to playful and clear-out theme of the site.

I made wireframes for each page of the site from three different type of devices:

1. Desktop

2. Tablet

3. Mobile

Back to Top

• the user can search for recipes sorting the results by ingredients.
• if there are no results found for the keyword, the user can quickly browse for other cocktails.

• the user can reach the list of all the available recipes on one page.

• the user can easily sort recipes by categories from the menu or from the recipe card itself.

• when the user clicks on the detailed recipe page at the bottom they can see a dropdown menu with More options, where they can choose between editing or deleting the recipe.
• if the user chooses to edit the recipe, it will pop up a form with the data of the selected recipe in an editable version.
• by hitting the delete button, the recipe will be removed from the database.

• the user can add a new recipe by using a form.
• the placeholders set in the form help the user how to fill it out.
• a dropdown menu contains the categories, so they can easily choose one.

• in the footer the user can find a feedback form which allows them to send their bug report, so I can fix them as fast as possible.
• to get the feedback I used EmailJS.
• after submitting the feedback, they get a success or an error message depending on the successfulness of the action.
• messages are set with timeOut.

• As we haven't learnt yet and it's not part of the requirements I didn't implement authentication.
• A comment section to leave advice or ideas to future users.
• To tag a recipe as favourite so the users may keep a list of all the recipes they enjoyed the most, to keep in their profile.

Back to Top

• The first phase of testing is a step by step basis. As I implemented a new code I did run the app on my localhost with the debugger on. If any of the Flask routes did not work, the debugger would catch them.
• If the routes are loaded, I tested them on Chrome and Firefox Developer Tools.
• I tested HTML with W3 Validator. I got an illegal character from Jinja2 templates. They are acceptable errors as Flask needs the templates to connect throughout the site.
• I tested CSS with W3 CSS Validator. I only got errors with misspelled variables, left commas, semicolons.
• I tested all the links to make sure they worked as intended.
• I tested the CRUD capabilities to make sure they all worked.
• All of the codes are validated and beatufied.
  • HTMLValidation:
  • CSSValidation:
    • No error found, valid.
  • JavaScript Validation:
    • No error found, code is syntactically valid.
  • PythonCodeChecker:
    • No syntax errors detected.
• I tested on my old Sony Xperia Z1 Compact and asked my friends and family members to check on their devices.
• I ran the application through Website Responsive Testing to make sure it is responsive. Below is a list of devices:

Back to Top

To deploy the site on Heroku, you have to follow these steps:

1. Create a Procfile with the terminal command echo web: python app.py > Procfile.
2. Create a requirements.txt: pip3 freeze --local > requirements.txt.
3. Login to Heroku and create a new app.
4. Push and commit your requirements.tx and Procfile to GitHub repo.
5. On the Heroku page of the app, click on the Deploy and then to the Connect to GitHub.
6. Select the repository and link to the Heroku collection.
7. Set the Config Vars in the Settings:
   • Debug: False;
   • IP: 0.0.0.0;
   • PORT: 5000;
   • MONGO_URI: mongodb+srv://<username>:<password>@<cluster_name>-qtxun.mongodb.net/<database_name>?retryWrites=true&w=majority;
   • SECRET_KEY: <your_secret_key>.
8. Go back to the Deploy page, click on the Deploy then on Deploy Branch.
9. The app is deployed on heroku, you can open by clicking on the Open app.

Ensure that you have these components:

• Pip
• MongoDBaccount and set up database.
• Python3
• Git

1. Download the repository from GitHub by clicking the "download zip" button. You can clone the respository with the following command: git clone https://github.com/kompeet/third-milestone-project
2. Unpack the files, then navigate them to the correct file location.
3. Create an env which has to contain the MONGO_URI and SECRET_KEY values.
4. Install all requirements from the requirements.txt file using this command: sudo -H pip3 -r requirements.txt
5. Create a Procfile and set the web scale. echo web: python app.py > Procfile heroku ps:scale web=1
6. Sign in to the MongoDB and create a new database.
7. Type to the terminal python app.py

The app's preview should be available.

Back to Top

• GitHub
• GitPod
• Heroku
• MongoDB
• HTML
• CSS
• JavaScript
• Jquery
• Materialize
• Python
• EmailJS
• MarkDownLit
• Balsamiq
• HTMLValidator
• CSSValidator
• JavaScriptValidator
• HTMLFormatter
• CSSBeautifier
• JSHint
• PythonCodeChecker
• ColorSpace
• GoogleFonts
• AmIResponsive
• Flask
• Jinja
• PyMongo
• PEP8

• Pretty Printed ~ YouTube
• Udemy
• I learned a lot from the Code Institute Data Centric Development Mini Project.Code Institute
• Threads from Stackoverflow
• I used w3schools instead of Google

• The Cocktail recipes and images from Liquor
• The error image from The empty glass

Special thanks to:

• Student Care Team for the understanding and supporting me. I was going through rough times in the past few months.
• Everybody who did take time to test this page and gave me feedback.

This project was created for educational use only as part of the Code Institute Full Stack Software Development Course for Milestone 3!

Peter Komaromi

Back to Top