The Cycle Shop

Welcome - The Cycle Shop

We are an online business specialising in cycling goods including Bikes, Parts and Clothing. Our site will provide users with a smooth online shopping experience all the way the purchase. Our user will also be able to review their favourite items which will help promote additional revenue for the store.

As a ‘Business to Consumer’ (B2C) retailer, we will ship all items to you directly ourselves - no middle men - to avoid any hassle.

We also have an active online presence including FaceBook, Twitter, Instagram and Strava.

Features

Existing Features

Homepage

The homepage is deliberately kept simple in order to make the products take centre stage and be the focus of the users attention as soon as they open the site. The categories of products are bold and obvious, with accompanying images, for the user to jump right and begin browsing the area of their choice.

Navigation Bar

The Navigation bar appears at the top of all pages maintaining a consistent look across the website. It contains links to a specific areas of the site such as categories, search, login. Additional user and cart functionality becomes available when user logs in.

Profile link

User profile can be clicked from the navbar. This will only be available to users that are logged in and will be displayed under their username.

Login link

Only shown when user is not logged in. The login link in the navbar will direct the user to the login page where they can login or create an account.

Cart link

Only available to logged in users. Clicking the cart will direct user to the cart page providing there is items in the users cart, otherwise they will receive an alert. The number of items within the users cart is visible next to the cart icon.

Username displayed

Only available to logged in users. Clicking on the username will present the user with two options; ‘Profile’ and ‘Logout’. ‘Profile’ will direct user to the users profile area and ‘Logout’ will log the user out and direct them to a logout page notifying the user they have been logged out and offer an option to sign in again.

My Orders

User can view their order history in the My Orders section.

Categories

User have a choice to view all products or choose to select one of the product categories found in the navbar.

Product page

Users can view images of the products and read a description as well as add a comment. The ‘add to cart’ button will place the item into the users cart.

Profile page

Users can view and update their profile page including bio and avatar as well as updating their password.

Cart

Users can view their shopping cart which will list all items they have ‘Added to cart’, including quantity and a total price for all items. User can adjust the quanity of items in their cart or remove completely.

Checkout

In the checkout section, users will fill in their delivery details further checkout sections to be included. A list of items to be purchased is also found beside form as well as an order total. The users inout their address, the address will be saved for future use. User cannot proceed to the payment section until all field of delivery address have been complete.

User notification

Users will receive alerts throughout this site for various actions, including adding items to cart, removing items from cart, updating profile page, saving address, password change etc.

Add Comment

Users can add a comment to a particular product which can be seen by other users as a form of review system. The comment will be show alongside the username of the author as well as a time stamp showing the date the comment was made. Comments can also be deleted by the user who created the comment.

Footer

A footer can be found at the foot of every page. This displays links to categories of products as wel as our social media links. User can also enter their email to sign up for our newsletter. Additional contact information can also be found.

Payment

User can purchase their items using the Stripe payment platform.

Payment Success

User will be directed to the 'order success' page when they purchase an item.

Features to add

• Create a star rating system for each product.

• Create a Wishlist for customers to add their favourite products.

• Improve stock level on site

Design

I opted for a simple design, similar to existing sports/cycling stores e.g. wiggle, where the products themselves are the focus and there isn’t too many graphics and colours to detract from this. I played around with different colours but I liked the simplicity of the white background with light grey navbar and footer and I felt this allowed the products themselves to really jump from the page. I thought this also ensured my logo stood out more; this being the main source of constant visual colour throughout the site.

Wireframes

I designed the basis of the website using the Goodnotes app. Inspiration for the layout and content came from wiggle.com and Sigma sports.

Homepage

Product page

Sign up page

User Experience (UX)

Data Model

Testing

Manual Testing

Validator Testing

Python

I fixed the basic errors from the Problems tab in the terminal using flake8. Additionally, all .py files were ran through PEP8 linter. Common errors encountered such as ‘Line too long’, ‘Trailing white space’, ‘Black lines’ etc where found. All where tidied up without any concerns.

HTML

I opened each web page in the browser and copy the rendered HTML code into the validator in order to avoid errors caused by the Django expressions. All HTML code was run through W3C HTML validation service. All errors found where cleared without any concerns.

