Re-Boot is a non-profit making product exchange portal that provides a secure hub for the recyling of good quality rugby boots. The website targets the rugby playing community through keeping the cost of participation to an inexpensive level.
A marketplace is created by the registered customer through donating unwanted rugby boots. For juniors, foot growth is the main reason for changing their boots, whereas adults may look to change for improved performance or manage issue of wear & tear. Irrespective of age or gender, Re-Boot aims to serve a rugby playing community with low-cost and good quality replacement boots at a fraction of the retail price.
Once registered, customers will enjoy secure access to their own 'MyReBoot' webpage where the logged in user can donate unwanted rugby boots, create a blog post and reset their Re-Boot password.
Furthermore, a reduced carbon footprint can be achieved through avoiding the purchase of brand new rugby boots and shift to product reuse to reduce unecessary landfill waste.
A live demo of Re-Boot can be found.
- UXD Considerations
- Information Architecture
- Technologies Applied
- Re-Boot Summary Functions
- Features
- Tests
- Deployment
- Credits
- The registered customer belongs to a community of rugby enthusiasts
- Value for money product offerings made available
- Access to well known brands to support any concerns upon product quality
- Fulfil a moral obligation to not throw away good quality products and seek to recycle
- Start a blog conversation upon availability of rugby boots not yet appearing on Re-Boot website, etc
- Happy to browse current stock, without obligation to purchase
- Assured that personal details are secure from unauthorised access
- Only registered users can donate and purchase Re-Boot products to help deliver assurance on personal data security and trading
- Creation of a MyReBoot account is only for registered users to ensure bonafide credentials
- Provide a simple and intuitive site for the user to click, search, read, create, add, update & delete own data. Access levels are determind through whether user has successfully registered
- Use customer feedback to further improve the offerings of Re-Boot
- Monitor product demand to help generate positive marketing campaigns
- Increase product density through expanding scope of sports footwear genres
- Leverage footfall data to attract commercial online advertising, with resultaqnt revenues used to maintain and grow website
- Affiliate with professional sport organisations through embracing product recyle credentials
- Create social media channels to promote 'Re-Boot'
My wireframe mock-up designs have been created in Balsamiq to showcase the 'Re-Boot' website responsivenesson mobile, tablet and desktop devices.
• Home
• About
• BootShop
• Help
• Search
• MyReBoot
• Cart
I need an app that provides quick and intuitive access to understand how to donate & purchase either new or used rugby boots [READ]
I want detailed information on make, size, colour and stud type of a replacement rugby boot [READ]
My personal information must be secure and password protected {CREATE, READ & UPDATE]
My donated rugby boot information must be kept in a secure environment and protected from unauthorised edit & or deletion [UPDATE & DELETE]
Obsolete rugby boot donations can be removed from my profile by an authorised user [READ & DELETE]
To have access to a blog function to understand availability of replacement rugby boots that may not be appearing on Re-Boot website [CREATE, READ & UPDATE]
I would like the opportunity to write a review / provide feedback of my user experience [CREATE, READ & UPDATE]
I'd like to upload my rugby boot donation by adding make, size, colour, stud configuration and image too [CREATE, READ & UPDATE]
I would like the flexibility to donate and purchase rugby boots at different times. Replacement boots may not be available at the time of boot donation [CREATE, READ & UPDATE]
I want to be able to delete unwanted rugby boot products from my shopping cart [DELETE]
Replacement boots - I'm willing to pay £5.00 for junior boots and £10.00 for adult boots [READ]
Both SQLite3 (development) and postgreSQL (production) databases store the following tables:
auth_user
blog_posts
checkout_orders
products_products
-
Schema Plan takes the original user stories to create a data conversion model. This model is then used to produce a formal database schema model, as shown in the plan and separated out below
Bootstrap was the chosen framework for styling my project. I used the Bootstrap grid extensively to support responsiveness on mobile, tablet and desktop devices.
Colours used in this project were sourced through consultation with my mentor Simen Daehlin. Essentially, the colours are seeking to capture key attrbutes of rugby through energy, assertiveness and co-ordination.
| Colour | Hex Code |
|---|---|
| Rich Black | #001514 |
| White | #FFFFFF |
| Vivid Tangelo (Orange) | #F26826 |
| Blue Sapphire (Dark Green) | #135A68 |
| Space Cadet (Dark Blue) | #21295C |
Open Sans & Sans Serif fonts were used throughout this project. H1 header was used in the home page to help qualify 'Why Re-Boot?'to the user. Thereafter, H2 & H3 was used for sub-heading narrative.
Font-weight of 400 & 700 was used to help draw attention to the user for both branding and instruction too.
Re-Boot brand was self-built through use of MS Powerpoint tools.
Font Awesome 5 icon graphics were used in conjunction with Bootstrap 4, primarily to support information page headers
- latest arrivals & boot quality =
fas fa-shoe-prints - faq's =
fas fa-comments - contact us -
far fa-inbox - privacy policy -
fas fa-lock - terms & conditions -
fas fa-exclamation-triangle - donate rugby boots -
far fa-handshake - blog post -
far fa-envelope
For Desktop view only, the navbar splits into 2 areas. There is an analogy here where rugby posts are split into 2, but connected bya crossbar. Re-Boot app is the crossbar supporting the split navbar posts. I appreciate this analogy maybe difficult to understand for anyone not following rugby.
The logged in user also benefits from a cart pop-over function that informs the user of the following:
- User ID (Username)
- GBP value of cart contents
- Button to view detailed cart contents
Django application framework was a prerequisite in the design of this project, according to the project brief.
Django framework is fast, secure and scalable. Provides a dynamic CRUD (create, read, update and delete) interface, configured with admin models and generated via introspection. requiring SQL database
- SQLITE3 database was used for development of this project on my local machine
- PostgresSQL was used support the full production of the Re-Boot website. An enterprise-level, object-relational DBMS that uses procedural languages like Perl and Python, in addition to SQL-level code
A User model used to support this project is the default standard provided by django.contrib.auth.models
| Name | DB Key | Field Type | Validation |
|---|---|---|---|
| Title | post.title | CharField | max_length=200 |
| Author | post.author | CharField | max_length=75, null=True |
| Content | post.content | TextField | |
| Created Date | post.created_date | DateTimeField | auto_now_add=True |
| Published Date | post.published_date | DateTimeField | blank=True, null=True, default=timezone.now |
| Views | post.views | IntegerField | default=0 |
| Tag | post.tag | CharField | max_length=30, blank=True, null=True |
| Image | post.image | ImageField | upload_to="images", blank=True, null=True |
- Blog post creation occurs within MyReBoot, once user has logged in
- Blog images are stored in the
mediadirectory
Within the checkout app, Order and OrderLineItem models hold the data needed for users to create and pay for their orders.
| Name | DB Key | Field Type | Validation |
|---|---|---|---|
| Full name | full_name | CharField | max_length=50, blank=False |
| Phone number | phone_number | CharField | max_length=20, blank=False |
| Country | country | Charfield | max_length=40, blank=False |
| Postcode | postcode | CharField | max_length=20, blank=True |
| Town or City | town_or_city | CharField | max_length=40, blank=False |
| Street address 1 | street_address1 | CharField | max_length=40, blank=False |
| Street address 2 | street_address2 | CharField | max_length=40, blank=False |
| County | county | CharField | max_length=40, blank=False |
| Date | date | DateTimeField |
- An
Ordermodel instance is created before anyOrderLineItems.OrderLineItemsrely on theOrdermodel for aForeignKey.
| Name | DB Key | Field Type | Validation |
|---|---|---|---|
| Order | order | ForeignKey to Order | Order, null=False, on_delete=models.CASCADE |
| Product | product | ForeignKey to Product | Product, null=False, on_delete=models.CASCADE |
| Quantity | quantity | PositiveSmallIntegerField |
- An OrderLineItem instance is created for each unique product in the users cart, linking a users existing Order, product and quantity the user elects to purchase
| Name | DB Key | Field Type | Validation |
|---|---|---|---|
| Make | product.make | CharField | max_length=254 |
| Category | product.category | CharField | max_length=254, choices=category_choices |
| Customer | product.customer | CharField | max_length=50, choices=category_choices, null=True |
| Size | product.size | IntegerField | |
| Colour | product.colour | CharField | max_length=50 |
| Studs | product.studs | CharField | max_length=50 |
| Quality | product.quality | CharField | max_length=50, null=True |
| Price | product.price | DecimalField | max_digits=6, decimal_places=2 |
| Image | product.image | ImageField | upload_to='images', blank=True, null=True |
Category choicesare defined within theProductmodel
• SQLite3 provided by Django for a developemnt database
• PostgresSQL provided by Heroku for a production database
• HTML used as the markup language
• CSS3 used to style the HTML
• JavaScript used mostly for DOM manipulation
• Python used to run the backend application
• Font Awesome to provide the icon set for Re-Boot website
• Google Fonts provided the fonts used throughout the project
• jQuery is used to manipulate the DOM, for example buttons, and showing / hiding elements
• Bootstrap to enable ease of website responsiveness and simplify coding structure
• SweetAlert used as an alternative solution to Javascripts pop-up boxes
• AWS Cloud9 a cloud-based integrated development environment (IDE) that lets you write, run, and debug your code with just a browser.
• AWS S3 Bucket provides for secure cloud based repository in storage of website images
• Balsamiq is a small graphical tool to sketch out user interfaces, for websites and web / desktop / mobile applications and used to visualise my project through mock-up design.
• Boto3 enables the creation, configuration and management of AWS S3
• Coverage for python unittests code coverage measurement
• Django high-level Python Web framework that encourages rapid development and clean, pragmatic design
• Django-Heroku enabling improved deployment of django projects on heroku
• Django-Storages custom storage backending with Django to work with AWS S3 and Boto3
• Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
• GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.
• Gunicorn enables deployment of the Django project to heroku via UNXI WSGI HTTP Server
• Jigsaw - CSS validation this validator checks the markup validity of CSS style sheet and ensure coding convention is upheld
• JS Hint a tool that helps to detect errors and potential problems in the javascript code
• PEP8 checks python code to ensure compliance with PEP8 requirements. PEP8 is the latest accepted standard code structure convention
• Pillow a python imaging library enabling image files to store in database
• PIP enabling installation of tools and packages required for this project to function correctly
• psycopg2 a PostgreSQL production database adapter for Python
• Stripe payment platform to validate debit and credit card payments securely
• Sweetify allows you to use SweetAlert2 for your temporary messages
• Travis for continuous integration via GitHub and autonomous testing of project code
• Whitenoise allowing the web app to serve its own static files
• W3C - HTML validation this validator checks the markup validity of HTML web documents
• Heroku is used to host the deployed application - 'Re-Boot'
• User has a mandatory requirement to complete the registration & authentication form when clicking on the sites url address
• Register & Login data entry requirements include username and password. Where appropriate, data entry governance exists in the form of required attributes meaning all requests for data must be completed prior to access the full Re-Boot website
• All usernames and passwords will be unique to avoid unauthorised access to third party boot donations
• Logged in users will have access to their own Re-Boot webpage with full access rights to donate boots, create a blog post and reset a password
• Logout is activated through clicking the 'Logout' narrative positioned in the navbar. The user will then return to Re-Boot homepage
• Normal html convention rules followed by placing the navbar brand logo 'Re-Boot' in the navbar, at the top left corner. The User has unhindered access to this logo and when clicked, will always return the user to the homepage.
• An elevation statement has been created to promote Re-Boot to the User to set out its purpose, value generators, responsive to user stories and reference to key features
• A read only view created to show the user how best to navigate through Re-Boot via 4 steps
• From browse stock > register / login > donate unwanted boots > purchase replacement boots
• All users can view latest boot arrivals to whet the users appetite and potentially increase Re-Boot membership numbers
• All boots on show are donated by existing Re-Boot members and subject to a self-governing quality classification. New Boots, Almost New and Used Boots
• Only registered users can trade in donation and purchase of Re-Boot products
• A detailed insight created to promote Re-Boot to the User to set out its purpose, value generators, responsive to user stories and reference to key features
• Pricing set at £5.00 per pair of replacement rugby boots.
• Boot size conversion table, including UK & Euro sizing from UK/Euro 8/25 to UK/Euro 2.5/35 inclusive
• Pricing set at £10.00 per pair of replacement rugby boots.
• Boot size conversion table, including UK & Euro sizing from UK/Euro 3/36 to UK/Euro 15/49 inclusive
• Clear and definitive guidelines on donated rugby boot tolerance
- New Boots: Original box included
- Almost New: Super condition
- Used Boots: Worn in, avoiding blisters
• More detailed information on required quality standards can be viewed in FAQ's page
• A repository of donated junior rugby boots available for purchase by a registerd user
• Each product card includes a juniors name tag, full colour product image, boot make, boot size, price and a 'read more' button to access further product information
• A repository of donated adult rugby boots available for purchase by a registerd user
• Each product card includes a adults name tag, full colour product image, boot make, boot size, price and a 'read more' button to access further product information
• Any user has access to full page of Re-Boot FAQ's
• FAQ Purpose is to help user navigate through Re-Boot website and to offer support with the process of donating and purchasing rugby boots
• If a question cannot be answered in FAQ page, then the user is invited to click a 'get in touch' button. The user is then presented with a contact form. Once completed the form will be sent directly to Re-Boot email address.
• All users can complete a contact form to alert Re-Boot of any question, concern, note of appreciation, etc
• The user is required to complete their full name, email address, brief subject narrative and a detailed comment setting out their query
• Find Re-Boot information is also made availabe to the user. Including Re-Boots' address, telephone number, email, business hours, collections data and company vat number
• The user is invited to click a 'submit enquiry' button. The form will be sent directly to Re-Boot email address
• User is requested to key in either a partial or complete rugby boot brand name to initiate a search within the current BootShop
• Search function is available for all users. Logged in users will get to proceed to purchase searched products, if required
• Leaving the search field blank will result in all available BootShop products being shown to the user
• Logged in users are allocated their own portal space to donate rugby boots, create ther own blog message and reset their password
• All donated rugby boots added by the logged in user will appear in BootShop portal space and can then be viewed by other registered users
• New blog posts will appear in a consolidated blog forum to allow other registered users to read and respond
• Password resets are initiated by the registered user. The user will be asked for their email address, where upon a response email is submitted to the user with a link to enable their password to be securely changed
• Logged in users have full access to the BootShop to browse collection of rugby boots for sale
• The product detail page includes an 'add to cart' button. Once clicked, the selected product will then appear in the shoping cart. A visible counter will then increment +1 for each product added to the cart
• Cart items can be deleted by the user, in the event the user no longer wishes to proceed with a purchase. The user will simply enter a zero value in the input box and click 'delete'. The cart counter will reduce -1, but not less than zero
• If the user wishes to proceed with their purchase, then a 'checkout' button will be clicked by the user
• The checkout process requires the logged in user to enter the following information:
- Full name
- Phone number
- Country
- Postcode
- Town or City
- Street Address 1
- Street Address 2
- County
Followed by payment information:
- Credit card number
- Security code (CVV)
- Month (Card Expiry)
- Year (Year Expiry)
• Once user is happy with their data entry, all required fields are completed and validated, then the user can click 'Submit Payment' button
• Payment process is managed via Stripe vendor
• Provides a social media link to LinkedIn and a link to my Facebook page. Fonts (icons) secured from bootstrap 4 / font awesome 5. The links are wired to the website designers’ respective social media sites
• Trading links that enables the user to access either juniors or adults Bootshop. Only logged in users can proceed to donate and purchase Re-Boot products
• Site links enable the user to access the following:
- 'About': Re-Boot explained
- 'Contact': Send a message to Re-Boot
- 'Cookies': Information on defintion and usage
- 'FAQ's': Questions and answers for all users
- 'Privacy Policy': Re-Boots' position on customer data protection
- 'Terms & Conditions': Rules that apply to both User and Re-Boot
- Alternate sporting footwear to be included for a future release
- Add 'for sale' and 'sold' signs on each rugby boot product to help user understand product availability
- Deleted cart items to be reversed by the user, in the event human error was responsible for the original product deletion
- A dedicated favourite products page that allows the user to import favourite product records into MyReBoot
- Additional sporting categories that relate to Re-Boot customers. The list is will be quite extensive and could be developed by creating a new 'key value' field, per record held in postgresQSL database. For example;
category': "male"category': "female"category': "professional"category': "amateur"
Test analysis and reporting can be viewed in a separate TESTS.md file.
This project can be run on your own IDE through following the guidance notes below:
Ensure you have the following tools:
-
An IDE such as AWS Cloud9, for example. There are others in the marketplace
-
Stripe, AWS S3 and emailjs offer free services and are essential in ensuring hinder free access to your website, plus enablement of payments, storage and email services
Your advised to click the links above for guidance on installation and retrieval of the necessary environment variables.
- Save a copy of your GitHub repository by clicking the "download zip" button at the top of the page, then extract the zip file to your chosen local folder. Alternatively, you can clone the repository with the following command, if you have Git installed on your system
git clone https://github.com/username/filename
-
From your preferred IDE, open a new terminal session in the unzip folder or cd to the correct location
-
A virtual environment is recommended for the Python interpreter. Enter the following command:
python3 -m .venv venv
NOTE: The
pythonpart of this command and the ones in other steps below assumes you are working with a windows operating system. Your Python command may differ, such aspython3orpy
- Activate the .venv with the command in Linux Ubuntu. The /bin directory contains the activate file
source ./bin/activate
This command may differ depending on your operating system. Suggest you refer to Python Documentation on virtual environments for further guidance.
- If needed, consider upgrading pip locally with
pip3 install --upgrade pip
- Install all required modules / packages with the command
pip3 -r requirements.txt
- If using AWS Cloud9, create a new file called
env.pyin your IDE root directory. Add the following environment variables, knowing that the sensitive data will not be visible to any other user
import os
os.environ.setdefault("SECRET_KEY",'enter key details here')
os.environ.setdefault("AWSC9_HOST",'enter key details here')
os.environ.setdefault("DATABASE_URL",'enter key details here')
os.environ.setdefault("STRIPE_PUBLISHABLE",'enter key details here')
os.environ.setdefault("STRIPE_SECRET",'enter key details here')
os.environ.setdefault("AWS_ACCESS_KEY_ID",'enter key details here')
os.environ.setdefault("AWS_SECRET_ACCESS_KEY",'enter key details here')
os.environ.setdefault("EMAIL_USER",'enter email details here')
os.environ.setdefault("EMAIL_PASS",'enter key details here')
- If using AWS Cloud9, locate the settings.py file and add your environment variables as below.
import os
import dj_database_url
if os.path.exists('env.py'):
import env
"DATABASE_URL" in os.environ:
DATABASES = {
'default': dj_database_url.parse(os.environ.get('DATABASE_URL'))
}
SECRET_KEY = os.getenv('SECRET_KEY')
ALLOWED_HOSTS = [os.getenv('AWSC9_HOST', 'reboot-pbf.herokuapp.com')]
AWS_ACCESS_KEY_ID = os.getenv("AWS_ACCESS_KEY_ID")
AWS_SECRET_ACCESS_KEY = os.getenv("AWS_SECRET_ACCESS_KEY")
STRIPE_PUBLISHABLE = os.getenv('STRIPE_PUBLISHABLE')
STRIPE_SECRET = os.getenv('STRIPE_SECRET')
EMAIL_HOST_USER = os.environ.get('EMAIL_USER')
EMAIL_HOST_PASSWORD = os.environ.get('EMAIL_PASS')
AWS C9 HOST should be the local address for the site when running within your own IDE.
A developemnt environment variable is set only within the development environment, it does not exist in the deployed version, making it possible to have different settings for the two environments. For example setting DEBUG to True only when working in development and not on the deployed site.
- Migrate the admin panel models to create your database template with the terminal commands
python3 manage.py makemigrations
python manage.py migrate to ensure all tables have been updated into your database
- Create your superuser to access the django admin panel and database with the following command, and then follow the steps to add your admin username and password:
python3 manage.py createsuperuser
- The app can now be run locally with the following command:
python3 manage.py runserver $IP:$PORT
-
App should be running. Now use the local link provided and add /admin to the end of the url address. Login with your superuser account and create instances of new product within the new database.
-
Once instances of new products exist in your database, your local developemnt website will run as expected.
The site has been formally deployed to Heroku and the latest version of my application can be found here. The following steps were taken in order to deploy:
Apply the following steps to deploy Re-Boot app to herokus:
-
Create a
requirements.txtfile using the terminal command pip freeze > requirements.txt -
Create a
Procfilevia the ubuntu bash terminal commandecho web: python3 app.py > Procfile -
Key
git addandgit committhe new requirements and Procfile and thengit pushthe project to GitHub repository -
Create a new app on the Heroku website by clicking the "New" button in your dashboard. Give it a name and set the region to whichever is applicable for your location.
-
Your heroku dashboard will then invite you to click on "Deploy" > "Deployment method" and select GitHub
-
Check and confirm the heroku app is linked to the correct GitHub repository
-
Return to your heroku dashboard. Click on "Settings" > "Reveal Config Vars"
-
Complete the following config vars:
| Key | Value |
|---|---|
AWS_ACCESS_KEY_ID |
"Enter secret key" |
AWS_SECRET_ACCESS_KEY |
"Enter secret key" |
DATABASE_URL |
"postgreSQL database url address" |
DISABLE_COLLECTSTATIC |
1 |
SECRET_KEY |
"Enter secret key" |
STRIPE_PUBLISHABLE |
"Enter secret key" |
STRIPE_SECRET |
"Enter secret key" |
-
From the command line of your local IDE:
- Enter the heroku postgres shell
- Migrate the database models
- Create your superuser account in your new database
Expert guidance on how to do these steps can be found in the heroku devcenter documentation.
-
Return to your heroku dashboard. Click "Deploy". Scroll down to "Manual Deploy". Select the master branch then click "Deploy Branch"
-
Once the build is complete, click the "View app" button provided
-
From the link provided, append
/adminto the end of the url address. Login with your superuser account and create instances of new products within the new database -
Where instances of the new products exist in your database, your heroku production site will run as expected
- Shoe sizes reported in both UK and Euro systems sourced from Shoe sizing charts
- Cart popover Javascript snippet that helps a user understand the GBP value of their shopping cart from the navbar. The CSS & HTML code was reworked by myself
-
Rugby boot images were taken from prodirectrugby
-
Rugby background and banner images were taken from pixabay and Olga Guryanova, both royalty free stock image libraries
-
Favicon image was created by myself
-
Images for Browse, Donate, Purchase, Feedback and Empty Shopping Cart pixabay
-
User register image flickr.com
-
Junior and adult rugby images clipart
Simen Daehlin (Current Mentor) - For clear guidance on opportunities to improve website design using improved normal HTML & CSS conventions. Simpler coding practice makes for better output. Theo Despoudis (Previous Mentor) - For his guidance in previous milestone projects and helping understand the finer detail of Javascript & Python coding
Slack Community and the following experts to keep me honest and focused.
Samantha Dartnell - @ Sammy Dartnell_lead & Faidon Minas Dermesonoglou - @ Feddie_alumni
This is for educational use.