Link to the deployed wesite heroku

Link to the GitHub repository github

Create a build a full-stack site for Build-A-Buffet, providing an authentication mechanism and paid access to facilitate the purchase of a product/service. Build-A-Buffet is a mail order catering service that creates buffet meals for: Wedding, Parties, Functions and Corporate Events. They provide a selection of menus at varying price points to suit the expectations of each event. There will also be the ability to have a menu built for the Customer; by input a range of criteria and having the site build the menu to suit the criteria (e.g. No. of guests, dietary requirements etc.)

The app should be designed ‘mobile first’, and should be equally as accessible through desktop and laptop devices. Navigation should be intuitive and errors handled gracefully.

1. … want to understand what Build-A-Buffet do; visually and quickly, without having to navigate through lots of information.
2. … want to be able to browse the different products and services.
3. … want to be able to create a bespoke menu by selecting from all produce.
4. … want to be able to have a menu suggested to me, based on my requirements.
5. … want to be able to choose from different dietary requirements (e.g. vegetarion, vegan)
6. … want to be aware of any allergy advice for each product.
7. … want to be able to see the price of each product and the total price of my basket at any point.
8. … want to be able to see the price per person where it is applicable.
9. … want to be able to make online purchases of products and services.
10. … want to be able to arrange delivery to a location in the UK of my choosing.
11. … want to be able to create a user page, where my personal information and order history is stored.
12. … want the site to be secure and my personal and payment information kept safe.

1. … to be able to maintain a list of products.
2. … to be able to track orders.
3. … to be able to track payments and webhooks

I designed the site around the following templates:

index.html - to introduce the user to the company and provide navigation to the other areas of the site.

allergies.html - to understand how different dietary and allergy requirements are accomodated.

products.html - to list all the products based on the user's menu selection.

search_products.html - to return all the products based on the user's search parameters.

product_detail.html - to provide more detail on each product including servings and options (where applicable).

basket.html - to view all the products currently in the basket.

edit_product.html - to edit the products currently in the basket.

checkout.html - a secure checkout where registered and guest users can make purchases.

order_success.html - to show an order has been processed succesfully and to show previous orders.

bartholemew.html - to assist the Customer in building an appropriate buffet, based on thier requirements.

bartholemew_output.html - to display to the the Customer Bartholemew's suggested buffet (along with cost information).

profile.html - to allow the Customer to store and update personal information and view order history.

service.html - to contact the Site-Owner through a question form.

For the Site-Owner ...

product_admin.html - to modify/delete: product, option or category.

add_product.html - to add: product, option or category.

Allauth libraries were used for sign up, log in and email validation

I produced the following mockups prior to writing any code. I had sourced the 'Grayscale' template from start bootstrap and stock images from pexels.com. I used this theme and these images in the mockups.

mobile

desktop

The core scheme of the app is the 'Grayscale' theme from start bootstrap

The main colour scheme is based on the 'GET STARTED' button on 'Grayscale'. I used variations of this colour to give a 'brand' to the site.

1. #303F3F for main text
2. #71B7B2 for mouseover text
3. #426765 for buttons and secondary text

The main fonts used in 'Grayscale' are:

1. font-family: 'Nunito'
2. font-family: 'Varela Round'

I used these fonts exclusively.

The approach I took for designing the site, was to start with the small media device, portrait view, design that, then make any adaptations for a tablet, portrait view, and finally any changes for a large size, landscape view.. I constructed the code in the mobile-first, portrait view, then added specific media queries for portrait and lanscape views. I again used code from stackoverflow.com to enable this. Finally, I added bespoke media queries for screen sizes. I also set font sizes to be responsive, utilising some code from css-tricks and made by Mike

font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

This code, along with using vw and vh for font sizes and certain features, such as banners and images, allowed the site to be almost fully responsive across different portrait view sizes.

... to understand what Build-A-Buffet do; visually and quickly, without having to navigate

