GitHub - Ant2210/keto-kreations

Welcome to Keto Kreations, where delicious meets nutritious! Our mission is to fuel your body and delight your palate with a delectable array of ketogenic culinary wonders. At Keto Kreations, we understand the importance of embracing a low-carb, high-fat lifestyle, and we've curated a collection of mouthwatering products to support your journey.

Indulge in guilt-free treats, savory snacks, and wholesome staples that adhere to the principles of the ketogenic diet. From satisfying your sweet tooth with our luscious sweet treats to discovering innovative and flavorful twists on traditional favorites, Keto Kreations is your go-to destination for all things keto.

Our commitment goes beyond mere products; we're here to inspire and empower you on your wellness journey. Immerse yourself in a world of taste and health as you explore the culinary delights that Keto Kreations has to offer. We believe that eating well should never mean sacrificing flavor, and we've made it our mission to prove it.

Fuel your body, delight your palate. Dive into Keto Kreations, where every bite is a celebration of delicious, nutritious living. Welcome to a world of mouthwatering possibilities – your keto adventure starts here!

Keto Kreations was created as my fourth and final milestone project for the Code Institutes Level 5 Diploma in Web Application Development.

View the live project here.

User Experience (UX)

User stories

As a...	I want to be able to…	So that I can…
Viewing and Navigation
Shopper	Immediately understand the purpose of the site	Tell quickly whether this site is going to be of interest to me
Shopper	View a list of products	Select some to purchase
Shopper	View individual product details	Identify the price, description, product rating, product image, available size, allergens, ingredients and nutritional information on products I would like to purchase
Shopper	Quickly identify deals, clearance items and special offers	Take advantage of special savings on products I'd like to purchase
Shopper	Easily view the total of my purchases at any time	Avoid spending too much
Shopper	See what past customers think about the products	Can make a more informed decision about the products I am purchasing
Registration and User Accounts
Registered User	Easily register for an account	Have a personal account and be able to view my profile
Registered User	Easily login or logout	Access my personal account information
Registered User	Easily recover my password in case I forget it	Recover access to my account
Registered User	Receive an email confirmation after registering	Verify that my account registration was successful
Registered User	Have a personalised used profile	View my personal order history and order confirmation, and save my payment information
Registered User	Have my email address verified by the site	Ensure my email address and personal data are safe and secure
Registered User	See my past order history	Make repeat orders
Registered User	See my past reviews	Jog my memory on products I liked or disliked in the past if I haven't purchased in a long time
Sorting and Searching
Shopper	Sort the list of available products	Easily identify the best rated, best priced and categorically sorted products
Shopper	Sort a specific category of product	Find the best priced or best rated product in a specific category, or sort the products in that category by name
Shopper	Sort multiple categories of products simultaneously	Find the best priced or best rated products across broad categories such as 'sweet treats' or 'condiments'
Shopper	Search for a product by name or description	Find a specific product I would like to purchase
Shopper	Easily see what I've searched for and the number of results	Quickly decide whether the product I want is available
Shopper	Easily see if a product is out of stock	Quickly see that the product I want isn't available for purchase
Shopper	Save my billing and shipping details	Checkout even quicker and more conveniently on future orders
Shopper	Leave my views and feedback about products	Help future shoppers make informed decisions about purchases
Shopper	Edit/Update my reviews	Change my review if I change my mind about a product or the the product quality changes over time
Shopper	Delete my reviews	Remove my review if I feel it is no longer accurate but don't want to leave any further reviews
Purchasing and Checkout
Shopper	Easily select the size and quantity of a product when purchasing it	Ensure I don't accidentally select the wrong product, quantity or size
Shopper	View items in my bag to be purchased	Identify the total cost of my purchase and all items I will receive
Shopper	View the total cost of my purchase before checking out	So that I can see what the total cost of my purchase is including any additional costs such as shipping are before making my final purchase
Shopper	Adjust the quantity of individual items in my bag	Easily make changes to my purchase before checkout
Shopper	Easily enter my payment information	Check out quickly with no hassles
Shopper	Feel my personal and payment information is safe and secure	Confidently product the needed information to make a purchase
Shopper	View an order confirmation at checkout	Verify that I haven't made any mistakes
Shopper	Receive an email confirmation after checking out	Keep the confirmation of what I've purchase for my records
Shopper	Contact the store easily with any questions or concerns	Get further information about a product or purchase
Shopper	See what discounts have been applied to my order	Identify the total cost of my purchase after discounts are applied
Shopper	See at a glance if there are any items in my shopping basket	See quickly at a glance if there are any items already in my basket
Shopper	Be informed if the store doesn't have enough stock to fulfill the amount I need	Only order the amounts currently available so as not to cause any delays with my order or have to deal with refunds later on in the sale cycle
Shopper	See how much I need to spend to qualify for free shipping	Ensure I am getting the best value on potentially larger purchases
Shopper	Be able to checkout without registering for an account	Checkout quickly and easily even if I don't want to register for an account with the store
Admin and Store Management
Store Owner/Staff Member	Add a product	Add new items to my store
Store Owner/Staff Member	Edit/Update a product	Change product prices, descriptions, images and other product criteria
Store Owner/Staff Member	Delete a product	Remove items that are no longer for sale
Store Owner/Staff Member	Manage Stock levels	Keep track of available inventory
Store Owner/Staff Member	Add a discount code	Add new discount codes to my store
Store Owner/Staff Member	Edit/Update a discount code	Change discount amounts and criteria and whether or not the codes are currently active or note
Store Owner/Staff Member	Delete a discount code	Remove discount codes that are no longer valid or required

