This site is for a new and emerging company called the Missing Piece. Its designed to be responsive and accessible on a range of devices and have interactive elements to help meet the clients key goals.
The company's prime mission statement is to bring the UK's Live Sound Rental companies closer together, by offering a cross hire platform to aid in increased communication and clarity between all companies. Rental companies have production inventories containing loudspeakers, mixing consoles, microphones, monitor systems, any and all equipment required to execute a production. Productions can range from music festivals, major touring artists headline shows, product launches or fashion shows to name but a few. In order to be in a position to cater for any and all potential productions, a rental company would have to invest millions of pounds on equipment. This is obviously a massive financial investment that not all rental companies are in a position to do this. Therefore, it's common for number of rental companies in the UK to hold the same stock, that way they can hire stock off one and other in order to cover productions, should they not have enough equipment on hand. Up until this point cross hiring has been a laborious task, phoning around different companies to see if they have spare stock. It's stressful and time consuming, Missing Piece is offering an alternative.
The primary goal of this website is to provide visitors the opportunity to search the Missing Piece database for avalaible equipment or register an account with Missing Piece to upload their production inventories. The website features an "About Us" section, "So How Does This Work?" section, "Search Inventory" section and "Register" section. Once an account has been registered, a user can upload their inventories. Once uploaded, these inventories can be edited or deleted. Once uploaded, they will appear on the Missing Piece database and can be seen by those using the search to find avalaible production stock.
-
We need a platform that illustrates and shares our key values
-
We need a platform that succinctly explains who we are and the function of the company.
-
We need a platform that succinctly explains how to use the website key functions, that of searching the database or uploading their production inventories.
-
We need a platform that allows those visiting to register an account with us.
-
We need a platform that allows those who have registered an account to log in and log out freely.
-
We need a platform that allows those who have registered to upload their production inventories to the website's database and once uploaded the capability to edit, or delete inventories.
-
We need a platform that informs the user what inventories they have uploaded to date.
-
We need a platform that allows a user to upload their company's contact information, in order for companies searching the database to contact them regarding their inventories.
-
We need a platform that allows a user to edit their contact information once uploaded to our database.
-
As a First Time Visitor, I want to easily understand the main purpose of the site, and learn more about the company.
-
As a First Time Visitor, I want to be able to easily navigate through the site to find key content.
-
As a First Time Visitor, I want to clearly find out how to search the database for possible available equipment.
-
As a First Time Visitor, I want to clearly find out how to register an account with the website.
-
As a First Time Visitor, I want to source information that validates the organisation's legitimacy. For example, are they a respected company within the UK Live Sound Community?
-
As a Returning Visitor, I want to be able to navigate to the search page quickly.
-
As a Returning Visitor, I want to be able to log in to my account quickly.
-
As a Returning Visitor, I want to be able to register an account quickly.
-
As a Returning Visitor, I want to be able upload my inventory to my account easily.
-
As a Returning Visitor, I want to be able to see what inventories I have already uploaded to my account.
-
As a Returning Visitor, I want to be able to see what address information I have linked to my profile.
-
As a Frequent User, I want to be able to navigate to the search page quickly.
-
As a Frequent User, I want to be able to edit the inventories that I have uploaded to my account.
-
As a Frequent User, I want to be able to delete the inventories that I have uploaded to my account.
-
As a Frequent User, I want to be able to edit my company's address details.
-
As a Frequent User, I want to be able upload my inventory to my account easily
During my journey trying to find inspiration for the overall aesthetic of this website I came across a fantastic image on Unsplashed and a photographer called Nainoa Shizuru. The image was taken from the perspective of someone attending a gig, and I felt met the clients brand image and also would connect with the clients key demographic. I decided to use this image as the main hero image spanning across the length of each page of the website. I then used a website called Coolors and using there "create palette from photo" feature I uploaded the image from Nainoa Shizuru. I was able to pick out colours from the image that I felt would compliment the image, and reinforce the overall design to connect with the key demographic. I've included a list below of colours I ended up settling on:
-
#fcc000 - Amber
-
#96b0d1 - Wild Blue Yonder
-
#1b1a18 - Eerie Black
-
#fee602 - Middle Yellow
-
#fdfdfd - White
Rubik is the font chosen for use across the site, with Sans Serif as the back up font in case there are any issues importing into the site correctly from Google Fonts. During my research into possible font choices I came across a great article on the awwwards website called the 20 Best Google Web Fonts. Some really great fonts, however Rubik caught my eye, due it's bold yet modern appearance. I felt once again that this font was in keeping with the overall image I envisioned for the design of this website.
In essence there are two different sides to the Missing Piece website that have slightly different features. The first side we would describe as the "Visitor Side". Features includes a "Home" page that includes an "About Us" section and a "So How Does This Work" section. The "Home" page also directs visitors to the "Search Inventory" page, "Register" page or the "Log In". The second side of the website we would describe as the "Members Side". Once a visitor has registered an account, additional features appear on the navigation bar at the top of the web page, and some features such as "Register" and "Log In" that previously appeared in the "Visitor Side" disappear. The new features that are only available on the "Members Side" are "Profile", "Search Inventory", "Add To Inventory", "My Inventory" and finally "Log Out". Featured at the top of every page is a navigation bar that runs across it's width. The navigation bar remains at the top of each bar, so users of the site know it's location wherever they may be on the website. Just below the navigation bar is a large banner running the width of the page. Centered within the banner is the Missing Piece logo together with a hero image which is used as the banner's background. The colours used in the navigation bar match those used in the company's logo. To ensure continuity I've used the same Middle Yellow for the navigation bars main font colour, as the colour of the company's logo. On navigation bar's left hand corner, I have positioned the puzzle piece from the Missing Piece logo, and this is linked to the "Home" page. As a result, no matter where the user is on the site, they know that when they click the logo they will be transported back to the "Home" page. Each page has a footer with the social media icons linking to the client's social media accounts. The footer echoes those colours used in the navigation bar, company's logo and main hero image, ensuring coherent design approach.
The Home page features a large banner with the company logo in the centre and hero image as it's background. This is eye-catching to the visitor, and quickly connects with the intended target market, that of the Live Sound Community. Then when the user scrolls down the page they will notice two different sections, "About Us" and "So How Does This Work?". The "About Us" section consists of four small paragraphs that quickly identify who the company is, and the whole purpose of the website. The second section "So How Does This Work?" succinctly explains to the visitor that there are two different types of visitor that the website has be built to facilitate, those "Searching" and those that "Advertise". To accomplish this both words have been made bold to stand out from the rest of the text. This emphasizes to the visitor that this information is important. Just below that paragraph are two sections, one from information relating to those visitors looking to search the Missing Piece database, and the second for those visitors interested in advertising. Once again bold text has been used to denote the importance of both words, and in addition two different icons from "Font Awesome" have been used that have connotations to the words "Searching" and "Advertise". Finally there are two call to action buttons, using the same icons to ensure continuity. One button labelled "Search Inventory" links the user to the "Search Inventory" page and the second button labelled "Create Account" links the user to the "Register" page. Once again, when the website is being used in "Visitor Side" both "About Us" and "So How Does This Work?" sections appear on the Home page. However, when the visitor has logged into the "Members Side" then only "About Us" appears on the Home page.
The "Search Inventory" page appears the same on both the "Visitor Side" and "Members Side" of the website. Once again, the navigation bar and banner consisting of a hero image background and company logo, appear at the top of the page to ensure consistency throughout the site. In addition, the footer with social media icons linking to the company's social media accounts appear at the bottom of the page, as it does on every page of the site. When the visitor visits the "Search Inventory" page they will see a text input with "Search Inventories" as it's label, prompting them to type into it in order to search. In addition to the text input there is a button labelled "Reset" and a button labelled "Search". When the user inputs a query into the text input (say for example "Midas") and clicks the search button, results matching that search will appear. The backend of the website searches the database for matches relating to that query. If any matches are found then a card appears with the name of the company that made the inventory entry, together with the inventory entry itself and an accordion element at the bottom of the card labelled "Click For COMPANY NAME Contact Details". Once clicked, this accordion element will expand and show the contact details for the company that made the inventory entry. If the search query doesn't match an inventory entry found in the database, then a message appears on the page that says "No Results Found". When the visitor wants to clear the search they do so by clicking the "Reset" button.
The "Register" page only appears on the "Visitor Side" of the website, as once registered there is no need to see it. The navigation bar and banner consisting of a hero image background and company logo, appear at the top of the page to ensure consistency throughout the site. In addition, the footer with social media icons linking to the company's social media accounts appear at the bottom of the page, as it does on every page of the site. When a visitor visits the "Register" page they will see seven text inputs labelled "Username", "Password", "Company Name", "Street Name", "Postcode", "City Name" and "Phone Number". Each text input will have it's own icon that matches the connotation of the text inputs label. Each text input should be filled out before the user hits the "Submit" button at the bottom of the form, otherwise they will be prompted with a "Please fill in this field" reminder. In addition, to ensure strong usernames and passwords are used when registering an account, a visitor will be prompted with validator reminders. For example, if they fail to use a username of correct length, they will be prompted with "Username must be between 10 and 15 Characters". In addition, if any of the information they use to register with has been used to activate an account in the past, they will also receive a message to inform them of this and their attempt to register will fail. Finally, just below the "Submit" button is a link that says "Already Registered? Log In" that links the visitor to the "Log In" page.
The "Log In" page only appears on the "Visitor Side" of the website, as once logged in there is no need for the user to continue to see it. The navigation bar and footer remain in the same location as on all the other pages, to ensure consistency throughout the site. When a visitor visits the "Log In" page they will see two text inputs labelled "Username" and "Password" with icons that match the connotations of both labels. To ensure continuity to the "Register" page both text inputs are identical to those used when the user registered their account. In addition, the call to action button labelled "Log In" has the same colours and hover effects as all other buttons found throughout the site, to ensure continuity. Once the user inputs a username and password they click the "Log In" button. If the details match any found on the database then they will be taken to their "Profile" page. If not, then a message will appear "Incorrect Username and/or Password", prompting them to recheck the log in information they are using. Finally, just below the "Log In" button is a link that says "New Here? Register Account" that links the visitor to the "Register" page. This ensures improved user experience so that if a user arrives at "Log In" in error and doesn't have an account, they can register one quickly.
The "Profile" page only appears on the "Members Side" of the website, as you must have registered an account in order to have a profile. Once the user logs in as described above, they will be directed to the "Profile" page. The navigation bar and footer remain in the same location as on all of the other pages, to ensure consistency throughout the site. At the top of the page is a welcome message, welcoming the user and letting them know they have successfully logged in. Just below that message is a heading that says "COMPANY NAME Profile" and below that is a card containing the same company information ("Street Name", "Postcode", "City Name" and "Phone Number") that they registered. This company information also appears in the search results. As mentioned above, when a visitor searches the database, all matching inventory entries will appear, together with the contact company information for the company that entered the said inventory entry. Below the card containing the company information is a call to action button labelled "Update Info". I wanted to offer the user the option to edit their company information once registered. When the updated info clicked, a page will appear with five text inputs labelled Company Name", "Street Name", "Postcode", "City Name" and "Phone Number". Each input will be autofilled with the information that they last inputed. At the bottom of the page are two call to action buttons, labelled "Cancel" and "Update" The user can click "Cancel" and be taken back to their profile page. Alternatively, they can edit any of the text inputs and then click the "Update" button at the bottom of the page. The website will then take them back to their profile page where they will see that the contact information has been updated to match the edits they have made, and a message saying "Company Details Updated" will appear.
The "Add Inventory" page only appears on the "Members Side" of the website, as you must have registered an account in order to have a profile to upload. The navigation bar and footer remain in the same location as on all of the other pages, to ensure consistency throughout the site. When the user first arrives at the "Add Inventory" page, they will see a sub title that instructs the user on how the page functions. Beneath, is a form that contains a select component and three text inputs. The select component is labelled Category, and has a prompt that says "Choose your Category" and suggests to the user that they need to select their choice of category. When clicked, four category options will appear "Loudspeakers", "Microphones", "Mixing Console" and "Monitors". In the future, this drop down will contain more options, as there are a multitude of different categories of product a Rental Company could choose to have in their production inventories. However, the four I have selected are the most popular and pivotal. Once chosen, the user needs to input a brand name, a product name and a quantity showing how many they have in their physical rental inventories. Each input, once clicked will have a red line underneath it until a value is inputed. Once inputed that red line will change to green, to inform the user to move on and fill out the next text input. Once the form is completed the user can click the call to action button found at the bottom of the page entitled "Add To Inventory". Once clicked, the form will refresh and a message will appear at the top of the page saying "Inventory Successfully Added". The user can then go to the "My Inventory" page and that inventory entry will appear along with any entries they have made up until that point in the past.
The "My Inventory" page only appears on the "Members Side" of the website, as you must have registered an account in order to have a profile to upload too. The navigation bar and footer remain in the same location as on all of the other pages to ensure consistency throughout the site. When a user first arrives at the "My Inventory" page they will see a card for each inventory entry they have added using the "Add Inventory" page. Each card will inform them on the name of the category, name of the brand, name of the product and how many units of that product the user has in their inventory. Finally, there are two call to action buttons labelled "Edit" and "Delete" per card. If a user wants to edit any of the information on the card, they can click the "Edit" button. When they do they will be transported to a page identical to the "Add Inventory" page. The form will autofill with the information from that card. There are two call to action buttons labelled "Cancel" and "Confirm Edit" at the bottom of the page. If the user clicks cancel they will be taken back to the "My Inventory" page. However, if the user edits the information of that entry, clicks "Confirm Edit" button then they will be taken back to the "My Inventory" page. They will see a message that says "Inventory Successfully Updated" together with the information on the Inventory entry change to match the changes they have just made. Finally, should the user want to delete an entry entirely, they can click the "Delete" button. In doing so a modal will appear with a warning, and will ask the user if they want to delete the inventory. If they click no then the modal will close, if they click yes then that inventory entry will disappear, and a message "Inventory Successfully Deleted" will appear. The modal adds another level of security, to prevent a user from accidentally deleting an entry.
This isn't a page but it is a feature, and appears on the navigation bar on the "Members Side" of the website. Once clicked the user will be logged out of their account and transported to "Visitors Side" and the "Log In" page.
-
Header Logo - Exists on every page and allows the user to easily recognise the client's brand. Clicking the logo returns the user to the home page.
-
Header Navigation Bar - appears at the top of each page in the same location, ensuring the user knows where to locate it no matter the location on the website.
-
Remote View Navigation Bar - In remote screen sizes a full size navigation bar would get overbearing and take up much needed screen space. Remote view will allow users to toggle to the remote view navigation bar to better navigate around the site.
-
Footer Social Icons - Exist at the bottom of the page and allow the visitor to access the club's social media platforms.
-
Call to Action Buttons - found throughout the site. Allows the users to quickly access key information or key features.
-
About Us - This section appears on the home page. Allows visitors to understand the client's journey, brand image and mission statement.
-
"So, How Does This Work ?" - This section appears on the home page. It allows the user to understand the two key uses of the website, and then, using call to action buttons, help navigate the user to the correct areas of the site, depending on what they are looking to achieve.
-
Modal for Deleting Inventory - Protects the user from accidentally deleting an inventory entry, which once deleted can't be undone.
-
Search - Allows the user to search the inventory database for other inventories that include product that they would like to rent for an event.
-
Add Inventory - Allows the user the ability to upload an inventory entry to the database.
-
Edit Inventory - Allows the user the ability to edit any of the inventory entries they have uploaded to the database.
-
Edit Profile Information - Allows the user the ability to edit their company information that they previously registered with.
-
GDPR Checkbox - Allows the user to approve the use of their email address to inform them of future actions. Also ensures the client complies with EU data protection law.
-
Addition to category select component in the "Add Inventory" form - This is relatively easy to do as the category select component is linked to a categories database in MongoDB. So all someone has to do is input more category options and these will appear when the user clicks the select component.
-
Add subscription service - As the company grows a subscription service to advertise inventories on the Missing Piece database will be employed. When a user gets to a limit of 5 entries they will have to pay a monthly subscription fee to advertise more inventory entries.
-
Processing Payments - When the subscription service starts a payment processing API will be required in order to process subscription payments.
-
Decrease Manual Element to "Adding Inventory" - At present a user has to input each Inventory entry using the "Add Inventory" page. However, if you are a large rental company with a massive inventory then this process could easily become laborious. A number of large companies have internal databases that they use to manage the incoming and outgoing stock from their rental inventories. Each piece of equipment has a bar code, that bar code is scanned when it leaves the warehouse for productions, and scanned upon it's return. At this point the Missing Piece is still at its initial stages and more research needs to be done into how these databases store this information. However, the long term goal would be to write some code that dumps the data from this database at close of business and upload to the Missing Piece database. This would keep the user's actual rental inventory current within their missing piece profile.
-
At present I have included various if statements within each function to verify whether the user is logged in, and verify that the user has access to features they are trying to access. You will notice that I have replicated code. In the future I would like to write a validation function, thus avoiding unnecessary repetition.
-
This website used HTML, CSS, Javascript and Python programming languages
-
Materialize CDN: This project uses Materialize 1.0.0 to help make the website responsive.
-
Bootstrap CDN: This project uses Bootstrap5 to help make the website responsive.
-
JQuery: This project uses JQuery to help make the website more interactive.
-
Popper.js: This project uses Popper.js Javascript for the modal used on the "My Inventory" page.
-
Google Fonts: This project uses Google Fonts to style the website's fonts.
-
Font Awesome: This project uses Font Awesome in the footer of the website to add social media icons.
-
Coolors: This project uses Coolors to identify which colour palette best meet the client's requirements and brand image.
-
Balsamiq: This project uses Balsamiq to create wireframes during the UX stages.
-
Git: Git was used for version control, using the Gitpod terminal to add, commit to Git and push to Github.
-
GitHub: Github was used to store the project's code after being pushed from Git.
-
StackEdit: was used to confirm layout and spell check the README and TESTING md files.
-
MongoDB: was used to create a backend database to store users registration details and inventory entry's.
-
Flask: was used as a frame work to render information MongoDB database to appear on the website.
-
Flask WTF: was used and I imported FlaskForm from it to create some of the forms on the site.
-
WTF Forms: was used to create the forms for the Register and Log In pages of the site. In addition I also used the validators from WTF Forms for both the Register and Log In form.
Testing information can be found on a separate Testing Readme
-
Prior to creating an account with Heroku, it is necessary to create a requirements.txt and Procfile within your application, to enable Heroku to know which application and dependences are required to run the app.
-
Log in or Register with Heroku.
-
Once logged in you will be taken to your Dashboard, at the top right hand corner of the Dashboard you will see New. Click New and select Create New App
-
You will be prompted to input an App name, this needs to be unique.
-
You will then be prompted to "Choose a region" from a drop down list. Once chosen click "Create app".
-
Once created the next step is to connect the app. The simplest process is automatic deployment from your Github repository. So in Deployment method click "GitHub - Connect to GitHub".
-
Below a "Connect to Github" section will appear. Ensure that your GitHub name appears in the first drop down menu, and then add your repository name and click search.
-
Once Heroku finds your repository click connect.
-
Go up to the top of the page and click "Settings".
-
Scroll down the page to the "Config Vars"section and click the "Reveal Config Vars" button.
-
At this point you are going to tell Heroku the variables you have hidden in your env.py in your app, otherwise you could get unwanted application errors.
-
Input a varible called IP and its value needs to be 0.0.0.0
-
Input a variable called PORT and its value needs to be 5000
-
Input a variable called SECRET_KEY and you need to copy the secret key from you env.py and paste in the value.
-
Input a variable called MONGO_DBNAME and copy the MONGO_DBNAME value from your env.py and paste in as the value.
-
Input a variable called MONGO_URI, once again copying the MONGO_URI value from your env.py and paste in as the value.
-
Go to the top of the page and click "Deploy"
-
Before following the next step, go back to your app and make sure any changes have been pushed to your repository.
-
Click "Enable Automatic Deployment"
-
Scroll down to "Manual deploy" section of the Deploy page. Make sure "master" branch is selected and click "Deploy Brand"
-
Heroku will recieve the code from GitHub, and start building the app. This could take a few minutes.
-
Once successful Heroku will notify you, click "View: to view the app and copy the domain link.
-
Log into GitHub and locate the correct GitHub Repository.
-
Above the list located to the right of the green "Gitpod" button click code.
-
Under Clone you will see three options HTTPS, SSH and GitHub CLI. Choose which option you prefer and then click the copy icon next to the URL to copy it.
-
Open Terminal.
-
Change the current working directory to the location where you want the cloned directory.
-
Type git clone, and then paste the URL copied earlier during step 3.
-
Press Enter to create your local clone.
-
Log into GitHub and locate the correct GitHub Repository.
-
Above the list located to the right of the green "Gitpod" button click code.
-
Click "Open with GitHub Desktop" to clone and open the repository with GitHub Desktop.
-
Follow the prompts in GitHub Desktop to complete the clone.
-
I used an interesting Stack Overflow thread on Iterating multiple lists in parallel with Python inside HTML(Flask), as inspiration when it came to iterating over my "inventories" and "users" database. When a user runs a search on the "Search Inventory" page, I wanted not only inventory entries that matched the search query to appear, but also company information of the company that uploaded said inventory entry. This article helped me achieve this.
-
I found another interesting Stack Overflow thread on how to iterate over a list of list in Jinja. I used this technique to help make the inventory entry's appear when searched on the "Search Inventory" page as well as the company information.
-
I watched a YouTube video by Pretty Printed explaining how to install and get started with Flask WTF. This allowed me to quickly setup forms for the websites "Register" and "Log In" pages with effective form validators.
-
I used a Materalize component called "Cards" for the "My Inventory", "Search Inventory" and "Profile"
-
I used various Materalize Forms including "Select" and "Text Inputs", which can be found on the "Register", "Log In", and "Add Inventory" pages.
-
I used Bootstrap Modal component to create a delete inventory entry modal, which added another level of security to prevent a user from accidentally deleting an entry.
All text content on this site including "About Us" and "So, How Does This Work?" have been written by me.
Images used on this website were sourced from a website called Unsplashed.
Images Used
- Special thanks to my mentors Brain Macharia and Chris Quinn
- Special thanks to fellow students on Slack for support during the completion of MS3.
- Thanks to the team of tutors at Code Institute for their support.