Data - Centric Development Project, MS3-Code Institute

Chocolate Heaven

Visit deployed site

Table of Contents

• Demo
• UI/UX
  • Project goals
  • User Stories
  • Developer goals
  • Design
    • Research
    • Wireframes
    • Color Palette
  • Defensive design
• Features
  • Notes
  • Existing features
  • Future features
• Information Architecture
• Technologies used
• Testing
  • Validators and linters
  • Manual testing
  • Errors
• Deployment
• Credits
  • Code
  • Images
• Acknowledgements
• Disclaimer

Demo

UI/UX

Project goals

Chocolate Heaven is milestone project for Code Institute Data Centric Development module. The goal of this project is to create, store, edit and delete recipes (CRUD operations).

User Stories

As a User I would like to:

• Be able to register to have my own profile.
• Be able to browse and navigate information easily.
• Browse recipes by category
• Submit my own recipes
• Sign up or Sign in with user friendly form
• Edit and delete my own recipes, without others tampering with my submitted recipes.
• Get feedback for submitting/editing/logging in/logging out
• Access a list of all recipes
• Get error messages in case user has done something wrong or there is an issue with database.

As an admin I would like to do all of the above plus:

• Be able to access, edit and delete ALL recipes and categories from admin profile

Developer goals

• Provide a simple, easy to use online cookbook where user can browse, post, edit and delete recipes, filter them by categories, search by text, subscribe and have profile.
• By practice learn Jinja templating, Python, non-relational database MongoDb
• Improve Bootstrap and JavaScript knowledge.
• Learn to use Heroku Pages

Design

Main inspiration for the page design comes from purdys which has an extraordinary selection of chocolates and the variety is well documented and illustrated.

Fonts used: Bubblegum Sans, Emilys Candy, Rye, Special Elite imported from Google Fonts.

Research

Wireframes

I created my wireframes during the Scope Plane of this project. I made wireframes for each page of the site from three different type of devices:

• home_page
• recipes_page
• recipe_page_front
• recipe_page_reveal
• log_in
• register
• add_recipe_form

The implementation ended up slightly different.

Color Palette

With this color scheme I've tried to match as much as possible all the sites with the same theme and products. These standard Materialize Colors work quite well for my project.

Defensive design

• User is not able to break the site by clicking buttons out of the expected order.
• All forms handle empty input fields by warning the user and not permitting recipe submission.
• Navigating between pages via the back/forward buttons does not break the site.
• User errors do not cause database errors.
• User is given feedback for actions/errors by a 404 error page.

Features

Notes

• Not as a footnote but as a first mention: due to the limited time at hand (less than a week!) I had to structure everything to a bare minimum of functionality and layout.
• Admin features will not be available publicly for security reasons. Admin is able to browse, edit and delete all recipes and categories.
• Only as admin can view, edit or delete categories.
• Recipes can be viewed publicly by every user, but only can be edited by the user who created the recipe, specificaly.
• The use of JavaScript is limited only as Jquery to permit Materialize framework to take actions for the componets used.
• Materialize uses activator for cards so I've chosen to leave it without a proper intuitive button.
• Media queries are not all set for larger screens so the cards may overflow from their margins.

Existing features

• Favicon
• Navbar with submenu for the profile user;
• User logged in can view the edit function of the recipes;
• Admin can add, edit and delete categories and recipes;
• Title of the recipe;
• List of ingredients formatted with split() method;
• The recipe's Instructions;
• The picture of the recipe;
• The category of the recipe;
• More options with:-- Edit -- Delete -- Create
• Register;
• Login;
• Search on both home and recipes page;
• Links as shortcuts for smother navigation;

Future features

• Pagination
• Scroll back to top button
• Recipe image url validation
• Tooltips
• Add reviews
• Add prep and cooking time
• Ingredients and Instructions listed in arrays instead of strings
• Lazy loading images
• Calories calculations
• Server side credential validation
• SSL certificate
• Contact form and admin to be able to see all recieved messages directly in the admin console