1. Navigation Menu at top of screen
2. Link to bartholemew.html to assist the Customer in getting started
3. A Search Bar at top of screen
4. View of current basket
5. Information on food
6. A link to allergies.html for dietary info
7. Contact info at foot of screen

... to be able to browse the different products and services.

1. Menu list of products
2. Ability to search products

... to be able to create a bespoke menu by selecting from all produce.

1. Add products to Basket
2. Edit products in Basket
3. Delete products from Basket

... to be able to have a menu suggested to me, based on my requirements.

1. Input requirements and output menu based on requirements

... to be able to choose from different dietary requirements (e.g. vegetarion, vegan)

1. Dietary requirements captured
2. Dietery information presented

... to be aware of any allergy advice for each product.

1. Allergy requirements captured
2. Allergy information presented

... to be able to see the price of each product and the total price of my basket at any point.

1. Price per product is presented in the Basket
2. Total price is presented in the Basket

... to be able to see the price per person where it is applicable.

1. Price per person displayed only where number # of guests has been captured

... to be able to make online purchases of products and services.

1. Full (test) payment service available

... to be able to arrange delivery to a location in the UK of my choosing.

1. Delivery details captured

... to be able to create a user page, where my personal information and order history is stored.

1. Personal user page available
2. Previous orders can be viewed

... the site to be secure and my personal and payment information kept safe.

1. Secure user info
2. Secure payment info

... to be able to maintain a list of products.

1. Ability to administer products
2. Update or delete products
3. Add products

... to be able to track orders.

1. Track orders in Admin view

... to be able to track payments and webhooks.

1. Track payments through Stripe
2. Create Webhook orders that can be identified if used disconnects mid process
3. Track Webhooks through Stripe

It would be cool to go further with Bartholemew and investigate AI and natural language.

The schema for the relational tables can be found in schema

1. html - to create the structure and text of each page.
2. css - to style each page centrally and individually.
3. javascript - was used to power the Bootstrap functionality.
4. jquery - was used to power the Bootstrap functionality.
5. Python - for interactions between the app, the MongoDB database and the Azure cloud storage.
6. Bootstrap plugins - Responsive grid and prebuilt components to enable more responsive design; particularly “accordion” and “toggle” collapsed (hidden) content.
7. Font Awesome - for icons.
8. Figma - to produce the mockups.
9. w3 validator - for html validation.
10. jigsaw - for css validation.
11. pep8online - for Python validation.
12. Heroku - for the back end database.
13. Amazon Web Services - for cloud storage to host the uploaded images.
14. Django - to provide a web framework.

A Testing Matrix is in testing

This is constructed around the different User Stories and Features; tested against a number of devices and browsers. The findings of the testing are as follows:

There was an error in the console relating to the Bootstrap navbar element. The original js code is...

    // Collapse Navbar
    var navbarCollapse = function () {
        if ($("#mainNav").offset().top > 100) {
            $("#mainNav").addClass("navbar-shrink");
        } else {
            $("#mainNav").removeClass("navbar-shrink");
        }
    };
    // Collapse now if page is not at top
    navbarCollapse();
    // Collapse the navbar when page is scrolled
    $(window).scroll(navbarCollapse);

I altered it to the following to only run when mainNav was not null ...

    var navBarEl = document.getElementById('mainNav');
    if (navBarEl !== null) {
        // Collapse Navbar
        var navbarCollapse = function () {
            if ($("#mainNav").offset().top > 100) {
                $("#mainNav").addClass("navbar-shrink");
            } else {
                $("#mainNav").removeClass("navbar-shrink");
            }
        };
        // Collapse now if page is not at top
        navbarCollapse();
        // Collapse the navbar when page is scrolled
        $(window).scroll(navbarCollapse);
    }

2 error were found when testing this User Story:

