An online food shop called Ready, Steady, Eat! that sells meals and fresh food products for my Milestone 4 project. This ia Full-Stack Django E-commerce project based on the Boutique Ado project. It is customised and contact and faq pages added in with models.
- As a user, I should be able to easily register for an account, so I have a personal account and their profile.
- As a user, I should be able to log in to my account, so that I can see the relevant information on my account.
- As a user, I should be able to log out of my account to keep my account safe and secure.
- As a user, I should receive a confirmation email after registering to confirm that my registration went through and was succesful.
- As a user, if I forget my password I should easily be able to recover it, so I am able to access my account again and log in.
- As a user, I should have a personalised profile so I can have access to my personal information, my orders, and update payment information.
- As a shopper, I should be able to view a list of my products and on the relevant pages, so I see the items and purchase them.
- As a shopper, I should be able to view the product details of each product, so that I see further information about it such as the name, image, and description.
- As a shopper, I should be able to search and filter the various meals/food in the search bar, so it can help me to find items that are relevant to what I am looking for.
- As a shopper, I should be able to see the total of items that are added to my cart so I can see how much my order costs.
- As a shopper, I should be able to add and remove items from my cart, so I can amend items I need to when I add it to an order.
- As a shopper, I should be able to edit quantity of items that are in my basket before I pay, so I can order the right amount of products that I need.
- As a user I should be able to add, edit, and delete product listings so I can update the website accordingly.
- As a shopper, I expect the payment to go through succesfully without any errors, so that I can purchase what is in my basket.
- As a user, it should be clear what the purpose of the website is, what it is about, and what content is in it, so I can decide if I want to explore and view the website further.
- As a user, I should be able to easy navigate across the website, to improve the user experience, so I find the information easily that I am looking for.
- As a user, I expect the website to be responsive on different screen sizes on mobile, tablet, and desktop, so I can view everything easily on the website.
- As a user, I want be able to see the FAQ page, so I can find out the relevant information to any queries or general information that I may need.
- As a user, I want to be able contact the company on the contact us page, so I can request inforamtion that I need or ask general queries.
Please see below a screenshot of a Database Schema for my models of my project which I created using Django-extensions and PygraphViz. I found about this via the Code Institute Slack Channel.
As you can see from the model above, my two custom models that I created were the contact form and the FAQ's, which are both within the contact app. Not all apps used models so are not on the Schema.
The technologies I used for creating the project were HTML, CSS, Javascript, JQuery, Python, Django, Bootstrap 4, AWS, Heroku, Github, Git, and the Stripe API.
A home page introducing the website and it's purpose for users.
A page where all the products are shown.
Pages where products for different categories are shown.
A page where users can see their items before going to the checkout page.
Checkout (top half)
Checkout page (bottom half)
Where users checkout and pay for items. The screenshot doesn't show the payment bit which is lower down on the page!
Where users can contact Ready, Steady, Eat! with queries.
Non-admin photos for this.
With the edit and delete and add FAQ's for admin.
Where users can see frequently asked questions. There are options from this page for admin's to add, edit and remove faq's.
Where you users have access to their own profile.
Where the admins are can manage products in the shop. There are also from the products page when logged in as an admin an option to edit products which has a very similar looking form.
- Make titles dynamic on product pages
- Have an option to stop products and FAQ's being deleted on one click.
- Add a rating and reviews system
- Add in more products to the site
- Add a wishlist
- Set up a subscribe option with a monthly newsletter
- Fixed footer so it is at the bottom of the page.
- Made images all the same size so it looks more uniform in the product containers.
- Footer overlapping content in page on some pages.
- Order total showing zero amount on order confirmation and in profile after adding product to basket and going through the checkout procedure. Small fix within the template tags in the html.
- Small responsiveness issue on the bag page on mobile devices.
- Images a little slow loading the page.
- Order confirmation email doesn't actually send to an email but confirmation message does appear on the checkout success page once order is placed. Emails are received ok for verification when registering and also for forgotting a password. This was checked using a temp email address on https://temp-mail.org/en/.
I have validated all the html files (not the all auth ones) by copying the url in the html validator, and can confirm the are without errors.
HTML Validation Checks Below:
| Page | Checked with HTML Validator with no errors (Yes or No) |
|---|---|
| index.html | Yes |
| profile.html | Yes |
| register.html | Yes |
| login.html | Yes |
| products.html | Yes |
| product_detail.html | Yes |
| bag.html | Yes |
| checkout.html | Yes |
| checkout_success.html | Yes |
| contact.html | Yes (Errors only from the backend as from details in forms.py) |
| success.html (contact form success page) | Yes |
| add_product.html (on product management page) | Yes |
| edit_product.html | Yes |
| faq.html | Yes |
| add_faq.html | Yes |
| edit_faq.html | Yes |
Errors on the contact page due to the fact that the contact form is like a table and it is coming from the backend.
I have validated all the css files within each of the apps and I can confirm there were no errors and everything is validated.
I have validated the JavaScript and everything runs without error, apart from some ES6 ones which I have ignored.
This is has been thoroughly tested using flake8 extension and the only errors that remained are mostly in settings.py and models which I have decided to ignore. All validation issues within views, urls etc. are all clear of errors. There are odd other errors, but these were issues that were originally from the Boutique Ado such as the 'except' error.
Through testing my app during the development stage these are the testing results of my manual tests based on my user stories above.
- As a user, I can easily register for an account, so I have a personal account and their profile.
- As a user, I am able to log in to my account, so that I can see the relevant information on my account.
- As a user, I am able to log out of my account to keep my account safe and secure.
- As a user, I can confirm that I do receive a confirmation email after registering to confirm that my registration went through and was succesful.
- As a user, if I forget my password I can easily recover it, so I am able to access my account again and log in. This has been tested and an email sent for forgotten passwords.
- As a user, I can confirm that I have a personalised profile so I can have access to my personal information, my orders, and update payment information.
- As a shopper, I can confirm that I can see a list of my products and on the relevant pages, so I see the items and can purchase them.
- As a shopper, I can confirm that I can view the product details of each product by clicking on the image, so that I see further information about it such as the name, image, and description.
- As a shopper, I can confirm that I can search and filter the various meals/food in the search bar, so it can help me to find items that are relevant to what I am looking for.
- As a shopper, I can confirm that I am able to see the total of items that are added to my cart so I can see how much my order costs.
- As a shopper, I can confirm that I can add and remove items from my cart.
- As a shopper, I can confirm that I am able to edit quantity of items that are in my basket before I pay, so I can order the right amount of products that I need.
- As a user I can confirm that I am able to add, edit, and delete product listings so I can update the website accordingly.
- As a shopper, I can confirm that the payment to go through succesfully without any errors, so that I can purchase what is in my basket. This goes through via Stripe on the backend.
- As a user, it is clear what the purpose of the website is, what it is about, and what content is in it, so I can decide if I want to explore and view the website further.
- As a user, I can confirm that I can easily navigate across the website, to improve the user experience, so I find the information easily that I am looking for.
- As a user, I can confirm that the website is responsive on different screen sizes on mobile, tablet, and desktop, so I can view everything easily on the website.
- As a user, I can see the FAQ page, so I can find out the relevant information to any queries or general information that I may need. As an admin you can add, edit, and delete FAQ's.
- As a user, I can confirm that I can contact the company on the contact us page, so I can request inforamtion that I need or ask general queries. This contact form goes to the database once submitted.
-
Canva - or creating and designing the logo
-
Balsamiq - for creating the wireframes
-
Gitpod - For working/completing on my project
-
Github - To store my project online
-
Heroku - For deploying the project and storing the env variables.
-
Django Secret Key Generator - For generating a Django secret key.
-
Rgb color code website - For choosing colours
-
Readme Markdown - For markdown documentation for the ReadMe
-
ChatGPT - For general debugging and spotting basic syntax errors such as urls not working.
-
Am I responsive - For testing responsiveness and also for taking screenshots of the different pages on the website.
-
Pexels - For the food product images
-
Pixabay - For the food product images
-
Font Awesome - For the icons used for the social links in the footer.
-
Croppola - For cropping and re-sizing the food images so they are all the same height and width.
-
HTML Validator - HTML Validator
-
CSS Validator - CSS Validator
-
PEP8 Python Validator - Python Validator
-
JS Hint - For validating my Javascript code
-
Page speed Insights/Lighthouse - For testing performance, accessibility, best practices and SEO on all pages I used a website called Page Speed Insights
-
For sorting out the whitespace under the footer issue I used some of the code on this webpage. The website is called the 30 seconds of code website and the page is about the footer being on the bottom.
-
Django website - For Django documentation
-
W3 schools - For general documentation
-
Bootstrap 4 - For the relevant documentation
-
For the django contact form views - Django contact form views
-
For styling the django contact form - Django contact form styling
-
All content for the products were written myself.
-
This project was based on the Boutique Ado Walkthrough on the LMS as the Code Institute with additional features in and customised to my own project by adding in a contact app that has a contact and faq page with models for both of them.
A big thanks to the support from my mentor at the Code Institute, my facilitator at the City of Bristol College, and the Code Institute Slack Community and Tutor Support for assistant on my Milestone 4 project.
Go to Heroku.com and implement the following steps in this order:
- On the home page, click 'New' and in the dropdown, click on 'Create a new app'.
- Add app name (This name must be unique, and have all lower case letters. Also use minus/dash signs instead of spaces.)
- Select Region (Select the most relevant region, mine is Europe)
- Click the button that says 'Create App'.
- Click on the Deploy tab near the top of the screen.
- Where is says Deployment Method click on Github.
- Below that, search for your repo name and add that.
- Click connect to the app.
Before clicking below on enable automatic deployment do the following:
- Click on the settings tab
- Click on reveal config vars.
- Add in your variables from your env. files as key value pairs.
- Go back and click on the Deploy tab.
Before the app can be connected, push the following new files below to the repository. Go back in the terminal in your coding environment and add the following:
- git status
- git add requirements.txt
- git commit -m "Add requirements.txt file"
- git add Procfile (web: gunicorn ready_steady_eat.wsgi:application)
- git commit -m "Add Procfile"
- git push
Head back over to Heroku where the Deploy tab is.
- Click 'Enable Automatic Deploys'
- Click Deploy Branch. (Should be a main or master branch) Heroku will receive code from Github and build app with the required packages. Hopefully once done the 'App has successfully been deployed message below' will appear.
- Click 'View' to launch the new app. The deployed link of the app is https://ready-steady-eat-8febfd678f9f.herokuapp.com/