Design

Colour Scheme

The colour scheme was primarily crafted with a focus on aesthetics and accessibility. I decided to go with a simplistic and minimalist style choice, mostly using the Bootstrap colour pallette, this minimalist and understated approach I feel provided an excellent contrast against the vibrant colours of the food/product pictures, allowing the products themselves to shine through the design.

Main Colours Used
- Text colour 1 - Dark Blue #084298
- Text colour 2 - Bootstrap Standard Black #212529
- Text colour 3 - Bootstrap Standard text-muted class rgba(33, 37, 41, 0.75)
- Background colour - #ffffff
- Button colour 1 - Bootstrap primary class #0d6efd
- Button colour 2 - Bootstrap success class #198754
- Button colour 3 - Bootstrap danger class #dc3545
- Button text colour - #ffffff
- Badge colour 1 (sale) - Bootstrap danger class #dc3545
- Badge colour 2 (new) - Bootstrap primary class #0d6efd
- Badge colour 3 (out of stock) - Bootstrap warning class #FFC107
- Badge text colour 1 & 2 - #ffffff
- Badge text colour 3 - Bootstrap Standard Black #212529

Colour Accessibility

To ensure the colours chosen met the WCAG 2.1 AA guidelines as minimum and AAA guidelines where possible as with previous projects I used Coolors Contrast Checker which can be found here. However Coolors doesn't support rgba so for these colours I used Siege Media which can be found here.

For further information on these guidelines, you can visit the following link. Web Content Accessibility Guidelines (WCAG) 2.1 (w3.org).

Colour Palette and Results
- Text Colour 1 - Coolors Contrast Checker
- Text Colour 2 - Coolors Contrast Checker
- Text Colour 3 - Siege Media Contrast Checker
- Button Colour 1 Text - Coolors Contrast Checker
- Button Colour 2 Text - Coolors Contrast Checker
- Button Colour 3 Text - Coolors Contrast Checker
- Badge Colour 1 Text - Coolors Contrast Checker
- Badge Colour 2 Text - Coolors Contrast Checker
- Badge Colour 3 Text - Coolors Contrast Checker

Typography

The main considerations for the font were aesthetics and accessibility. I chose the Roboto Condensed font as a personal preference as I like the way it looks on the page. It is also a very widely used font developed by Google.this ensures a fairly wide availability across devises.

Fallback Font