Information Architecture

MongoDB Atlas is used for storing data for this web site.

Current schema:

Technologies used

Below are a list of the programming languages, technologies, frameworks and resources used for this website.

• HTML;
• CSS;
• Jquery;
• Python;
  • Flask;
  • Jinja;
  • Werkzeug security
• MongoDB;
• Materialize
• GitHub;
• GitPod;
• Heroku;
• MarkDownLit;
• GoogleFonts;
• FontAwesome
• Favicon;
• Google Chrome Developer tools
• Cloudinary.com to store all images
• EZGIF to convert demo video to gif

Testing

Devices and platforms used for testing:

• Google Chrome.
• Mozilla Firefox.
• Opera.

• laptop, laptop with touch (width 1440px);

• Galaxy S5;

• Pixel2, Pixel 2XL;

• Iphone 5/SE, Iphone 6/7/8;

• Iphone 6/7/8 Plus, IphoneX;

• Ipad and Ipad Pro;

Validators and linters

• W3C HTML Validator Passed tests without issues
• W3C CSS Validator
• JSHint
• PEP8 and AUTOPEP8.

Manual testing

Errors

• Searching function as a query for recipes might land to the error 404 page. It's a function in progress not yet perfectly implemented.
• Most of the errors I encountered along the way were simply syntax mistakes.

Current issues:

• Some of the text or image may overflow due to the unfinished Css.
• Seach function as mentioned is a 'work in progress'.
• Images uploaded may not have the standardized size or may render unevenly.

Deployment

This project can be ran locally by following the following steps: (Steps may differ in GitPod/Windows/Linux. I used Visual Studio Code on MacOS)

Create a free account on Cloudinary.com download my media or create your own.

Visit this repository link and click on the Clone or Download button to copy the link provided.

In your IDE, open a Terminal window and change to the directory where you want to clone this repository and type:

for macOS:

$ cd /Users/user/my_project

for Windows:

$ cd C:/Users/user/my_project

and type:

$ git init

$ git clone https://github.com/morphy80/chocolate-heaven-ms3.git

After pressing Enter the project will be created and cloned locally.

(Alternatively you can download the zipped file, decompress it and use your IDE of choice to access it.)

Create a free account on MongoDb and reproduce the 4 collections as described here.

Make sure to upgrade PIP.

$ pip install -U pip 

Install all dependencies

$ pip3 install -r requirements.txt

Activate virtual environment

$ source env/bin/activate

Create .env file with following data

MONGO_URI=mongodb+srv://...
SECRET_KEY_FLASK=superdupersecretkey

Add your .env file to .gitignore

In the last line of app.py file change from debug=False to debug=True

You will then be able to run the app locally by typing python app.py or flask run.

Heroku

Heroku was chosen as the deployment platform for this project. The steps to deploy the local app to Heroku were as follow:

In Heroku, create an app. The app must have a unique name.

Link that app to the GitHub repository by going to the "Deploy" tab in the main app menu.

In the Settings tab, add the corresponding Config Variables as present in local development:

MONGO_URI mongodb+srv://...
IP 0.0.0.0
PORT 5000
SECRET_KEY superdupersecretkey

Created "Procfile" by typing:

$ echo web: python app.py > Procfile

Push repo to Heroku

$ git push heroku master

After these steps the app is live and running remotely in Heroku's servers.

Credits

Code

Images

Images are mostly taken from Unsplash and Google Images.

Content

• Recipes taken from various websites, some of them linked in the Tips section.

Acknowledgements

Big thansk to tutor support team : Code Institute Tutor support (especially Tim Nelson for tutorial and tips), Igor, Kevin, Scott and Miklos and all Slack community.

Special thanks to my coding budy and friend Sabine M.

Disclaimer

This project is for educational purposes only.

Alexander Apostoiu

2021

Back to top ↑