1. A typo on bartholemew_output.html that stated "This total cost of this buffet is £100.50.". This was corrected to "The total cost of this buffet is £100.50.".
2. The total cost of the buffet as described by Barthgolemew does not match Basket total. This was due to a double-count in the bartholemew view when there was already an existing, identical item in the basket. I altered the code to include a new variable price_per_person which removed this double count.

There was an issue with the complete order button not functioning on checkout.html on the Microsoft Edge browser, but this was down to a previous version of the validation.js file (there was an invalid charachter in the phone number text box) cache-ing in the browser. Resetting the browser corrected this.

Automatic testing was used occasionally throughout the app, predominantly for testing validation rules, and splitting POST/GET variables.

To run automatic testing, enter into command line:

"python3 manage.py test" for all tests, or

"python3 manage.py test checkout" for specific tests (checkout as an example)

There was 1 particular bug that requred a solution.

1. The first was where items (Options, Products etc.) were duplicating. I needed to filter further on product.category matching basket.category. This wasn't working as expected, but with a little bit of research; I discovered the function of Slugify. This solved the problem as it converted the variable to the correct format to compare.

    {% if product.name == basket.name and product.category == basket.category %}

altered to

    {% if product.name == basket.name and product.category|slugify == basket.category|slugify %}

Solutions to User Stories

Screenshots that address the different User Stories.

Screenshots from w3 validator are in the folder validation/html. All of the residual 'errors' in the html code are acceptable to me as they don't take into account Django template code.

• add_product.html-validation
• allergies.html-validation
• bartholemew_output.html-validation
• bartholemew.html-validation
• basket.html-validation
• checkout.html-validation
• edit_product.html-validation
• index.html-validation
• order_success.html-validation
• product_admin.html-validation
• product_detail.html-validation
• products.html-validation
• profile.html-validation
• search_products.html-validation
• service.html-validation

Screenshots from jigsaw are in the folder validation/css

• styles.css-validation was uploaded with the start bootstrap theme. There are some residual errors in this off-the-shelf code.
• slider.css-validation
• checkout.css-validation
• bartholemew.css-validation

Screenshots from pep8online are in the folder validation/python

• bartholemew-python-validation
• basket-python-validation
• checkout-python-validation. 1 warning.
• home-python-validation
• products-python-validation
• profiles-python-validation
• service-python-validation

I deployed to Heroku by the following steps:

1. Create a new Heroku app.
2. Click on "Reveal Config Vars" to add any hidden environment variables.
3. Add the key of "SECRET_KEY" and the value of "...App secret key...", and click on Add, to set the secret key.
4. Add the key of "DATABASE_URL" and the value of "...Postgres database...", and click on Add, to utilise Heroku's database.
5. Add the key of "USE_AWS" and the value of "true", then click Add, to connect to Amazon web Services.
6. Add the key of "AWS_S3_REGION_NAME" and the value of "eu-west-2", then click Add, to connect to Amazon web Services.
7. Add the key of "AWS_ACCESS_KEY_ID" and the value of "...AWS access key...", then click Add, to connect to Amazon web Services.
8. Add the key of "AWS_SECRET_ACCESS_KEY" and the value of "...AWS secret key...", then click Add, to connect to Amazon web Services.
9. Add the key of "STRIPE_PUBLIC_KEY" and the value of "...Stripe public key...", then click Add, to access Stripe secure payments.
10. Add the key of "STRIPE_SECRET_KEY" and the value of "...Stripe secret key...", then click Add, to access Stripe secure payments.
11. Add the key of "STRIPE_WH_SECRET" and the value of "...Stripe webhook key...", then click Add, to access Stripe Webhooks.
12. Add the key of "EMAIL_HOST_USER" and the value of "[email protected]", then click Add, to create an email client.
13. Add the key of "EMAIL_HOST_PASSWORD" and the value of "...email password...", then click Add, to create an email client.
14. Set the app to automatically deploy from GitHub by selecting GitHub on the Deploy tab.
15. Enter the repository name (FS-MS-Project-Build-a-Buffet ) and click Search.
16. Click Connect next to the repository name.