For my fallback font I have opted to stick with the Google recommended fonts when downloading the Roboto Condensed font, if no fonts can be found on the user system is will default to the sans-serif family which has many widely used fonts including Arial. Arial is the most widely used font for both online and printed media. Arial is said to be one of the safest web fonts, and is available on all major operating systems.

Imagery

Logo

The Keto Kreations logo was created using Logo.com which can be found here.
Welcome Image

The welcome/hero image was found at Freepik here Attribution - Image by master1305 on Freepik
404 Image

The image used on the 404 page was found at Freepik here Attribution - Image by pikisuperstar on Freepik
Product Images

All product images were also sourced from Freepik, all of the attributions for these images are in the below table.

Product	SKU	Attribution
Keto Bread	PAN-BRE-BRE	Image by mdjaff on Freepik
Keto Bread rolls	PAN-BRE-BRR	Image by azerbaijan_stockers on Freepik
Keto Bagels	PAN-BRE-BAG	Image by atlascompany on Freepik
Keto Fusilli Pasta	PAN-PAS-FUS	Image by azerbaijan_stockers on Freepik
Keto Spaghetti Pasta	PAN-PAS-SPA	Image by azerbaijan_stockers on Freepik
Cauliflower Rice	PAN-PAS-CAU	Image by senivpetro on Freepik
Keto Brownies	SWE-CAK-BRO	Image by wirestock on Freepik
Keto Cookies	SWE-CAK-COO	Image by Freepik
Keto Popcorn	SWE-POP-POP-120	Image by topntp26 on Freepik
Keto Caramel Popcorn	SWE-POP-CAR-120	Image by Racool_studio on Freepik
Keto Protein Bars	SWE-BAR-PRO-120	Image by Freepik
Fat bombs	SWE-CAK-FAT-180	Image by Freepik
Keto Chocolate Bars	SWE-BAR-CHO-120	Image by Freepik
Keto Sweets	SWE-SWE-SWE-120	Image by azerbaijan_stockers on Freepik
Keto Ketchup	CON-SAU-KET-460	Image by jcomp on Freepik
Keto Sticky BBQ Sauce	CON-SAU-STI-460	Image by azerbaijan_stockers on Freepik
Chilli Sauce	CON-SAU-CHI-460	Image by jcomp on Freepik
Keto Curry Sauce	CON-SAU-CUR-450	Image by KamranAydinov on Freepik
Keto Pasta Sauce	CON-SAU-PAS	Image by Freepik
Coconut Oil	CON-OIL-COC	Image by jcomp on Freepik
Extra Virgin Olive Oil	CON-OIL-OLI	Image by wirestock on Freepik

All other imagery on the website are basic icons obtained from Font Awesome which can be found here.

Wireframes

The wireframes were creates using Figma. I have deviated somewhat from my original wireframes, but this was mainly design preference and ensuring a good responsive layout on smaller screens.

I did not create separate wireframes for mobile and tablet as the layout is identical.

Desktop Wireframes

Tablet & Mobile Wireframes

Database Schema

The database schema flow charts were created using Figma.

Back to top

Features

Fully responsive across all screen sizes.

Desktop
Welcome page
Products page
Product details page
Product details page
Shopping bag page
Checkout page
Checkout page
Checkout success page
Profile page
Profile page
Product management page
Add product page
Add product page
Add variant page
Edit product page
Edit product page
Edit variant page
Product management modal
Product management modal
Stock management page
Login page
Logout page
Register page
Tablet
Welcome page
Products page
Product details page
Product details page
Shopping bag page
Checkout page
Checkout page
Checkout success page
Profile page
Profile page
Profile page
Product management page
Product management page
Add product page
Add product page
Add variant page
Add variant page
Edit product page
Edit product page
Edit variant page
Edit variant page
Product management modal
Product management modal
Stock management page
Stock management page
Login page
Logout page
Register page
Sidenav
Mobile
Welcome page
Products page
Products page
Product details page
Product details page
Shopping bag page
Shopping bag page
Checkout page
Checkout page
Checkout success page
Checkout success page
Profile page
Profile page
Profile page
Product management page
Product management page
Add product page
Add product page
Add variant page
Add variant page
Edit product page
Edit product page
Edit variant page
Edit variant page
Product management modal
Product management modal
Stock management page
Stock management page
Login page
Logout page
Register page
Sidenav

