Bob & Babs website is a store that sells freshly baked goods in the Dublin Area. This lovely couple own a small bakery and are happy to keep it like that, with regular customers that always pop in for the "chat". They are looking to setup their first website to be an e-commerce store and if going well a Progressive Web App (to be implemented in the future)
- Sell freshly baked goods to the Dublin Area
- Provide delivery and collection services
- Provide a user-friendly experience
- Provide a secure payment system
-
-
Python 3.11: the primary language used to develop the server-side of the website.
-
JS: the primary language used to develop interactive components of the website.
-
HTML: the markup language used to create the website.
-
CSS: the styling language used to style the website.
-
Django: python framework used to create all the logic.
-
-
- SQLite: was used as a development database.
- PostgreSQL: the database used to store all the data.
-
- Git: the version control system used to manage the code.
- Pip3: the package manager used to install the dependencies.
- Gunicorn: the webserver used to run the website.
- Spycopg2: the database driver used to connect to the database.
- Django-allauth: the authentication library used to create the user accounts.
- ElephantSQL: the cloud database used to store all the data.
- GitHub: used to host the website's source code.
- VSCode: the IDE used to develop the website.
- Chrome DevTools: was used to debug the website.
- W3C Validator: was used to validate HTML5 code for the website.
- W3C CSS validator: was used to validate CSS code for the website.
- JShint: was used to validate JS code for the website.
- PEP8: was used to validate Python code for the website.
- Cloudinary: used to store images uploaded to site.
- django-tables2: used to provide responsive tables.
- whitenoise: used to serve the static files
- bootstrap css: used for table responsiveness
- stripe: used to handle payments
- AdobeXD: used to create wireframes
- Photoshop: used to create assets
- Heroku: used to host the website.
- Page Speed Insights: used to check the website's performance.
- Wave: used to check the website's accessibility.
- Web Aim: used to check the website's accessibility.
- Node.JS: used to create bespoke VSCode Extensions
- Powershell: used to create githooks
Node.JS was used to create bespoke VSCode Extensions to improve my Developer Experience with Django. Django Custom Commands Extension was created to allow me to run Django Custom Commands from within VSCode.
This allowed me to utilise Python to create and update Apps with ease. On new app creation the extension will automatically create the necessary files, and folders for the app. As well as migrate all the template tags from the base.html file into the current HTML file.
The extension would also update the base urls.py file to include the new app's url. This would then update my settings.py file installed apps to include the new application This also allowed me to create custom commands to run from the terminal in VSCode, and adding keyboard shortcuts to run these commands.
As well as to automatically comment on closing divs, and section tags in html files using beautiful soup as the HTML parser.
Custom githooks were created for commit-msg and pre-push hooks The purpose of these hooks were to ensure that the commit message was in the correct format, and that I was informed of an attempt to push debug code, conosle.log(), print() statements appropriately.
Powershell was used to create the hooks, and the hooks were stored in the hooks folder in the root directory of the project.
- Github
- Githooks
Heroku
Homepage
Shop
Product
It was important to route to this page as part of the add to cart option to ensure the allergin information is seen
Cart
Checkout Page Delivery
Checkout Page Collection
Order Success
Order Failure
Form Validation
Sign up
Sign In
Profile Page
Where "Prefilled" is the email address used to sign up (hidden for screenshots)
Logout Page
Customer Orders
Admin Add Products
Note product name was "test"
Admin Update Products
Admin Remove Products
Admin Order Fulfillment
- Order Items holds the indiviaul products per order
- Shipping information holds all shipping information (which may or may not include a customer) The reason for this is to support unauthenticated users
This site supports purchases from unauthenticated users.
This is supported by creating and storing a session key This session key is stored in the 'users session', and is used to store the cart items for the user If the user starts unauthenticated then logs in or creates an account the order is transferred over to the customer order if a current order exists the items are added to the current order and the unauthenticated order is removed
The use of session keys also works along with closing browser or navigating away from the page
Please note this feature will not work in incognito mode as this clears the session key on browser exit
I would like to add the GDPR Banner for cookies, While all cookies are purely functional it is still a requirement to add this, also the fact that the site uses authentication is another reason to include this banner as Django uses session keys to track authenticated users
While the Python code has been validated an error persists on the validation tool This error is due to the fact that I'm using this to render a pattern in HTML using Django and Regex.
While this is invalid for python the code is valid HTML REGEX Pattern
Offending Code: This code is for Client Side Validation of Eircodes Not strictly needed, but this client-side validation was a struggle with Project 4 and wanted to implement again for Project 5. As I have more experience and wanted to re-visit some implementations from the past.
The regex is to allow 1231234 and 123 1234 to be accepted as eircode.
'pattern': '[A-Za-z0-9]{3}\s*[A-Za-z0-9]{4}'I opted to use container queries in this project in order to gain a better understanding of them, this has led to some css validation issues with the validator the CSS used is valid, but the validator has not yet been upated to inspect this level 3 CSS
All other css files are clear of errors
This error is from Adobe In-design product
Under accessibility guidelines decorative images can either have a blank alt attribute or role presentation, this is for the grey svg on the homepage and is not an error, it's more that the context isn't checked
Error is from allauth templates this happened for Project 4 and I was unable to resolve this
Error is from allauth templates this happened for Project 4 and I was unable to resolve this
empty option is coming from Django loop street address autocomplete is valid for this context of using "Town"
When running Wave accessibility checker the contrast ratio appears to be incorrect, But when I manually check it in web aim everything passes.
Wave accessibility is also incorrectly reporting that labels are missing from the newsletter form.
Deployment markdown Testing markdown
I would like to add more to this, but within hours the account was suspended
