In a world where health, fitness and aesthetics are playing an increasingly important role in our lives, this project was created with the goal of making a fitness e-commerce website for the instagram generation. The website was developed for the target audience of amateur gym goers who increasingly get their gym products from the new generation of fitness 'influencers'. This website is catered for the fans and followers of fitness influencer 'Luke Duffy' and those looking to buy fitness nutrition, merchandise and gym plans from his brand.
Click here to view the deployed site
- Allows guest user to search database for fitness item using search bar available within navbar.
- Allows guest user to clearly navigate to each of the clearly marked four sections of the website, including 'All Products', 'Supplements', 'Merchandise' and 'Online Coaching'.
- Allows guest user to add a product to the shopping bag.
- Allows guest user to click on the 'My Account' button and the 'register' button to sign up to Luke Duffy Fitness, where the guest user will be brought to a seperate web page to input their account details.
- Allows guest user to to click on Secure Checkout to purchase the items in their bag, as well as changing the quantities of the the product they wish to purchase.
- Allows guest user to subsequently input address and debit card details and complete purchase of products.
- Allows users to click on 'login button and input their details to succesfully login.
- Allows logged in user to click on the shopping bag icon to view products already added to bag and 'Grand Total'.
- Allows logged in 'Staff' users to navigate to a staff dashboard where they can add, edit and delete the products available on the site.
- Allows logged in user to sign out of their profile on Luke Duffy Fitness by clicking on the 'Log Out' button within the 'My Account' section on the Navbar.
For my website I used the 'Canva' Pallete generator service to ensure a understated, yet clean color scheme for my website.
Customer, Product, OrderItem and Order models are implemented by the store app.
The product table stores the basic details of each product including its name, image, category sku and price.
A table of order items associates products with quantities and an order. The order table stores the details of each order including shipping details (gathered via the Stripe checkout page), an order id, and an optional customer field, populated if the order was placed by a logged-in user.
Orders are associated with users via a customer table to allow for additional fields to be associated with each customer, such as a field for loyalty points. Although a loyalty points system was implemented, this database structure means such a feature could be added in the future without the need for a major refactoring of the overall schema.
Result: Pass ✅ , all users, regardless of registered/logged in status, can browse through all products, add to bag and make a purchase.
Allows guest user to clearly navigate to each of the clearly marked four sections of the website, including 'All Products', 'Supplements', 'Merchandise' and 'Online Coaching'.
Result: Pass ✅ ,regardless of registered/logged in status, can browse through all sections of website
Result: Pass ✅ , guest users can add items to a temporary basket assigned to them, this will stay there even if page refreshed opened in new tab
Allows guest user to click on the 'My Account' button and the 'register' button to sign up to Luke Duffy Fitness, where the guest user will be brought to a seperate web page to input their account details.
Result: Pass ✅ , guest users can create a username and password to register for the site.
Result: Pass ✅ , attempts to circumvent these requirements returns the following prompts to users, 'This password is too short. It must contain at least 8 characters', 'This password is too common' and 'This password is entirely numerical'
Allows guest user to to click on Secure Checkout to purchase the items in their bag, as well as changing the quantities of the the product they wish to purchase.
Result: Pass ✅ , guest users can change the quantities for each item as well as move to a secure checkout and payment via stripe
Result: Pass ✅ , website navbar changes also to reflect new options available to logged in account.
Result: Pass ✅ ,logged in users are presented with a 'My Orders' option in the dropdown menu where they can view their order history with the option of an 'order again' button.
-
Use the staff login details to add/edit/remove products,
- Username: luke
- Password: testing321
Result: Pass ✅ , Staff login reveals yellow banner at top of screen that brings staff to dashboard to add/edit/remove products from the website
Allows logged in user to sign out of their profile on Luke Duffy Fitness by clicking on the 'Log Out' button within the 'My Account' section on the Navbar.
Result: Pass ✅ , website defaults back to guest experience after a user logs out
- Create an account on www.heroku.com and install the Heroku CLI
- Log the cli in to your heroku account:
heroku login
- From within a freshly cloned copy of this repo run:
heroku create YOUR_APP_NAME
-
This command creates a Heroku "dyno" to which our project can be deployed. It also creates a hobby tier postgresql database, which will be used by the project once deployed.
-
Once the app is created the command will return the url at which the newly created app is running (e.g. https://YOUR_APP_NAME.herokuapp.com/). Take note of this url as we will need it in the next step as our BASE_URL environment variable.
-
Some environment variables must be set in order for the site to run:
- ENV: Set this value to "PRODUCTION"
- SECRET_KEY: A long random string. See django docs.
- BASE_URL: The url of the heroku app we just created.
- ALLOWED_HOST: Same as BASE_URL but without https:// or any slashes (e.g. YOUR_APP_NAME.herokuapp.com)
- STRIPE_SK: Your Stripe secret key (may be a test key eg: sk_test_xxx...)
- EMAIL_HOST_PASSWORD: Password for email account which will send order confirmation emails.
-
Use the Heroku CLI to set these variables:
heroku config:set STRIPE_SK="your_stripe_sk"
heroku config:set SECRET_KEY="your_secret_key"
heroku config:set ENV="PRODUCTION"
heroku config:set BASE_URL="https://YOUR_APP_NAME.herokuapp.com/"
heroku config:set ALLOWED_HOST="YOUR_APP_NAME.herokuapp.com"
heroku config:set EMAIL_HOST_PASSWORD="YOUR_EMAIL_PASSWORD"
-
As the project has the django-heroku package installed, environment variables containing database connection parameters are automatically handled.
-
Open settings.py and edit EMAIL_HOST, EMAIL_HOST_USER and EMAIL_PORT to values that will be compatible with your email provider.
-
Push the project files to Heroku:
git push heroku master
-
Heroku detects a django project, deploys the site files, runs pip install using the project's requirements.txt and runs the manage.py collectstatic command for us.
-
The site should now be live. However, if we click into of the product sections we will get a 500 error. This is because we still need to run database migrations.
-
To run initial database migrations and create a superuser account, open a bash session on the server by running:
heroku run bash
- From within this session, run the following commands, following prompts as required:
python manage.py makemigrations
python manage.py migrate
python manage.py createsuperuser
-
Your deployment of Luke Duffy Fitness should now be fully up and running. Static files are being served by whitenoise with no additional configuration required. Log in with the superuser just created to start adding products!
-
For a full walk through of a Django/Heroku deployment, see this video.
-
This project has used photos, images and inspiration from the following websites:
- I would like to say thank you to my mentor Oluwaseun Owonikoko, who has been of immense help and kindness during my coding journey so far.
- I would like the Code Institute tutors, who have shown great patience in assisting me with my many, many questions.
- I would also like to say thanks the code institute studentcare team who have been really helpful in helping me manage the balance of coding with my ongoing University studies