Intuitive and easy to navigate using the top navbar on larger screens and sidenav on smaller screens which present different options to the user depending on whether or not they are logged in, and if they are a 'super user' as well as if there are products currently in their shopping bag.

There is also a search function allowing the customer to search for the exact products they need .There are also various appropriately marked buttons throughout the site making navigation easy.

Full account management including the ability to...
- Sign in
- Sign out
- Sign up
- Reset forgotten passwords
The main functionality for account management is provided by AllAuth built into Django but the pages have been restyled to fit in with the page design and be fully responsive.

A homepage designed to convey straight away exactly what the site is about to the user.

A contact button which is always visible in the navbar or sidenav, giving users a quick and convenient way to contact the store with any queries.

A product page offering basic product information and pictures as well as various filtering and sorting options allowing the user to easily navigate the products available in the store.

Conveniently placed badges and tags on products giving instant feedback to the user as to whether a product is new, on sale or out of stock as well as which category it belongs to.

A product details page giving more in depth information about the product such as the description, stock availability, reviews, ingredients, allergens and nutritional information.

It also shows any reviews that have been left for the product as well as giving registered users the ability to leave their own reviews.

A product selector on each product page where the product has different variants such as different package sizes, which also shows how many of each variant is currently in stock for purchase. When selected the price on the page is dynamically updated.

The ability to store items in the shopping bag for purchase as well as the ability to update the quantity required or remove them all together.

The ability to add available discount codes to your order.

A secure checkout page powered by Stripe payments which shows a summary of the order and also give the user the ability to save their details for future orders if they are already registered.

A checkout success page with give confirmation of the current order as well as a summary of the order.

A user profile page which give users the ability to view and update their default delivery information, as well as an order history section, giving the user the ability to view details of all their past orders.

There is also a reviews section which give the user the ability to see the past reviews as well as being able to edit or delete those reviews.

For super users the is a product management section which provides the ability to do the following... - Add, edit and delete products and product variants - Add, edit and delete discount codes - Manage the stock levels of the store

Custom success, warning and error messages giving customers feedback on their actions as they navigate the site, as well as a preview of their shopping carts when changes are made to their current 'bag items'.

Confirmation emails sent for all orders made as well as when the custom makes contact with the store via the 'Contact' modal on the site.

A custom 404 page that informs the user the page they are looking for hasn't been found with a button directing them back to the homepage.

A back to top button on the products page which only appears when the customer begins scrolling down.

Defensive programming has been used throughout the development of the application, to prompt users when they are either about to permanently delete something that cannot be done such as a product or discount code, as well as to stop users accessing pages they aren't authorised to access, for instance any page that requires a user to be logged in or for a user to be a super user.

An intuitive stock management system which checks stock values before allowing a user to place an order in case someone else has made an order since they added the product to their cart, as well updating the stock counts dynamically as and when orders are placed.

Future Features

Given additioanl time and resource some future features that I would like to encorporate into this project are...

The abilitiy to sign up and sign in using social accounts such as google or facebook.
To restric reviews so that a personal can only review a product that they have previously purchased
For the user to be able to store favourite products or a wishlist
Product recommendations based on previous purchases and also other similar user profiles
Abdandoned cart recovery
A loyalty program
A feature where users can request notification emails when their favourite products come back into stock

Accessibility

The use of semantic HTML.
Ensuring the colours and text use meet accessibility standards set by w3.org.
Ensuring all clickable buttons and links are tabbable using the keyboard.
Using descriptive alt tags on all images.
Using correct aria labels where necessary.
Being mindful in the creation of the design to ensure it is intuitive and as easy to navigate as possible.

Development Process

As well as using Figma to create wireframes and flow charts for this project, I also used Figma's Kanban template to keep track of tasks as I found the "sticky note" style more user friendly and it suited my style of task management better.

You can view the Kanban board here.

Back to top

