This website has been created to sell UK created athletic wear, it is based on a small UK concept business.
- User Experience
- Design
- Features
- Testing
- Accessibility
- Technologies Used
- Deployment and Local Development
- Acknowledgements
- Changelog
This website performs a twofold mission, finely honed to achieve tangible results: firstly, by meticulously crafting an effortlessly navigable e-commerce platform that seamlessly converts visitors into loyal customers. The user-friendly online store is fortified with secure transactions and showcases the captivating 'Run with Nature' collection - a harmonious blend of vintage athletics and natural elements that guarantees an immersive and satisfying shopping experience, ultimately translating clicks into sales. Secondly, the ambition is to cement an unmistakable identity as the icon of vintage athletic wear intertwined with nature's allure, forging an enduring connection with Bristol's scenic landscapes. Mission Statement: "Southville Sporting Club's mission is to unite vintage athletics, nature's beauty, and seamless e-commerce, crafting an active, nostalgic, and environmentally attuned lifestyle."
Prospective users of this website seek a seamless and enjoyable online shopping experience where they can explore and purchase the captivating 'Run with Nature' collection. They aim to find high-quality vintage athletic wear that reflects their active lifestyle and appreciation for eco-friendly materials, all while connecting with the vibrant spirit of Bristol's scenic landscapes. Additionally, users intend to make secure and hassle-free transactions, converting their interest into a satisfying shopping journey.
| AS A/AN | I WANT TO BE ABLE TO… | SO I CAN… |
|---|---|---|
| Viewing and Navigation | ||
| Shopper | View a list of items | See if any interest me to purchase |
| Shopper | View product details | View further information such as images, descriptions, prices, and availability. |
| Shopper | View the homepage | See featured products and promotions |
| Registration/Accounts | ||
| Shopper | Register for an account | Track my purchases |
| Site User | Log in to my account securely | Access my profile and saved information |
| Site User | Reset my password | Recover access to my account |
| Site User | Login through social media | Easily login and set up an account |
| Site User | Update profile information | Ensure items are received and payments are correct |
| Sorting and Searching | ||
| Shopper | Filter products | View products by various criteria such as popularity, price, and newest arrivals |
| Shopper | Refine my search | Find specific items based on color or size |
| Shopper | Search for specific products using keywords | Quickly find what I'm looking for |
| Purchase and Checkout | ||
| Shopper | Add items to my shopping cart | Keep for a later purchase |
| Shopper | View my cart | See a summary of selected items and their quantities |
| Shopper | Update quantities or remove items | Purchase the goods I want |
| Shopper | Apply coupon codes | Save money on my order |
| Shopper | Choose from different payment options | Easily pay for my order |
| Shopper | Review order summary | Ensure the order is correct |
| Shopper | Receive a confirmation email | Confirm order details are correct and ensure the order was processed |
| Site Owner | ||
| Site Owner | Manage and process orders | Send items to customers |
| Site Owner | Add and remove items from the site | Show customers items that are in stock |
The primary target audience for Southville Sporting Club is individuals aged 20-40 who seek stylish and sustainable unisex clothing that resonates with the spirit of vintage athletics and nature's beauty.
What the users would be looking for:
- Effortless Navigation: Users expect a user-friendly and intuitive interface that allows them to easily explore the website and find products.
- Account Creation: Users should be able to create a personal account for a customised shopping experience, including saving preferences and order history.
- Product Information: Comprehensive product descriptions, high-quality images, and sizing information to help users make informed choices.
- Security: Users want to feel confident that their personal and financial information is secure when making purchases.
- Sustainability Information: Details about the use of eco-friendly materials, reinforcing the brand's commitment to sustainability.
- Contact and Support: Access to customer support or contact information for inquiries and assistance.
I used Google fonts 'Helvetica' and 'Times New Roman'. I used the Times New Roman font to make the header text on the index page stand out from the regular font on the site. I then used 'Helvetica' as I thought it was very easy to read and looks professional.
- Materialize CSS files have been incorporated into the project to leverage its pre-defined class defaults and components.
- The class defaults of Materialize CSS have been overridden to align with the desired styling preferences.
- Customisation has been made easier by modifying the source files directly, allowing for a consistent and unified design.
- The website incorporates responsive web design, allowing the site to adjust dynamically based on the screen size.
- Links present on each page have been intelligently designed to redirect users to essential sections, such as the Client or the Register page, irrespective of their current location.
Index
Desktop
Mobile
Products
Desktop
Mobile
Product Detail
Desktop
Mobile
Bag
Desktop
Mobile
Checkout
Desktop
Mobile
Profile
Desktop
Mobile
Contact
Desktop
Mobile
Admin Dashboard
Desktop
Mobile
Shipping & Terms
Desktop
Mobile
This map represents the current models in the relational database, a few of the databases been modified or are completely new. Note the pink items are new database models added.
Original Database Diagram
The color palette for the website is derived from the hero image. Using Photoshop, colors were extracted directly from the image, resulting in the shades noted below.
These colors, including black and white for a clean, minimalistic appearance, were carefully selected to mirror the image's essence, offering a contemporary and visually striking aesthetic.
Using the coolors palette on the image I selected the colours from this along with a darker and lighter shade of contrasting colours to create a balanced palette.
This is a fully responsive website that was designed mobile-first as this is the most likely way it will be viewed; the website is divided into the 22 pages, along with a base template using allauth and toasts for extra functionality. The profile pages are not available until the user is logged into the website. There is also a 404 page for when someone ends up on an incorrect page.
The index page has:
A "Shop Now" button, which takes the user to the "Latest Drop" page of the newest products.
View Here
The navbar has the following features:
A logo that when clicked takes the user back to the index page.
A search function
A drop-down menu for the user account. Which only shows 'log in' and 'register' if the user is not logged in, but shows 'Admin Dashboard', 'Profile' and 'logout'.
Drop down menus (on desktop) for the info and shopping buttons to see further information such as categories.
A burger style navbar for mobile users with the same button functionality.
The footer has the following features:
Buttons links to the Terms & Conditions, Shipping & Returns and Contact pages.
Icons for payment types accepted and other standard company information.
NavBar Desktop
NavBar Mobile
Footer
The about us page has the following features:
A hero image with a about us title and capturing caption to catch the users eye.
Futher information about the brand and where the store is located.
About Us Part 1
About Us Part 2
The contact us page has the following features:
A user-friendly form has been integrated with Postmark, allowing users to submit inquiries directly through the platform.
Information about the location and opening times of the store is also available on the contact us page.
- Name: Captures the name of the individual submitting the contact form.
- Email: Stores the email address of the user for communication purposes.
- Subject: Records the subject or reason for the contact submission.
- Message: Holds the detailed message or inquiry from the user.
- Created At: Automatically timestamps the submission for chronological tracking.
-
Form Handling:
- The model is integrated into the
contact_usview, which processes form submissions. - Upon a valid form submission, a
ContactSubmissioninstance is created and saved to the database.
- The model is integrated into the
-
Email Notification:
- Simultaneously, the system sends an email notification to the specified address with details from the contact form.
- This feature ensures that relevant parties are promptly informed of new inquiries.
View Here
The error page has the following features:
A message notifying the user that they have found themselves on a page that doesn't exist.
A button to return the user to the homepage.
View Here
The shipping page has the following features:
A text based page to inform the user on the shipping and returns policy.
View Here
The sustainability page has the following features:
A hero looping video with a title and capturing caption to catch the users eye.
Futher information about the sustainability and mission of the brand.
Sustainability Part 1
Sustainability Part 2
The terms page has the following features:
A text based page to inform the user on the shipping and returns policy.
A button at the end of the text to send the user to the contact form if they have further questions.
View Here
The products page has the following features:
A list of products, which, when clicked, takes the user to the detail page of that specific product.
If the user is a superuser, at the bottom of each product are links to either edit or delete the product.
Text which lets the user know how many products there are in the category they are browsing. This also shows a link to "All Products".
A dropdown box with the ability to sort by price (low to high), price (high to low), name (a-z) and name (z-a).
A scroll-up button on the bottom-right-hand-side of the page, which when clicked, will automatically scroll the page up to the top. This is available on all pages that are more than 100vh.
View Here
Scroll Button
The product details page has the following features:
If the user is a superuser, two links appear giving the user the ability to edit or delete the product.
The available sizes are button on the page for the user to choose form. If there is only one size then this is selected by default, and not changeable by the user.
A button that will add the desired size of the product to the user’s checkout cart.
Three cards with a description, shipping returns and size guide for user to read if needed. The shipping section has a button to view the full shipping page. The description is opened on default.
View Here
The nothing found page has the following features:
Search for a product by name or description.
Easily see what I have searched for and the number of results.
A button that will add the desired size of the product to the user’s checkout cart.
If there are no results it routes to a nothing-found page that lets the user know there are 0 products for the search requested.
Search Function
Nothing Found
The bag overlay page has the following features:
The details of the products being bought, with an option to remove each product.
The details of the total and delivery price along with a button to continue to the checkout.
View Here
The checkout page has the following features:
A form that the user fills out to confirm their details for payment and shipping, if they already have an account this will be pre-populated with their information after first order is placed.
An order summary for the user to see what they're about to purchase with a dynamic total that changes dependant on their shipping method chosen.
A card payment function.
A return to shopping button and a confirm checkout button labelled 'Pay Now'.
Order History
Checkout Form
The checkout page has the following features:
Information about the users order.
A toast popup confirming the order has been sent to the customers email address.
A button to continue shopping.
Checkout Success
The dashboard has the following features:
A card showing the site owners current monthly sales.
4 cards with buttons attached linking to a stock list, order list, adding a new product and managing their own profiles.
Admin Dashboard
The stock list page has the following features:
A table with all of the site owners current inventory.
A return button that takes the site owner back to the admin dashboard.
Stock List
The order list page has the following features:
A table with all of the orders from the site.
A checkbox so the site owner can track what orders they've processed.
A return button that takes the site owner back to the admin dashboard.
Order List
The page to add products has the following features:
A form for the site owner to complete and add items to the site.
Several of the form inputs are mandatory to avoid errors.
Add Product
The page to edit products has the following features:
A form for the site owner to edit with pre-filled data on the item including the current quantity of each size in stock.
Edit Product 1
Edit Product 2
The profile page has the following features:
A form where the user can update their personal information, which is then auto filled on the checkout form.
A section that shows the user their order history, the order number takes the user to the full information of their order.
A section that shows the user their wishlist, the images are clickable so that the user can select the item that they want to buy and add their size to basket to purchase. The user can also remove the item from their wishlist if they no longer like it.
Profile
Wishlist
The register page has the following features:
A link to take the user to the sign-in page if they already have an account.
A form for the user to sign up if they do not already have an account.
This page is only seen if the user is not signed in.
Register
The login page has the following features:
A form for the user to input the necessary details to login to the site.
A login button that takes the user to the login page in case they already have an account.
A forgot password button for the user to reset their password via their email if they're having issues logging in.
To enhance user authentication and streamline the sign-in process, Google login functionality has been integrated into this project. Leveraging the power of Django Allauth and a dedicated Google API setup, users can now conveniently sign in using their Google accounts.
Login
Many messages are included to alert the user that they have accomplished an action.
Testing was ongoing throughout the entire build. I utilised Chrome developer tools while building to pinpoint and troubleshoot any issues as I went along. Both manual testing and validation was employed.
I tested the page and had 3 people also manually test it on their own devices. For validation, I used the W3C validator, CSS validator, Python Linter, JSHint validator, and Lighthouse.
The W3C HTML Validator was used to validate the HTML on all pages of the website.
Home Page
About Us
Contact
Error
Shipping & Returns
Sustainability
Terms & Conditions
Products
Product Detail
Nothing Found
Search
Shopping Bag Overlay
Checkout
Checkout Success
Admin Dashboard
Stock List
Order List
Add Product
Edit Product
Profile
Since updating the profile with the wishlist my mentor noticed a trailing tr tag that is generated by the {{ form }} element, we troubleshooted trying to rectify this but were unable to.
Register
Login
The W3C CSS Validator was used to validate the CSS. There were no errors on the css.
| Page | Test |
|---|---|
| Home | ✓ |
| Bag | ✓ |
| Checkout | ✓ |
| Products | ✓ |
| Admin Dashboard | ✓ |
| Base Static | ✓ |
The JSHint Validator was used to validate the JavaScript in the script.js file. I needed to use the following code at the top for the proper validation to be shown:
/*jshint esversion: 6 */
I also needed to add the following code so that the use of jquery did not show $ as an undefined variable:
/*globals $:false */
| JS Page | Warning | Reasoning |
|---|---|---|
| Admin Dashboard | 1 undefined variable ‘M’ | Relates to the Materialize framework I am using for this project |
| Bag | None | N/A |
| Checkout | None | N/A |
| Stripe | 1 undefined variable ‘Stripe’ | Relates to the payment system I am using for this project |
| Product Detail | 1 undefined variable ‘M’ | Relates to the Materialize framework I am using for this project |
| Product Detail | 1 unused variable ‘instances’ | Relates to the Materialize framework I am using for this project |
| Product Owner | None | N/A |
| Products | 2 undefined variables ‘M’ | Relates to the Materialize framework I am using for this project |
| Products | 2 used variables 'specificDropdownInstance', 'instances' | Relates to the Materialize framework I am using for this project |
| Profiles | None | N/A |
The pep8 validator was installed onto gitpod to ensure correct styling throughtout creation. Pep8 validation applied to all pages manually.
The original results were improved by adding a meta tag with name and description to the base.html.
| Page | Viewing On | Performance | Accessibility | Best Practices | SEO |
|---|---|---|---|---|---|
| Home | Desktop | 91 | 93 | 100 | 90 |
| Home | Mobile | 66 | 96 | 100 | 88 |
| About Us | Desktop | 92 | 90 | 100 | 90 |
| About Us | Mobile | 62 | 96 | 100 | 88 |
| Contact Us | Desktop | 95 | 91 | 100 | 90 |
| Contact Us | Mobile | 70 | 95 | 100 | 88 |
| Error | Desktop | 93 | 93 | 100 | 90 |
| Error | Mobile | 70 | 95 | 100 | 88 |
| Shipping & Returns | Desktop | 92 | 93 | 100 | 90 |
| Shipping & Returns | Mobile | 70 | 96 | 100 | 88 |
| Sustainability | Desktop | 88 | 93 | 100 | 90 |
| Sustainability | Mobile | 61 | 96 | 100 | 88 |
| Terms & Conditions | Desktop | 92 | 93 | 100 | 90 |
| Terms & Conditions | Mobile | 70 | 96 | 100 | 88 |
| Products | Desktop | 88 | 93 | 100 | 90 |
| Products | Mobile | 61 | 96 | 100 | 90 |
| Product Detail | Desktop | 88 | 93 | 100 | 90 |
| Product Detail | Mobile | 61 | 96 | 100 | 90 |
| Search & Nothing Found | Desktop | 95 | 93 | 100 | 90 |
| Search & Nothing Found | Mobile | 63 | 96 | 100 | 88 |
| Checkout | Desktop | 91 | 92 | 100 | 90 |
| Checkout | Mobile | 63 | 96 | 100 | 88 |
| Checkout Success | Desktop | 91 | 92 | 100 | 90 |
| Checkout Success | Mobile | 63 | 96 | 100 | 88 |
| Admin Dashboard | Desktop | 95 | 90 | 100 | 90 |
| Admin Dashboard | Mobile | 65 | 94 | 100 | 89 |
| Stock List | Desktop | 93 | 93 | 100 | 90 |
| Stock List | Mobile | 59 | 96 | 100 | 88 |
| Order List | Desktop | 93 | 93 | 100 | 90 |
| Order List | Mobile | 59 | 96 | 100 | 88 |
| Add Product | Desktop | 94 | 91 | 100 | 90 |
| Add Product | Mobile | 67 | 95 | 100 | 89 |
| Edit Product | Desktop | 94 | 91 | 100 | 90 |
| Edit Product | Mobile | 67 | 95 | 100 | 89 |
| Profile | Desktop | 94 | 94 | 100 | 90 |
| Profile | Mobile | 59 | 97 | 100 | 90 |
To fully test the website, I used Google Chrome Developer Tools. I ensured that the pages were responsive enough on all available screen sizes. Testing was performed on a variety of browsers (Chrome, Microsoft Edge, and Firefox) and devices (iPhone 14, iPhone SE, Android one+ 9 mobile, Fair Phone).
| Expected | Test Performed | Result |
|---|---|---|
| That the user will be taken to the right page when clicking on links | Clicked on every link to make sure that it took the user to the right page | Passed |
| Expected | Test Performed | Result |
|---|---|---|
| That each button will do what the user expects it to | Clicked on every button to make sure that it worked as expected | Passed |
| Expected | Test Performed | Result |
|---|---|---|
| The form will not submit when required fields are left blank | Checked every form to see if it would be submitted if any of the required fields were left blank | Passed |
| The user sees a success message when having successfully submitted a form | Successfully submitted all forms to check if they all had success messages | Passed |
| The form will not submit when input types and lengths/amounts are not appropriate | Tested every form field that takes a specific input type to see if it would submit with an undesired input type | Passed |
| Expected | Test Performed | Result |
|---|---|---|
| Non-logged-in users cannot see or access the parts of the site that are off-limits to them, and vice versa. | I logged in and out and, on both occasions, I checked to see what options were available to the user | Passed |
| Users cannot view confidential information about other users, such as user account details. | I logged in as different users with different details, to check if either user could see the details of the other | Passed |
| Expected | Test Performed | Result |
|---|---|---|
| User data is added and persists over time, including order history and personal data. | Added multiple users with different data and checked that throughout logging in and out, and over the course of weeks, the data remained the same | Passed |
| User is linked to their order history | I made multiple user accounts with different data, and all users can see their own data | Passed |
| User data can be edited and deleted from the database. | I tested that when deleting a user and then reestablishing them, none of their previous data is visible in their account. I also edited data such as user delivery details, and deleted orders | Passed |
| Calculations in the models to automatically assign variables to work as expected. | All calculations the model made were independently verified by manipulating the data and checking the results. This focused mostly on sales | Passed |
| Expected | Test Performed | Result |
|---|---|---|
| Adding, editing, and removing products from the bag work as expected. | I added, edited and removed products from the bag | Passed |
| Users’ correct details auto-fill in the checkout form. | Checked that the same details from the user’s profile are the ones that are auto filling the checkout form. I also checked that editing these details will change those on the form. | Passed |
| Stripe payment goes through without any problems. | I made several orders, which all went through fine. I then checked the Stripe dashboard to make sure it was going through on that side too | Passed |
| The webhook works so that if the user were to lose connection or close their browser before the transaction completes, the order still goes through, and they are automatically emailed. | I submitted the checkout form but closed the tab before it finished loading. The user still got charged, sent an automatic email, and the order was logged on the system and in their order history | Passed |
| Expected | Test Performed | Result |
|---|---|---|
| The sorting and filtering functions work appropriately. | I clicked on each sort and filter function and check to see if they displayed the right products and, in the order, expected | Passed |
| Products can be added from the product management page. | I created several products using the management page, and checked to see that they showed up in the admin and on the website in the appropriate places. | Passed |
| They can be edited or deleted by logged-in superusers from the products or product detail pages. | I edited and deleted several products as a superuser in both the 'all products' and 'product detail' pages | Passed |
| Expected | Test Performed | Result |
|---|---|---|
| The search function works as expected. | I searched for a wide variety of artwork based on various parts of their products pages, and this worked as expected. | Passed |
| Expected | Test Performed | Result |
|---|---|---|
| Shows the user’s editable details. | I checked on several users’ profiles that their details were editable. | Passed |
| Shows the users order history | I checked on several users’ profiles that their orders were all visible in their order history after making a variety of orders through their accounts | Passed |
- Every time a feature was added, all functions were tested to see if there was an impact.
- All forms have validation and will not submit without the proper information.
- The site was sent to friends for feedback and testing.
- All buttons tested thorughly myself and through friends using the website.
- 404 page tested by entering incorrect route name in the URL.
- Edit and delete function tested several times to ensure correct functioning.
- I tested the site personally on my Apple device, going through the entire process, checking buttons, functions, checking out, etc. I was personally unable to test on Android.
- I also tested the site on the following screens sizes on chrome: iPhone SE, iPhone XR, iPhone 12 Pro, Pixel 5, Samsung Galaxy S8+, Samsung Galaxy S20 Ultra, iPad Air, iPad Mini, Surface Pro 7, Surface Duo, Galaxy Fold, Samsung Galaxy A51, Nest Hub and Nest Hub Max.
- The site was sent to friends and relatives for them to follow the same process.
- Chrome was utilised to inspect the site in mobile format, going through the pages and functions.
- The site was developed on a Macbook Air and the majority of testing occurred on Chrome.
- The site was tested by friends and relatives on numerous desktop devices.
- The site was marginally tested on other browsers, such as Firefox and Edge.
| Number | Expected behaviour | Actual behaviour | Solution |
|---|---|---|---|
| 1 | When a user clicks away from the cart it will disappear | Bag overlay staying on the screen | I created a second overlay that's dynamically the size of the empty space, its not visible to the user but with js it waits for a clicks and closes the bag overlay |
| 2 | Sizes will dependant on the site owner adding/editing a size | If the site owner selected XXL and 10 stock it was adding the stock to XL and XXL | Added a not statement: {% if 'XL' in product.sizes and 'XXL' not in product.sizes %} |
| 3 | A user friendly page that was scrollable within the container | Shipping & Terms pages were not looking very user friendly | The shipping and terms pages have been improved for better user-friendliness. The terms and conditions page is now non-scrollable, enhancing the user experience |
| 4 | Webhooks successfully connecting through heroku | Webhooks not connecting to stripe | After a tutor meeting we decided that Webhooks were not necessary for the information I wanted to pull so I have decided to use a different method to pull the data |
| 5 | The user would view up to date when an item is removed from the bag | The items were not updating in the bag overlay until the user changed the page they were on | Made the bag overlay force refresh to ensure the up to date information was shown to the user |
| Number | Expected behaviour | Actual behaviour |
|---|---|---|
| 1 | Remember me checkbox is clickable | The remember me checkbox in allauth isn't loading using materialize |
| 2 | Out of stock items are hidden | Unfortunately ran out of time to fix this bug |
I have been mindful during coding to ensure that the website is as accessible as possible. I have achieved this by:
- Using semantic HTML.
- Using descriptive alt attributes on images on the site.
- Supplying information for screen readers where there are icons used and no text, such as footer icons.
- Guaranteeing adequate colour contrast throughout the site.
HTML5, CSS3, Python, and JavaScript were used to create this website.
- Google Fonts was used to import Big Shoulders Text.
- Git was used for version control by using the Gitpod terminal to commit to Git and Push to GitHub.
- GitHub was used to store the projects' code, and to handle version control.
- Photoshop was used to edit and crop images.
- Chrome Dev Tools was used to troubleshoot and test features and solve issues with responsiveness and styling.
- Am I Responsive? was used to show the website on a range of devices.
- Unicorn Revealer was used for debugging.
- SQLAlchemy was used to connect Python code with the database.
- Psycopg2 was used to connect Python code with the database.
- Django is a high-level Python web framework.
- Materialize was used for responsive and pre-designed CSS.
- PostgreSQL was the object-relational database system used.
- ElephantSQL was used to host the database.
- Heroku was used to deploy the website.
- Pexels was used for some royalty free images.
- Excel was used to create CSV files.
- Convert CSV was used to convert CSV files to JSON files.
- Font Awesome was used for the icons.
- DBDiagram was used to map the models.
- Amazon Web Services was used to host the images for the Heroku-hosted site.
- Postmark was used to route emails to the site owner.
This project was deployed to Heroku using the following steps:
- Navigate to ElephantSQL.com and create a user account, by using the log-in with GitHub option.
- Click “Create New Instance”.
- Set up your plan. (You can leave the 'tags' field blank.)
- Select a region.
- Select a data centre near you
- Then click “Review”.
- Check your details are correct and then click “Create instance”.
- 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
- Leave this tab open, we will come back here later
- Log into Heroku.com, click “New” and then “Create a new app”.
- Choose a unique name for your app, select the region closest to you, and click “Create app”.
- Go to the Settings tab of your new app
- Click Reveal Config Vars
- Return to your ElephantSQL tab and copy your database URL
- Back on Heroku, add a Config Var called DATABASE_URL and paste your ElephantSQL database URL in as the value. Make sure you click “Add.”
- Add each of your other environment variables except DEVELOPMENT and DB_URL from the env.py file as a Config Var.
- Navigate to the “Deploy” tab of your app.
- select “Connect to GitHub” in the Deployment method section.
- Search for your repo and click Connect
- Optional: You can click Enable Automatic Deploys in case you make any further changes to the project. This will trigger any time code is pushed to your GitHub repository.
- As we already have all our changes pushed to GitHub, we will use the Manual Deploy section and click Deploy Branch. This will start the build process.
- Now, we have our project in place, and we have an empty database ready for use. As you may remember from our local development, we still need to add our tables to our database. To do this, we can click the “More” button and select “Run console.”
- Type python3 into the console and click Run
- In the terminal that opens, write "from eponymous_bosch import db" and then press enter.
- In the terminal, write "db.create_all()" and then press enter.
- Exit the Python terminal, by typing exit() and hitting enter, and close the console. Our Heroku database should now have the tables and columns created from our models.py file.
- The app should be up and running now, so click the “Open app” button
To fork the Eponymous Bosch repository:
- Login (or sign up) to GitHub.
- Go to the repository for this project, at GitHub Repository.
- Click the Fork button in the top right corner.
To clone the Eponymous Bosch repository:
- Login (or sign up) to GitHub.
- Go to the repository for this project, at GitHub Repository.
- Above the list of files, click "Code".
- Click "Open with GitHub Desktop" to clone and open the repository with GitHub Desktop.
- Click "Choose..." and, using Windows Explorer, navigate to a local path where you want to clone the repository.
- Click "Clone".
Thanks are given for the following posts and tutorials:
- Infinite Scrolling Banner Tutorial - Setting up the top scrolling button
- Positioning Elements - Ordering footer columns/rows
- Navbar Menu Query in Stack Overflow - Fixing items below the header in the navbar
- Collapsible Query in Stack Overflow - Fixing collapsible error on mobile
- Data Structure Youtbe Video - Organizing products, categories, and showing products on the website
- How to Zoom - Zoom images on hover
- Collapsible product details page - Materialize CSS documentation for collapsible product details page
- Center col in Materialize - Stack Overflow thread on centering columns in Materialize
- Cards on T&Cs - Stack Overflow thread on scrolling tbody in Materialize
- Adding multiple categories - Adding multiple categories in Django
- Search function synonyms - Using NLTK WordNet for synonyms in the search function
- Button styling - Adjusting the width of multiple buttons
- Cart error help - Fixing attribute error in the cart
- Remove button - Fixing remove item and quantity buttons in the cart
- Address API - Using the Geopy library for the address API
- Dialogs - Materialize CSS documentation on dialogs
- Country selector - Stack Overflow thread on creating a country drop-down list in Django
- Stripe - YouTube tutorial on integrating Stripe with Django
- Stripe2 - Integrating Stripe payments with Django
- Stripe3 - Stripe documentation for quickstart with checkout
- Buttons - Stack Overflow thread on CSS for clickable elements
- Modal for delete buttons - Materialize CSS documentation for modals
- Detecting Ctrl click - Detecting Ctrl click in JavaScript
- Checkboxes - Materialize CSS documentation for checkboxes
- Fixing selected options - Fixing selected options in jQuery
- Slack thread Project 4 Boutique Ado - Fixed the issue with the webhook!
- Getting quantity to show correctly - Fixing AttributeError in Python
- Timezone help - Stack Overflow thread on fixing RuntimeWarning in Django
- Favicon error - Stack Overflow thread on preventing favicon.ico requests
- 404 Pages - Help to make the pages redirect to 404 and 500 pages when required
- Wishlist - created a wishlist using the code noted in stack overflow
- Contact - created a seperate contact app for users to contact us
| Commit Title | Commit Description |
|---|---|
| Moved error pages and views to the main app | Ensured error pages and views apply to all pages correctly. |
| Server error 500 page and Google login enhancement | Created a server error 500 page and added onclick functionality to Google login for social media login access. |
| Fixed monthly sales calculation in admin dashboard | Adjusted calculation of the first and last moments of the month for accurate monthly sales data. Set the first moment of the month to midnight (00:00:00) on the first day and the last moment to 23:59:59 on the last day. |
| Removed redundant JS for Heroku contact test | Removed redundant JS code for testing Heroku contact functionality. |
| New product category added to edit product page | Added a new product category to the edit product page for the site owner's flexibility in changing new products. |
| Tracksuits removed from menu as item was deleted | Removed tracksuits from the menu as the tracksuit item was deleted. |
| Refactored image size on products page | Refactored image size on the products page to display the full item. |
| Attempted fix on product deletion issue (multiple commits) | Fixed issue for a product deletion in the delete_product view. |
| Updated navbars for new contact page location | Updated navbars to function with the new location of the contact page, allowing storage of contact form submissions in the database. |
| Removed redundant code related to migrated contact us html | Removed redundant code from the urls and views pages related to the migrated contact us HTML. |
| Moved contact us form, js, and css to its own model | Moved the contact us form, JS, and CSS to its own model in the contact app. |
| Created initial migration for ContactSubmission model | Created an initial migration for the ContactSubmission model and applied migrations to update the database schema. |
| Created and implemented ContactSubmission model | Created and implemented the ContactSubmission model in the contact app. |
| Refactor: Enhanced page layout for improved viewing | Applied optimisations to the layout of products and product detail pages for improved viewing and navigation. |
| Made Out of Stock Products unable to purchase | Enhance product detail page to dynamically disable size buttons based on available stock. Updated the product detail page to generate buttons for available sizes. Buttons are now dynamically disabled if the item has no stock associated with it. |
| Implemented conditional styling for Wishlist | Wishlist column width is adjusted based on the number of orders. |
| Reverted to previous state before resubmission | Reverted changes made in checkout to previous code on the original submission that passed. |
| Addressed PEP8 style guidelines for all python pages | Addressed PEP8 style guidelines for improved readability. |
| Enhanced contact us view with docstring | Enhanced contact us view with docstring information. |
| Make wishlist product images clickable links | Made wishlist product images clickable links to product details. |
| Removed print statements from the code | Removed unnecessary print statements from the code. |
| Remember me button hidden, as not being used in form | Hidden 'Remember Me' button as it is not being used in the login form. |
| Custom page titles added to templates | Added custom page titles to templates for better SEO. |
| Contact model information added to readme | Added contact model information to the readme. |
| Added new database, login information | Added new database, login information, and register images to readme. |
| Fixed monthly sales calculation in admin | Fixed monthly sales calculation in admin dashboard. |
| Removed redundant JS to test Heroku | Removed redundant JS code used for testing Heroku. |
| Value changed to match ID number 6 for new category | Value changed to match ID number 6 for a new category. |
| New product category added to edit product page | New product category added to the edit product page for flexibility. |
| Tracksuits removed from menu as tracksuit item deleted | Tracksuits removed from the menu as the tracksuit item was deleted. |
| Refactored image size on products page | Refactored image size on the products page to display the full item. |
| Attempted fix on product deletion issue | Attempted fix on the product deletion issue in the delete_product view. |
| Fixed modal display issue by correcting line break | Fixed modal display issue by correcting the line break in the delete confirmation message. |
| Copy products page delete modal code to product details page | Copied products page delete modal code to the product details page for troubleshooting. |
| Remove AJAX profile update functionality in checkout process | Due to timing constraints and wanting the website as fully functional as possible, the site wasn't ensuring payment when user was logged in. |
| Updated terms and conditions page | Resolved 500 error. Contact URL was causing an error as the contact has moved to its own app. Removed redundat code from home views page. |
| Remove 'defer' attribute from stylesheet link | The 'defer' attribute is not applicable to stylesheets and has no effect in this context. |
The content for this project was a concept piece of graphic design crafted by Nathan Brain
View Nathan's linkedin profile HERE
His expertise and dedication greatly contributed to the quality of the material.