Surfshop
Surfshop is an online store where users can buy water sports clothing and equipment. There is many online stores that provide users with the opportunity to buy water sports clothing or equipment but there is very few where users can buy both in one place. Surfshop also provides store admins with the ability to add, edit and delete products with ease.
My hosted project is here A link to admin.
Table of Contents
UX
User Goals
The majority of user will into the following two categories:
- A user looking to purchase water sports gear.
- A store admin that wants to add, edit or remove products
User Stories
- As a shopper, I want to view a list of all products to select an item to purchase.
- As a shopper, I want to be able to view single product details to see the price, product rating and available sizes.
- As a shopper, I want to be able to view the total of my purchase at any time to avoid spending too much.
- As a site user, I want to be able to register an account so that i can have a personal account and be to view my profile.
- As a site user, I want to be able to easliy login or out so that i can access my personal account information.
- As a site user, I want to be able to receive an email confirmation after registering so that i can verify my account registration was successful.
- As a site user, I want to have a personalized user profile to view my personal order history and confirmations and save my payment information.
- As a shopper, I want to be able to add items to my wishlist so I can come back and purchase them in the future.
- As a shopper, I want to be able seach for a product by name or description so that i can find a specific product id like to purchase.
- As a shopper, I want to be able to see what ive searched for and the number of results so that i can quickly decide whether the product i want is available.
- As a shopper, I want to be able to select the size and quantity of a product when purchasing it so that i can make sure i don't accidentally select the wrong product quantity or size.
- As a shopper, I want to be able to view items in my bag to be purchased so that i can identify the total cost of my purchase and all items i will receive.
- As a shopper, I want to be able to adjust the quantity of items in my bag so that i can easliy make changes to my purchase before checkout.
- As a shopper, I want to be able to feel my personal information is safe and secure so that i can confidently provide the needed information to make a purchase.
- As a shopper, I want to be able to enter my payment information so that i can checkout quickly with no hassle.
- As a shopper, I want to be able to view an order confirmation after checkout so that i can verify that I haven't made any mistakes.
- As a shopper, I want to be able to receive an email confirmation after checking out so that I can keep the confirmation of what I have purchased for my records.
- As a shopper, I want to be able to get in contact with store owners if I have an issue with one of my orders.
- As a store owner, I want to be able to add a product so that i can add new items to my store.
- As a store owner, I want to be able edit/update a product so that i can change product prices, descriptions, images and other product criteria.
- As a store owner, I want to be able to delete a product so that i can remove items that are no longer for sale.
Wirefames
here are my designs for the site.
The wireframes were made using whimsical
I made some changes from the initial design, they are:
- I added a contact page.
- I reduced the amount of brands available on the home page.
Features
- Navigation menu: Allows users to navigate to any page on the site.
- Search bar: Allows users to search all products on the site.
- User registration: Allows users to sign up to the site by providing a valid email and secure password.
- User authentication: Users can log in by providing their email and password.
- Best selling: Allows users to view the best selling products on the home page.
- Safety equipment area: brings users to all the safety equipment available on the site.
- Top brands: Allows users to view products by the top brands available on the site.
- Water equipment: Allows users to view all the surfboards, wakeboards and kayaks available on the site.
- Contact page: Allows users to get in contact with site owners if they have any issues.
- Bag: Allows users to view items in their bag and also remove unwanted items.
- Checkout: Users can purchase items in their bag. If users are authenticated their delivery information will be prefilled in the form.
- Profile: Allows users to store their payment information if registered.
- Wishlist: Allows users to store items they may want to purchase in the future.
- Product Management: Allows store owners to add, edit and delete products from the site.
Features left to implement
- 404.html page would allow users to navigate back to home page if there was an error.
- Gallery: Would allow users to images or videos of them partaking in water sports.
- Forum: Would allow users to discuss news and locations related to water sports.
- Weather app: Would inform users on what conditions are like for surfing and other sport activities
- Rating: Would give users the ability to rate products.
Technologies
- HTML5
- The project uses html5 to provide structure and content to the site.
- CSS3
- Used to style the site.
- Javascript
- Used javascript for the interactive elements on the site.
- Python
- Used to run the application.
- Bootstrap
- Used for layout and responsiveness.
- Fontawesome
- Used for the icons on the site.
- Django
- Used as the framework for the site.
- Amazon s3
- Used to store static and media files.
- Stripe
- Used for checkout payments.
- Django-allauth
- Used for authentication on the site.
- Git
- Used for version control.
- Github
- Used to host the repository.
- Heroku
- Used to host the site.
- EmailJS
- Used to send emails on the site.
Testing
Browser Compatibility
I tested the website on three different browsers to see if the application works and looks like it should.
Browser | Microsoft Edge | Google Chrome | Firefox |
---|---|---|---|
index.html | pass | pass | pass |
products.html | pass | pass | pass |
Product_details.html | pass | pass | pass |
add_product.html | pass | pass | pass |
edit_product.html | pass | pass | pass |
bag.html | pass | pass | pass |
checkout.html | pass | pass | pass |
checkout_success.html | pass | pass | pass |
profiles.html | pass | pass | pass |
wishlist.html | pass | pass | pass |
logout.html | pass | pass | pass |
login.html | pass | pass | pass |
register.html | pass | pass | pass |
Responsiveness
To test the site on different devices I used all the sizes on google developer tools to test its appearance and its responsiveness.
Device | index.html | products.html | product_detail.html | add_product.html | edit_product.html | bag.html | checkout.html | checkout_success.html | profile.html | wishlist.html | logout.html | login.html | register.html |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Moto G4 | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass |
Galaxy S5 | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass |
Pixel 2 | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass |
Pixel 2 XL | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass |
Iphone 5/SE | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass |
Iphone 6/7/8 | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass |
Iphone 6/7/8 plus | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass |
Iphone X | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass |
Ipad | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass |
Ipad Pro | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass |
Surface Duo | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass |
Galaxy Fold | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass | pass |
Online Validation
CSS3
I used w3.org for validation
File | Valid |
---|---|
base.css | pass |
checout.css | pass |
profiles.css | pass |
Javascript
I used JSHint for validation
File | Valid |
---|---|
CountryField.js | pass |
stripe_element.js | pass |
HTML5
I used w3.org for validation
File | Valid |
---|---|
index.html | pass |
products.html | pass |
product_details.html | pass |
add_product.html | pass |
edit_product.html | pass |
bag.html | pass |
checkout.html | pass |
checkout_success.html | pass |
profile.html | pass |
wishlist.html | pass |
logout.html | pass |
login.html | pass |
register.html | pass |
Python
I used PEP8 for validation
App | Bag |
---|---|
contexts.py | pass |
models.py | pass |
urls.py | pass |
views.py | pass |
App | contact |
---|---|
admin.py | pass |
models.py | pass |
forms.py | pass |
urls.py | pass |
views.py | pass |
apps.py | pass |
App | Home |
---|---|
apps.py | pass |
models.py | pass |
views.py | pass |
urls.py | pass |
App | profiles |
---|---|
admin.py | pass |
forms.py | pass |
models.py | pass |
urls.py | pass |
views.py | pass |
App | checkout |
---|---|
admin.py | pass |
forms.py | pass |
models.py | pass |
signals.py | pass |
urls.py | pass |
views.py | pass |
webhook_handler.py | pass |
webhooks.py | pass |
App | products |
---|---|
admin.py | pass |
apps.py | pass |
forms.py | pass |
models.py | pass |
urls.py | pass |
views.py | pass |
widgets.py | pass |
App | wishlist |
---|---|
admin.py | pass |
models.py | pass |
urls.py | pass |
views.py | pass |
App | surfshop |
---|---|
settings.py | pass |
urls.py | pass |
User Story Tests
- View list of products:
- Go to the products page
- All products are available
- View the details of a product:
- When on products page click on a product.
- All the details for that product are available.
- View the total of a purchase:
- When on a products detail page click add to bag button.
- Total price updates.
- Create an account to view profile:
- Click on my account button.
- Click register.
- Enter required details.
- Go to email address to verify email.
- Click confirm.
- Click on profile
- User can view their profile.
- Login to an account to view profile:
- Click the my account button
- Provide login details
- Click on my profile
- User can view their profile.
- Receive a confirmation email when registering:
- Click on the my account button.
- Click register.
- Enter required details.
- Go to email address
- Personalized profile with order history:
- When registered complete an order.
- Click the profile button in the my account Dropdown.
- Click my profile.
- Order History displayed.
- Sort available products by price, rating and alphabetically:
- Navigate to products page.
- On products page click the 'sort by' dropdown.
- Click the desired filter.
- Add items to personal wishlist:
- When logged in navigate to products page.
- Click on a product.
- Click on 'add to wishlist' button.
- Click my account dropdown.
- Click on wishlist.
- Items are displayed.
- Search products by name or description:
- Type surf in search bar.
- Click the search button.
- Returns items with surf in name or description.
- See what I have Searched for:
- Type surf into search bar.
- Click the search button.
- To the left of the products page number of items and search term are displayed.
- Select size and quantity of item:
- On products detail page click the size of product from sizes dropdown.
- Click the plus or minus to increase or decrease quantity.
- View items in the bag:
- Add item to bag.
- Click shopping bag icon in top right.
- Subtotal is displayed.
- Adjust quantity of items in my bag:
- Add item to bag.
- Click the bag icon in the top right.
- Click remove item button to remove item
- Click the minus to decrease quantity and plus to increase quantity
- Click update to change quantity.
- View an order confirmation after checkout:
- Add items to bag.
- Go to checkout.
- Fill out delivery info and payment details.
- Click the complete order button.
- User is brought to checkout success that displays an order confirmation.
- Receive confirmation email:
- complete an order.
- Go to email inbox of email that was provided.
- Get in contact with store owners:
- Go to contact page
- Complete form
- Click submit.
- Admin receives an email.
- Add product:
- Sign in as superuser.
- Click my account dropdown.
- Click product Management.
- Complete Add product Form.
- Click add product button.
- Edit/Update product:
- Sign in as a superuser.
- Navigate to products page.
- Click edit button on product card.
- Make desired changes to product.
- Click the update button.
- Delete product:
- Sign in as superuser:
- Navigate to products page
- Click Delete button on product card
- Product is deleted.
Bugs
- When site was deployed to heroku some of the images stored in s3 where not loading. I fixed this by switching the images from html < img > tag to background images in css.
Deployment
To deploy this page to heroku the following steps were taken.
- Go to heroku and create a new app with the region set to your closest region.
- In settings tab of your app click reveal config vars.
- Enter the following required environment variables, AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, DATABASE_URL, EMAIL_HOST_PASS, EMAIL_HOST_USER, SECRET_KEY, STRIPE_PUBLIC_KEY, STRIPE_SECRET_KEY, STRIPE_WH_SECRET and finally set USE_AWS to True.
- In your IDE of choice create an env.py containing all of the variables from step 3 and add it to the .gitignore.
- In your IDE of choice create a requirements.txt by using the command pip freeze -local > requirements.txt.
-
- In your IDE of choice create a Procfile by using the command echo web: gunicorn surfshop.wsgi:application app.py > Procfile.
- Go to the Deploy tab and select Heroku Git.
- In your IDE of choice use the command git push heroku master.
To clone this site locally:
- Under the repository name, click "Clone or download".
- In the Clone with HTTPs section, copy the clone URL for the repository.
- Open your IDE of choice.
- Change the current working directory to the location where you want the cloned directory to be made.
- Type git clone, and then paste the URL you copied in Step 2.
- Press Enter. Your local clone will be created.
- In environment settings you will need to add the environment variables from step 3 in deploying to heroku.
- Use 'python3 manage.py makemigrations' to migrate all the models.
Credits
Content
- The code Institute project Boutique Ado was followed during development and much of the layout is based off of it.
Media
- Background Images were Taken from freepik.com
- Brand images and product images were taken from Google images.
Acknowledgements
- Precious my mentor for helping me through out the project.