Technologies Used

Languages Used

HTML
CSS
Vanilla javaScript
Python

Databases Used

sqlite3 in development - A relational database
PostgreSQL via ElephantSQL in production - A relational database

Frameworks, Libraries & Programs Used

Amazon AWS - For static file storage
Bootstrap - Version 5.3.0 - For the layout and framework of the website, it was also used to create the various modals which were then restyled to match the rest of the website.
Boto3 - For AWS implementation
Cloud Convert - To compress and convert images to webp.
Code Institute PEP8 Python Linter - To check for linting errors in my python code.
Coolors - To check contrast and accessibility of the colours I chose to use.
ElephantSQL - To host my PostgreSQL database
Figma - To create the wireframes, user journey flow chart and database schema flow chart as well as the Kanban feature to manage the development process.
dj-database-url - So that I can use databse URLs in Django
Django - An open source python web framework
Django Crispy Forms - For Django form styling
Font Awesome - Used for the GitHub icon used in the footer button.
Figma - For my wireframes, database schema diagram and also as a Kanban board for project management
Git - For version control.
GitHub - To store website files and repository for the website.
Google Dev Tools - Built into the chrome browser to test features and design and to troubleshoot as I went along as well as for testing later on using tools such a Lighthouse.
Google Fonts - To import the fonts I chose for the website.
Gmail - As my email hosting provider
Gunicorn - As a HTTP server within my Heroku app
Heroku - To host my application
JSHint - To validate and test javaScript code.
Mini Webtool - To generate a secret key for Django
Pillow - For image processing in Django
Psycopg2 - To more easily manage my PostgrSQL databse using Python
Siege Media - To check contrast and accessibility of the rgba colours I chose to use.
Stripe - For payment processing
Lighthouse - Built into Google Dev Tools for testing.
SQLAlchemy - Database abstraction library, used to interact with PostgreSQL.
VS Code - Was used as my code editor to write code, version control using git and pushing changes for storage to GitHub.
Website Mockup Generator - To create the website mockup images at the top of the README.
W3C - To validate and test HTML and CSS code.

Back to top

Testing

Please see TESTING.md for all testing performed

Deployment

The project was deployed to Heroku using a free relational database from ElephantSQL. Before deploying to Heroku I would first set up the database so I will explain the deployment in 2 two parts.

ElephantSQL

Navigate to ElephantSQL.com and click “Get a managed database today”
Select “Try now for FREE” in the TINY TURTLE database plan.
Select “Log in with GitHub” and authorize ElephantSQL with your selected GitHub account.
In the Create new team form:
- Add a team name (your own name is fine)
- Read and agree to the Terms of Service
- Select Yes for GDPR
- Provide your email address
- Click “Create Team”
Your account should now be successfully created.
Click “Create New Instance”.
Set up your plan:
- Give your plan a Name (this is commonly the name of the project)
- Select the Tiny Turtle (Free) plan
- You can leave the Tags field blank
Select a data centre closest to you - I used EU-West-1 (Ireland).
Click "Review".
Check your details are correct and then click “Create instance”.
Your database should now be successfully created.
Return to the ElephantSQL dashboard and click on the database instance name for this project.
In the URL section, clicking the copy icon will copy the database URL to your clipboard. Keep this tab open as we will need this URL later.

Heroku

To successfully deploy on Heroku we first to install some dependencies to that you can use Postgres on your deployed site.
```
pip3 install dj_database_url
pip3 install psycopg2
```
We then need to create some files: a requirements.txt file and a Procfile.
The requirements.txt file contains all the applications and dependencies that are required to run the app. To create the requirements.txt file run the following command in the terminal:
```
pip3 freeze --local > requirements.txt
```
The Procfile tells Heroku which files run the app and how to run it. To create the Procfile run the following command in the terminal:
```
 web: gunicorn [your app name].wsgi:application
```
If the Procfile has been created correctly it will have the Heroku logo next to it. It is also important to check the Procfile contents, as sometimes on creation a blank line will be added at the end of the file. This can sometimes cause problems when deploying to Heroku, so if the file contains a blank line at the end, delete this and save the file. Make sure to save both these files and then add, commit and push them to GitHub.
Login (or sign up) to Heroku.com.
Click the new button and then click create new app.
You will then be asked to give your app a name (these must be unique) and select a region. Once these are completed click create app.
You will now need to connect the Heroku app to the GitHub repository for the site. Select GitHub in the deployment section, find the correct repository for the project and then click connect.