CSS

CSS files and style tags where ran through W3C CSS validation service and showed no errors.

JavaScript

JavaScript files where validated with JSHint validator and no errors where found.

Responsiveness

The site was tested across several devices with varying screen sizes;

• MacBook - 1280 x 1200
• iPad - 768 x 1024
• iPhone 6/7/8 - 375 x 667

Issues

Issue 1 - Whilst preparing the project for deployment, there was a change made that resulted in the login functionality to stop working. I was greeted with a 403 forbidden error when I attempted to login.

Solution - I tried undoing the changes made for deployment which did not work. I ultimately had to revert to a previous commit to restore the login functionality. When deployment was attempted again, the same bug appeared. After many attempts at various solutions, downgrading the version of Django from version 4 to 3.2.10 seemed to be the fix that was needed.

Issue 2 - When validating HTML for the ‘product_detail’ page, using source code from site, I received the following error; No p element in scope but a p end tag seen. This was despite the additional 'p' tag not being present in my product_detail.html page.

Solution - It appears adding the linebreak filter was the cause of this issue. I found the following solution which removed the error.

Issue 3 - Several stray tag errors are appearing in my add_comment.html when running the HTML source from browser.

Solution - The html file itself is fine and the error seemed to be coming from the block tag pulling a Django form for my forms.py file. I found a similar issue here, and when I changed by block tag from {{form}} to {{form.body}}, this removed the warnings.

Issue 4 - I could not access the site admin at the beginning of the project shortly after setup.

Solution - I found this solution and discovered that simply changing ‘site_id = 1’ ( as instructed in the CI set up video) to ‘SITE_ID=1’ fixed the issue.

Issue 5 - Django media files not working when debug set to False.

Solution - I discovered this solution, which appended the urlpatterns. This displayed my images when debug = False.

Technologies

Editor

• GitPod

Languages

• Python
• HTML5
• CSS3 / bootstrap
• JavaScript

Template

• Django

Deployment

• Heroku

Database

• SQLite
• Postgres (deployed)

Version control

• GitHub

Libraries

• Google Fonts
• Stock Images

Other

• Image resizing - reduceimages.com
• Lucid
• Creating store logo
• GoodNotes app
• Stripe payment

Deployment

This programme was deployed using Heroku

Heroku

1. Log into Heroku, select 'Create new app’.
2. Name your application then within the the dashboard, select settings and scroll down to ‘Reveal Config vars’
3. Enter relevant config vars, remembering to include any environmental variables you have in place.
4. Include Heroku postgres Add on within Resouces tab.
5. Navigate from ‘Settings’ to ‘Deploy’ and select ‘Github’ within the ‘Deployment Method’ section.
6. Search and connect your Github repo in the ‘Connect to Github’ section.
7. Clicking ‘Deploy branch’ will then create your Heroku app and you can view it by clicking the ‘View’ button at the bottom of the page.
   • Selecting ‘Enable Automatic Deploys’ will ensure that your Heroku app is updated each time you push changes from Gitpod otherwise you will have to deploy manually each time using the steps mentioned above.

Local host

1. Install gunicorn and django_heroku.
2. Update requirements.txt file.
3. Add django_heroku to settings.py.
4. Include static_root settings in settings.py.
5. Create json file containing existing data 'python3 manage.py dumpdata > datadump.json'.
6. Export file with 'python3 manage.py loaddata datadump.json'

Credits

1. This resource was helpful with managing my data when deploying.

2. Whilst Code Institute resources where great, I found it invaluable gaining additional view from these providers: Corey Schafer, Mosh, and Net Ninja.

3. Boutique ado was incredibly helpful and is also a similar project to my project therefore I was cautious about following the videos too much. Some other resources I used to guide me where; tutorial 1tutorial 2 guide 1

4. Due to issues noted in 'issue 1', I had to find assistance with deploying app. Several links where helpful including this tutorial & article.

5. I also found this article helpful whwen setting up Stripe.

6. I took my product images and descriptions from sigma sports.

Other

Thank you to Sandeep, my mentor, for providing assistance in this project as well as his guidance throughout the course.