Challenge
Beatbox Music is a platform which sets out to provide high quality production music to the media industry. It needed a way for the music to be browsed, complete with a robust search/filtering system and an in-built player so the music can be previewed. The customer should also have the ability to organise tracks they find into projects, and favourite albums they would like to find easily. As well as this functionality for the customers, Beatbox themselves would need the ability to easily manage the content on the website. Whether that be uploading music, editing the music information, or configuring miscellaneous settings pertaining to the layout and function of the site.
Solution
For a site like Beatbox, which heavily relies on interactivity, fluidity is key when it comes to making the site usable and attractive to potential customers. To ensure this ease of use while also retaining the extensive functionality, we used a combination of Laravel for the backend and base structure of the website, and Vue.Js for the web app functions of the player. Using Laravel for this backend allows for a simple but powerful system to allow for a user to easily interact with the data in the database, and have any changes be made quickly and be instantly visible to a user. This also allows for API calls to be made between the Vue.JS frontend and the Laravel backend. The Vue.JS frontend greatly improves usability for the end-user. This mainly stems from the use of ‘Components’ to build the structure of the Vue.Js web-app. For the end-user, it allows for content on the site to change and be updated without the page reloading, this reduces the need to reload unnecessary sections and considerably speeds up the user experience.
Results
Using the Vue.Js web-app ensures that the site responds quickly and is easy to use on both desktop and mobile. Combining the power of Laravel and Vue.Js allowed us to create a seamless experience using the API, ranging from such use cases as logging in without needing to reload the page, to allowing for the search on the frontend to be able to retrieve results from the Laravel backend without any page loads, and having seamless endless scrolling where it can fetch more results using the API without having to load a new page. We look forward to expanding this site further, such as adding eCommerce functionality to allow for payments to be made within the site instead of externally, and creating a white label version of this site so this base functionality can be used to create more sites on top of it.
Want fresh marketing stories in your inbox?
Get the weekly email that makes you a marketing genius.
Stay informed and inspired, for free.