This application (app) has been designed and coded for the 'Full Stack Frameworks' milestone project in the Full Stack Developer course at the Code Institute.
The app is an ecommerce website for golfers to find deals on new golf equipment, reducing the cost of playing the sport.
To run the live app hosted on Heroku, please go here .
This project was written in Gitpod IDE, using Python, Django, CSS, HTML and Javascript.
Payments are handled via stripe API.
All images are hosted in a specific AWS Bucket created for the project.
To log into the app please click the 'Hello! Sign In' link in the nav bar at the top of the page, and click on the register button.
You can then create a new account with your email address. A confirmation email will be sent to your registered email confirming successful registration.
Please note, email addresses and usernames must be unique.
You will then be able to log in to the site and make purchases.
Please use the following test card details for purchases:
- Card number: 4242424242424242
- Expiry Month: 4
- Expiry Year: 2022 (Any future date will work)
- CVV: 111 (Any 3 digit number will work)
Code is stored in my github repository here .
The below criteria were set out by Code Institute as an example project outline to follow.
In this project, you'll build a full-stack site based around business logic used to control a centrally-owned dataset. You will set up an authentication mechanism and provide paid access to the site's data and/or other activities based on the dataset, such as the purchase of a product/service.
By authenticating on the site and paying for some of its services, users can advance their own goals. Before authenticating, the site makes it clear how those goals would be furthered by the site.
The site owner is able to make money by providing this set of services to the users. There is no way for a regular user to bypass the site's mechanisms and derive all of the value available to paid users without paying.
The project criteria specified that PostgreSQL be used as the database for the project.
Database model can be found here
The back end was developed using Django 1.11.28 and Python.
Ux Wireframes can be found here
My main design philosophies were:
- Simple, clear display for products and related information.
- Mobile first.
- Blue, White, Green colour scheme.
- Help users purchase single or multiple products as easily as possible.
There are two main user stories for this project.
As a customer and user of the site I want to be able to register/sign in easily, find products I want to buy and make a purchase.
As the owner of the site, I want to be able to make money from products listed on the site.
In order to access the site, users must first register and then login.
This is done via the navigation bar, where the user has the option to sign in if not currently signed in.
If the user tries to login with invalid credentials, they will be sent a message and redirected to the login page.
Login and registration forms are required fields. If a user attempts to leave any fields blank they will be shown a message on the front end to prevent submission.
Uses can reset their password by clicking on the reset password link on the login or registration page and follwoing the instructions provided.
On the main page, users can see a display of all products in the database. To avoid congestion, all results are limited to 12 results per page. There is pagination at the bottom of the screen so that the user can navigate through results.
A variation of a Post model was used for products to allow Admins to easily post new products to the database via the admin panel. This is only visible by admin users.
To find products, users can easily search using the search bar at the top of the page.
Users can also filter results via the filters above the search results.
Users can click on the product title or image to navigate to the individual product page. Once there, they can add a quantity of items to the cart. The cart icon at the top of the page will show the value of items in the shopping cart for that session.
Users can click on the shopping cart in the navbar to view it.
Once there they can amend the items in the cart and click the button to amend the quantity.
If the cart is empty a message will be displayed to the user and the payment button will disappear.
If the user clicks the payment button they will be taken to the payment screen where they can complete their transaction and recieve a confirmation email.
15 automated tests were created to cover the following topics:
- Accounts - Views, Forms
- Cart - Views
- Checkout - Views
- Posts - Views
These tests can be found in the respective code folders in the github repository.
Manual testing was conducted to check cart functionality, inventory management, payments and error messages.
The testing document can be found here .
Responsiveness was tested on Apple iPhone X, iPad, Samsung Galaxy S8 and Apple iPhone 5s.
The app was developed with the following technologies:
- Django 1.11.28
- Python 3.7
- PostgreSQL
- Javascript / jQuery
- Bootstrap 4
- HTML
- CSS
- Stripe
The following resources were helpful during development.
- Denis Ivy
- JustDjango
- Django for Professionals
- Tutors at the Code Institute - various shared repositories for code and ideas
- Master Code Online
- Farhadur Reja Fahim
As the site grows, it will be necessary to implement some new features not included in the scope of this project.
The list below is not exhaustive and will be added to over time in order to keep the site viable.
- Build out customer profile pages for order tracking and payment details.
- Order management system.
- Build reviews section.