To push to Heroku from GitPod (from the command line...)

1. pip3 freeze --local > requirements.txt to create a requirements file.
2. echo web: python run.py > Procfile to create a Procfile.
3. npm install -g heroku
4. heroku login -i (enter Heroku credentials)
5. git remote add heroku https://git.heroku.com/build-a-buffet.git
6. heroku ps:scale web=1
7. git push -u heroku master

1. From the FS-MS-Project-Build-a-Buffet repository in Github, click ‘Clone or download’.
2. Copy the URL to your clipboard.
3. In Gitpod, open the terminal.
4. Change the directory to that where you wish to place the files.
5. Type ‘git clone’ then paste the URL.

1. Type into the command line:
   • pip3 install Django
   • pip3 install django-allauth
   • pip3 install pillow
   • pip3 install django-crispy-forms
   • pip3 install django-countries
   • pip3 install dj-database-url
   • pip install psycopg2-binary
   • pip install psycopg2
   • pip install gunicorn
   • pip3 install boto3
   • pip3 install django-storages
   • pip3 install stripe
   • python3 manage.py runserver

Alternatively, type "pip install -r requirements.txt" to install all addins from requirements file, then "python3 manage.py runserver".

1. The formula (calc(10px + (48 - 10) * ((100vw - 300px) / (1800 - 300)))) for responsive font sizing is from css-tricks and made by Mike
2. The method for aligning text vertically is from webdevblog
3. The method to adjust styling based on landscape or portrait orientation is from stackoverflow
4. The slider is from w3schools
5. Creating a cookie in javascript is from w3schools
6. Passing context from Django to Javascript is from stackoverflow
7. Inserting a row into a database with Django is from stackoverflow
8. ObjectDoesNotExist: is from stackoverflow
9. Get a single objects value is from http://morozov.ca
10. Using aggregate and dict is from stackoverflow.com
11. Django model.AutoField is from www.fullstackpython.com
12. Order by ascending and descending is from stackoverflow.com and stackoverflow.com
13. Limit number to 2 decimals is from tutorialdeep.com
14. Getting the current user is from stackoverflow.com
15. Using an hr to mimic a br is from stackoverflow.com
16. Formatting date is from ourcodeworld.com
17. Getting the first row from a queryset is from stackoverflow.com
18. Combining two or more querysets is from stackoverflow.com
19. Getting the image from the Django form is from stackoverflow.com
20. Making a form field readonly is from stackoverflow.com
21. Get the last n chacters of a string is from c-sharpcorner.com
22. Converting to string in templete is from stackoverflow.com
23. Adding linebreaks to messages is from stackoverflow.com
24. Sending html email is from stackoverflow.com
25. Making a div appear for 2 seconds is from stackoverflow.com
26. Form validation is from javascripttutorial.net
27. Fixing the uncaught error in the navbar is from stackoverflow.com
28. Getting a random sample from the dataset is from stackoverflow.com
29. Formatting to 2 decimal points is from stackoverflow.com

The code for:

1. checkout: admin.py, forms.py, models.py, views.py, checkout.css and stripe_elements.js
2. profiles: forms.py, models.py and views.py are all built upon code from the Code Institute tutorial project 'boutique-ado'

1. All images were taken from pexels.com
2. The image for Bartholemew was purchased on licence from gettyimages
3. The allergy graphics were purchased on licence from gettyimages

I would like to thank the following people for thier support and input:

1. My mentor, Precious Ijege for his knowledge and clear direction (it was he who made it very clear that a detailed set of mockups were vital - this is knowledge I will keep with me for the rest of my career!)
2. My friends Scott and Magoo, who I consulted before I started the FSD course, and gave me the confidence to go for it!
3. Annie for being the most supportive person ever!