BoWood Audio is a home recording studio that provides a wide range of audio and program editing services. This website's primary intention is to display to the visitor what the studio setup is like and what services are available.
- UX
- Features
- Technologies Used
- Testing
- Deployment
- Credits
The time allocated to build this project was shorter than previous projects, luckily for me, the site owner is very flexible with the scope. The site will be first made to an MVP, and if there is additional time, content/features can be added.
- As a visitor to this site, I want to see what services are available so I can decide if I want to do business here.
- As a visitor to this site, I want to see pictures of the studio, so I know what to expect.
- As a visitor to this site, I want to be able to contact the studio, so that I can make queries or request a booking.
- As a visitor to this site, I want to be able to view the range of products that are on sale, so that I can make an online purchase.
- As a visitor to this site, I want to be able to view individual product details, so that I check product details before deciding to purchase.
- As a visitor to this site, I want to be able to see and post reviews of the products on sale, so that I get a second opinion before I buy or share my opinion with other visitors.
- As the owner of this site, I want a simple landing page, so that visitors can learn about my studio easily and quickly.
- As the owner of this site, I want to be able to have an online store so I can sell merchandise and gift vouchers.
- As the owner of this site, I want a receipt/proof of purchase emailed to me and available to myself.
- As the owner of this site, I want to showcase some of my work, so the user gets an idea of my skills and talent.
This full-stack site is put together with HTML, using the Bootstrap framework along with some CSS and JavaScript on the frontend.
The frontend is integrated into the backend using Python and Django with a PostgreSQL Database.
The page content is dynamic and composed of Jinja templates which are put together using Python Django.
-
Home / Index
-
What we do
-
Contact
-
Gallery
-
Login / Logout
-
Register new user
-
Profile / My details / Edit my Contact details
-
All products
-
Product details / reviews add/edit/delete
-
Shopping bag
-
Checkout
-
New product addition
order_number = models.CharField(max_length=32, null=False, editable=False)
user_profile = models.ForeignKey(UserProfile, on_delete=models.SET_NULL,
null=True, blank=True, related_name='orders')
full_name = models.CharField(max_length=50, null=False, blank=False)
email = models.EmailField(max_length=254, null=False, blank=False)
phone_number = models.CharField(max_length=20, null=False, blank=False)
country = CountryField(blank_label='Country *', null=False, blank=False)
postcode = models.CharField(max_length=20, null=True, blank=True)
town_or_city = models.CharField(max_length=40, null=False, blank=False)
street_address1 = models.CharField(max_length=80, null=False, blank=False)
street_address2 = models.CharField(max_length=80, null=True, blank=True)
county = models.CharField(max_length=80, null=True, blank=True)
date = models.DateTimeField(auto_now_add=True)
delivery_cost = models.DecimalField(max_digits=6, decimal_places=2, null=False, default=0)
order_total = models.DecimalField(max_digits=10, decimal_places=2, null=False, default=0)
grand_total = models.DecimalField(max_digits=10, decimal_places=2, null=False, default=0)
original_bag = models.TextField(null=False, blank=False, default='')
stripe_pid = models.CharField(max_length=254, null=False, blank=False, default='')
order = models.ForeignKey(Order, null=False, blank=False, on_delete=models.CASCADE, related_name='lineitems')
product = models.ForeignKey(Product, null=False, blank=False, on_delete=models.CASCADE)
product_size = models.CharField(max_length=2, null=True, blank=True) # XS, S, M, L, XL
quantity = models.IntegerField(null=False, blank=False, default=0)
lineitem_total = models.DecimalField(max_digits=6, decimal_places=2, null=False, blank=False, editable=False)
label = models.CharField(max_length=254)
image_url = models.URLField(max_length=1024, null=True, blank=True)
# This Model is just used for the contact form rendering, no data is saved
name = models.CharField(max_length=60)
email = models.EmailField(max_length=254)
subject = models.CharField(max_length=60)
message = models.TextField(max_length=3000)
category = models.ForeignKey('Category', null=True, blank=True, on_delete=models.SET_NULL)
sku = models.CharField(max_length=254, null=True, blank=True)
name = models.CharField(max_length=254)
description = models.TextField()
has_sizes = models.BooleanField(default=False, null=True, blank=True)
price = models.DecimalField(max_digits=6, decimal_places=2)
rating = models.DecimalField(max_digits=6, decimal_places=2, null=True, blank=True)
image = models.ImageField(null=True, blank=True)
user = models.OneToOneField(User, on_delete=models.CASCADE)
default_phone_number = models.CharField(max_length=20, null=True, blank=True)
default_street_address1 = models.CharField(max_length=80, null=True, blank=True)
default_street_address2 = models.CharField(max_length=80, null=True, blank=True)
default_town_or_city = models.CharField(max_length=40, null=True, blank=True)
default_county = models.CharField(max_length=80, null=True, blank=True)
default_postcode = models.CharField(max_length=20, null=True, blank=True)
default_country = CountryField(blank_label='Country', null=True, blank=True)
rating = models.DecimalField(max_digits=6, decimal_places=2, null=True, blank=True)
userid = models.ForeignKey(UserProfile, on_delete=models.CASCADE)
product = models.ForeignKey(Product, on_delete=models.CASCADE)
review_title = models.CharField(max_length=90)
review_text = models.TextField()
Colours were sourced from a work in progress design on branding and logo for BoWood Audio.
Colours are mainly Dark mode using:
-
#323232 - Graphite or Jet
-
#BB3C2B - Tall poppy or International Orange Gold
-
#F5CA9F - Manhattan or Peach Crayola
-
#CCB19E - Rodeo Dust or Desert Sand
Font Awesome is used for icons
Images are sourced from Unsplash and the site owner.
The font used is Oswald from Google fonts.
back to contents
-
Online Shop purchases payment can be accepted using the Stripe API.
-
Messages inputted on the Contact form are emailed to the site owner.
-
Responsiveness display is experienced on all screen sizes.
-
Toasts feedback messages to the user.
-
The Photo gallery is connected to a database table, so it can be updated by the site owner on an admin portal.
-
Visitors have full CRUD access to the product reviews they submit.
-
The Product review ratings are updated automatically by Django signals. Each change on the reviews model table triggers the particular product's rating to be re-calculated.
-
Results for Products and review listing in the shop are paginated.
-
The Shopping cart icon on the navbar only displays outstanding balances above zero.
-
Gift Voucher journal handling.
-
Official logo and fresh showcase work (still in progress).
back to contents
- HTML
- CSS
- Python
- JavaScript/Jquery
- Bootstrap
- Jinja
- Fonts: Google Fonts
- Icons: FontAwesome
- django
- django-allauth
- pillow
- crispy-bootstrap5
- django-crispy-forms
- stripe
- django-countries
- dj-database-url
- psycopg2-binary
- gunicorn
- boto3
- django-storages
- Notion: I used Notion for gathering requirements, content, documenting personal notes, and planning workload.
- Pomodoro timer: Tomato Clock is perfect for keeping my work progressing while also making me take breaks!.
- Kanban planner: Github projects.
- JSfiddle: I used this online sandbox to build and play code before adding it to the project.
- Wireframe: Balsamiq
- DB Schema diagram: Drawsql.app
- IDE: Visual Studio Code (VS Code).
- Virtual Environment: Pipenv
- Version control: Git and GitHub Desktop app
- Markdown editor: Typora was used when appropriate, VS code editor was used for most updates.
- Markdown Preview Github Styling: this brilliant vscode extension helps me read my markdown in Github format.
- markdown table of contents creator
- File renaming utility: PowerRename from PowerToys on Windows 10
- Favicon creator: favicon.io
- Autoprefixer CSS: Autoprefixer
- Auto formatter for HTML, CSS and JS: webformatter
- px to rem convertor: nekoCalc
- JavaScript linter: jshint
- Python linter: Pep8 online
- Markdown linter: Markdownlint extension on VS Code.
- Colour names: Name that color
- Colour swatches: Coolors
- Grammarly
- Image editing/cropping: MS Paint
back to contents
-
Home / Index ✔️
-
What we do ✔️
-
Contact ✔️
-
Gallery ✔️
-
Login / Logout ✔️
-
Register new user ✔️
-
Profile / My details / Edit my Contact details ✔️
-
All products ✔️
-
Product details / reviews add/edit/delete ✔️
-
Shopping bag ✔️
-
Checkout ✔️
-
New product addition ✔️
The contact page was giving a 500 server error at one point when the user was attempting to send messages. It turns out, I had reset my Gmail password recently and I didn't realise that this also makes all my current SMTP passcodes invalid(they disappeared from my Gmail settings). So the simple fix was to create and replace the passcode and make sure I remember what to do next time I change my Gmail password.
This Web Application has a "not secure" warning displayed on the browser address bar, this prevents me from using certain online tools for responsiveness testing, so I had to manually test these.
As Django autogenerates HTML and Python, I had to ignore some linting issues. For HTML, W3 validation errors from crispy forms happen on the contact page and the new product page. The Python ones are coming such things as migration scripts and webhooks. I believe these errors can safely be ignored.
Finding time to complete this project on schedule was a big push, but I think I have managed to get the MVP delivered.
For version control, I used the UI on VS Code for making git commits or the GitHub desktop app, Merging was done on the GitHub site. I used branches when I was working on new features or bundles of changes.
To check if all the links are working, I used the wget spider command below. It found 59 links, none of which are broken.
wget --spider -r http://bowood-audio.herokuapp.com/ -o wget.log- Home / Index ✔️
This is a simple landing page, on a small width screen, the navbar is transparent. The Navbar is dynamic based on user type and device type. The shopping cart also hides zero balances from the user.
- What we do ✔️
This page lists out what BoWood Audio does. It is responsive to screen size.
- Contact ✔️
This page contains a contact form. All fields are compulsory, if the message delivery is successful or fails the user is notified immediately.
- Gallery ✔️
This page contains photo images, it is responsive to screen size. The contents can be changed from the Admin portal in the Django backend.
- Login / Logout ✔️
This login/logout screen works are expected.
- Register new user ✔️
This Registration screen works are expected.
- Profile / My details / Edit my Contact details ✔️
On the page, the user can update contact details or view previous orders. This screen is only accessible when a user is logged in.
- All products ✔️
This page listed all the products available, it also can be used to search for products. If a superuser is logged in they can edit or delete products.
- Product details / reviews add/edit/delete ✔️
This Page displays details on each product. The user can submit a review. They can also edit or delete reviews they previously made. The user is prevented from submitting a second new review.
- Shopping bag ✔️
The shopping bag displays the current total and items are displayed in cards. Users can still make a change to the bag contents.
- Checkout ✔️
On this screen, the user has to be logged in to complete the purchase. Credit Card validation is working as expected.
- New product addition ✔️
Only superusers can access this screen.
As this web application is not secure, I had to manually test responsiveness with my own devices and Chrome Dev Tools. No issues were found on the screen sizes below.
| Screen size | Result |
|---|---|
| iPhone 5/SE DevTools emulation (Screen width 326px) xs | Pass |
| Android Mobile phone (Screen width 412px) xs | Pass |
| Android Tablet (Screen width 600px) sm | Pass |
| iPad Tablet DevTools emulation (Screen width 768px) md | Pass |
| Windows laptop (Screen width 2560px) xxl | Pass |
No errors. Resource: https://jigsaw.w3.org/css-validator/
-
base.css ✔️
-
checkout.css ✔️
-
profile.css ✔️
No errors for the pages listed below. Resource: https://validator.w3.org/
-
Home / Index ✔️
-
What we do ✔️
-
Gallery ✔️
-
Login / Logout ✔️
-
Register new user ✔️
-
Profile / My details / Edit my Contact details ✔️
-
All products ✔️
-
Product details / reviews add/edit/delete ✔️
-
Shopping bag ✔️
-
Checkout ✔️
Pages below have minor errors due to the automatically rendered forms made by crispy forms.
-
New product addition
-
Contact
No issues. Apart from files, I didn't create such as the settings, webhooks, migrations files. I believe the below linting error is a false one and can safely be ignored.
.\checkout\apps.py:9:9: F401 'checkout.signals' imported but unusedResources: https://pep8online.com/ and Flake8
No issues. Resource: https://jshint.com/
I shared the project on the peer-review channel on slack, and also with friends/family.
I tested and improved accessibility with lighthouse and Firefox developer tools.
Any issues found were resolved.
| Screen size\Browser | Chrome | Firefox | Edge |
|---|---|---|---|
| Android Mobile phone (Screen width 412px) xs | Pass | Pass | Pass |
| Android Tablet (Screen width 600px) sm | Pass | Pass | Pass |
| Windows laptop (Screen width 2560px) | Pass | Pass | Pass |
-
As a visitor to this site, I want to see what services are available so I can decide if I want to do business here.
BoWood Audios list of services and facilities are listed on the What We Do page.
-
As a visitor to this site, I want to see pictures of the studio, so I know what to expect.
Photos of the Studio are shown on the Gallery page. This page is also updatable from the admin section which the Owner has access.
-
As a visitor to this site, I want to be able to contact the studio, so that I can make queries or request a booking.
The Contact page has a form that the visitor can fill in and send. The message can be sent to a list of email addresses(currently only one).
-
As a visitor to this site, I want to be able to view the range of products that are on sale, so that I can make an online purchase.
Visitors can browse the products selection on the Shop/All items page.
-
As a visitor to this site, I want to be able to view individual product details, so that I check product details before deciding to purchase.
When the visitor clicks on a product from the products page, they are taken to a page giving more details on the product.
-
As a visitor to this site, I want to be able to see and post reviews of the products on sale, so that I get a second opinion before I buy or share my opinion with other visitors.
Reviews are visible on the Product detail page, the visitors can contribute when logged in.
-
As the owner of this site, I want a simple landing page, so that visitors can learn about my studio easily and quickly.
The homepage is simple and responsive to screen size, on smaller screens, the navbar is transparent initially.
-
As the owner of this site, I want to be able to have an online store so I can sell merchandise and gift vouchers.
The shop has various products and gift vouchers on sale.
-
As the owner of this site, I want a receipt/proof of purchase emailed to me and available to myself.
The emails from this web app are set up to be sent by Gmail, so the site owner has full access to the email history.
-
As the owner of this site, I want to showcase some of my work, so the user gets an idea of my skills and talent.
Visitors can view upcoming work on the BoWood Audios Youtube or Soundcloud pages.
back to contents
I developed this application in VScode, While developing this application I used a virtual environment called pipenv. I would recommend you do the same. This repo includes the pipenv compatible dependency setup files, the only thing you need to configure is the environmental variable file (filename: ".env").
Please note The Production and Development versions of this project contains several Environmental variable keys that will not work outside of this project without you refactoring in your keys. Here is a sample of the Local Environmental variables file I used on the development version with keys masked. You will need to replace it with your own.
STRIPE_PUBLIC_KEY=SECRET_KEY
STRIPE_SECRET_KEY=SECRET_KEY
STRIPE_WH_SECRET=SECRET_KEY
SECRET_KEY=SECRET_KEY
EMAIL_HOST_PASS=SECRET_KEY
EMAIL_HOST_USER=email_address
DEVELOPMENT=TrueYou will need :
-
Python installed.
-
A Stripe account.
-
An email address STMP server password or passkey, I recommend using Gmail.
-
A Django Secret Key. You can generate your unique one here
-
An Heroku account with a PostGresSQL app installed.
-
A GitHub account.
-
An (optional) Amazon Web Services account.
To deploy locally on your preferred Desktop IDE, you can clone the repository to your desktop by the following steps.
-
Go to the BoWood Audio github page.
-
Above the list of files, click on the code button.
-
- To clone the repository using HTTPS, under "Clone with HTTPS", click the paste icon.
- To clone the repository using an SSH key, click Use SSH, then click the paste icon.
- To clone a repository using GitHub CLI, click Use GitHub CLI, then click the paste icon.
-
Open your preferred Terminal interface.
-
Change the current working directory to the location where you want the cloned directory.
-
Type git clone, then paste the URL you copied earlier above. The example below is HTTPS for a Windows PC.
git clone https://github.com/kenwals/BoWood-Audio.git
-
Press Enter to create your local clone. more detailed instructions are available here
-
To run the manage.py in the VScode terminal you will need supporting Environmental variables inputted in the .env file(example above).
-
Your VScode should have Python installed already, if it does please ensure it's thereby entering the command below.
python --version
-
Now you need to install Pipenv, enter the command below.
pip install pipenv
-
As this repository has the setup files made already, you can start the environment by entering the command below. More info on Pipenv here and here
pipenv shell
-
You should notice a message like below saying loading ".env environment variables..." this is good, it means your keys are in place.
-
Now to run the application on your desktop, enter the command below and open http://localhost:8000/ on your preferred browser.
python manage.py runserver
Heroku is a cloud platform that can hosts dynamic web applications. Once you have the completed site in your repository, you can deploy it to Heroku by the following steps.
-
Before you set up Heroku, you first need to create some files that are necessary for it to run on the Heroku server.
-
Open a terminal window in your IDE on the root folder of the project, run the command below, this will create a new file called procfile.
echo web: gunicorn bowood.wsgi:application > Procfile -
Now run the command line below. this will create a new file called requirements.txt
pip3 freeze --local > requirements.txt -
Create a Heroku user account
-
Click on the New button and choose to create a new app.
-
Input an app name and choose a region that is closest to you.
-
To input the necessary environmental variables, simply go to the Settings tab, and under Config Vars, Click on Reveal Config Vars, Below is the list I use on my Heroku deployed version. The AWS keys are optional.
-
Now you can deploy, the simplest way is to deploy from GitHub
- Click on the Deploy tab, Under the Deployment method click on GitHub.
- A search window will prompt you to connect to the appropriate repository.
- You can then choose to do a manual or automatic deployment. I recommend Automatic, that way whenever a change is pushed to your main branch on your GitHub repository the Heroku application is re-deployed automatically.
You may wish to contribute to this website and have your contribution published, if so, you are welcome to follow these steps below.
- Go to the GitHub website and log in.
- Open https://github.com/kenwals/bowood-audio
- In the top right-hand corner, you will see a fork button, click on this Fork button.
- This will create a copy of the BoWood Audio repository in your Github account.
- Run the project locally and make your required changes.
- You can push these changes to your repository.
- Once you're finished making changes you can locate the New Pull Request button just above the file listing in the original repository (https://github.com/kenwals/bowood-audio).
- Your pull request will be reviewed and if approved, it will be merged into the main version of the BoWood Audio repository at a future date.
more detailed instructions are available here
back to contents
- The foundation of this site is sourced from Code Institute Educational material - Boutique Ado
- The Review app is influenced by LigaMoons Prikly
- BoWood Audio is a home studio belonging to Paul O'Hara (aka Lego from the band Royseven), content was provided by Paul O'Hara and Paul Walsh.
- Points of reference used for making this web app were Camden Recording Studios and Grouse Lodge.
-
Codemy.com youtube videos on Django contact page setup here and here
-
CodingEntrepreneurs youtube video on how to use Django signals
-
How to make javascript dynamic to screen width. This is used on the homepage to make the navbar background transparent on mobile for this initial load.
Product Images that were sourced from Unsplash are credited below:
- Mug https://unsplash.com/photos/nDd3dIkkOLo
- T-shirt https://unsplash.com/photos/m1MRYp556Ew
- Sweatshirt https://unsplash.com/photos/ikLELWYbyxk
- Baseball cap https://unsplash.com/photos/b9hqQkKCnqw
- Drum sticks https://unsplash.com/photos/bRG2C0FAQEY
- Water Bottle https://unsplash.com/photos/POAQXzBwF7g
- Gift Voucher 50 euro https://unsplash.com/photos/RNlVIhXrz-Y
- Gift Voucher 20 euro https://unsplash.com/photos/HwU5H9Y6aL8
- Guitar pick https://unsplash.com/photos/s2efxWujA-o
- Bottle opener https://unsplash.com/photos/voJB2goG0us
- Tea towel https://unsplash.com/photos/8yIYQDR8Qr8
- Tote Bag https://unsplash.com/photos/nKK32qJheBY
- Wallet https://unsplash.com/photos/9Huby3g9fN0
- Phone Cover https://unsplash.com/photos/fCO3tBcnkhg
- Gift Voucher 500 https://unsplash.com/photos/Y20JJ_ddy9M
- Gift Voucher 100 https://unsplash.com/photos/8QrPJ3Kfie4
- Gift Voucher 250 https://unsplash.com/photos/MEL-jJnm7RQ
- Thanks to the Lego and Paul from BoWood Audio.
- My Mentor Maranatha Ilesanmi for helpful guidance throughout.
back to contents