Once the repository is connected, you will need to provide Heroku some config variables it needs to build the app. Click on the settings tab and then click reveal config vars button. You will now need to add the environment key/value variables some of which were used in the env.py file and some of which will be different:

KEY	VALUE
AWS_ACCESS_KEY_ID	`your variable here if you have it already`
AWS_SECRET_ACCESS_KEY	`your variable here if you have it already`
DISABLE_COLLECTSTATIC	1*
DATABASE_URL	`your variable here`**
EMAIL_HOST_PASS	`your variable here`
EMAIL_HOST_USER	`your variable here`
SECRET_KEY	`your variable here`
STRIPE_PUBLIC_KEY	`your variable here`
STRIPE_SECRET_KEY	`your variable here`
STRIPE_WH_SECRET	`your variable here`
USE_AWS	True
DEVELOPMENT	True***

*This is temporary and will be removed later.

**This is where we paste our URL from step 13 in ElephantSQL section.

***This variable is to be deleted once debugging is complete and you are ready to deploy your "production" app.

You then need to add the hostname of your Heroku app to settings.py which can be found in the Heroku settings tab under Domains.
```
ALLOWED_HOSTS = ['keto-kreations-25ff0a2cbc9e.herokuapp.com', 'localhost']
```
We now need to migrate our database to our ElephantSQL databse. Go to the top right hand of Heroku and select, more then select Run console. Type bash and click Run then type the following commands.
```
python3 manage.py makemigrations --dry-run
python3 manage.py makemigrations
python3 manage.py migrate --plan
python3 manage.py migrate
```
Assuming all your migrations were completed succesfully you can now create your superuser by running the below command and filling in your details.
```
python3 manage.py createsuperuser    
```
Now that the relational database has been set up and the tables created and superuser created, we can now click open app and the application should now open in a new tab. If you haven't set up your AWS yet your CSS and images wont have loaded yet. We will set that up next.

Amazon AWS

Setting up an S3 Bucket

Create an Amazon AWS account
Search for S3 and create a new bucket
- Allow public access
- Acknowledge
Under Properties > Static website hosting
- Enable
- index.html as index document
- Save

Under Permissions > CORS use:

    [
  {
      "AllowedHeaders": [
          "Authorization"
      ],
      "AllowedMethods": [
          "GET"
      ],
      "AllowedOrigins": [
          "*"
      ],
      "ExposeHeaders": []
  }
]

Under Permissions > Bucket Policy:
- Generate Bucket Policy and take note of Bucket ARN
- Chose S3 Bucket Policy as Type of Policy
- For Principal, enter *
- Enter ARN noted above
- Add Statement
- Generate Policy
- Copy Policy JSON Document
- Paste policy into Edit Bucket policy on the previous tab
- Save changes
Under Access Control List (ACL):
- For Everyone (public access), tick List
- Accept that everyone in the world may access the Bucket
- Save changes

Setting up AWS IAM

From the IAM dashboard within AWS, select User Groups:
- Create new group e.g. manage-keto-kreations
- Click through without adding a policy
- Create Group
Select Policies:
- Create policy
- Under JSON tab, click Import managed policy
- Choose AmazongS3FullAccess
- Edit the resource to include the Bucket ARN noted earlier when creating the Bucket Policy:
```
      "Resource": [
                      "arn:aws:s3:::keto-kreations",
                      "arn:aws:s3:::keto-kreations/*"
            ]
```
- Click next step and go to Review policy
- Give the policy a name e.g. keto-kreations-policy and description
- Create policy
Go back to User Groups and choose the group created earlier
- Under Permissions > Add permissions, choose Attach Policies and select the one just created
- Add permissions
Under Users:
- Choose a user name e.g. keto-kreations-staticfiles-user
- Select Programmatic access as the Access type
- Click Next
- Add the user to the Group just created
- Click Next and Create User
Download the .csv containing the access key and secret access key. This will NOT be available to download again

Hooking Django up to S3

Install boto3 and django-storages

pip3 install boto3
pip3 install django-storages
pip3 freeze > requirements.txt

Add the values from the .csv you downloaded to your Heroku Config Vars under Settings:
```
AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY
```
Delete the DISABLE_COLLECTSTATIC variable from your Config Vars and deploy your Heroku app, if you have enabled automatic deployment in Heroku this will happen automatically the next push you make to GitHub
With your S3 bucket now set up, you can create a new folder called media (at the same level as the newly added static folder) and upload any required media files to it, making sure they are publicly accessible under Permissions

Forking the GitHub Repository

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

Login to GitHub.
Locate the repository, you can use a link you have been provided with or use the search function in the top left of the screen.
In the top right hand corner of the page locate and click the 'fork' button.
Near the bottom of the page click the green button that says 'Create Fork'.
You should now have a copy of the original repository in your GitHub account.

Making a Local Clone

Login to GitHub.
Locate the repository, you can use a link you have been provided with or use the search function in the top left of the screen.
Near the top of the repository click the green 'Code' button.
To clone the repository using HTTPS, under HTTPS copy the link provided.
Open the terminal in your code editor.
Change the current working directory to the location where you want the cloned directory to be made.
Type git clone, and then paste the URL you copied in Step 3.
Press Enter. Your local clone should be created.
To install all the required dependencies you just need to run the following...
```
pip3 install -r requirements.txt
```

Back to top

Credits

Code

Social Media Integration for Facebook, LinkedIn & Google - Code from Abi Harrison Meta Tags Webinar.

All other small code snippets used are referenced in the code as a comment.

All other code was written by the developer.

Content

Ingredients, allergens, product descriptions and nutritional information is made up data using ChatGPT
All other static content for this website was written by the developer.

Media

Logo - The logo was created using Logo.com

Acknowledgements

I 100% couldn't have completed this project on my own so would like to acknowledge the following people for their contributions, whether they know they helped or not...

My Fiancé and children for their unwavering support.
Iris Smok my cohort facilitator for her support and for checking in on me when I have had to take some time away from the keyboard.
Martina Terlevic for her advice and support.
The Code Institute student support for checking in on me when it seems I might have gone MIA.
The people on my cohort for their support, encouragement and for reviewing my project.

Back to top

Name		Name	Last commit message	Last commit date
Latest commit History 166 Commits
.devcontainer		.devcontainer
.vscode		.vscode
bag		bag
checkout		checkout
home		home
keto_kreations		keto_kreations
media		media
products		products
profiles		profiles
readme_and_testing_media		readme_and_testing_media
static/css		static/css
templates		templates
.gitignore		.gitignore
.gitpod.yml		.gitpod.yml
Procfile		Procfile
README.md		README.md
TESTING.md		TESTING.md
custom_storages.py		custom_storages.py
manage.py		manage.py
requirements.txt		requirements.txt
runtime.txt		runtime.txt

Ant2210/keto-kreations

Folders and files

Latest commit

History

Repository files navigation

User Experience (UX)

User stories

Design

Colour Scheme

Main Colours Used

Colour Accessibility

Colour Palette and Results

Typography

Fallback Font

Imagery

Logo

Welcome Image

404 Image

Product Images

Wireframes

Desktop Wireframes

Tablet & Mobile Wireframes

Database Schema

Features

Future Features

Accessibility

Development Process

Technologies Used

Languages Used

Databases Used

Frameworks, Libraries & Programs Used

Testing

Deployment

ElephantSQL

Heroku

Amazon AWS

Setting up an S3 Bucket

Setting up AWS IAM

Hooking Django up to S3

Forking the GitHub Repository

Making a Local Clone

Credits

Code

Content

Media

Acknowledgements

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages