Online store for instrumental beats.
Bzbeats is a responsive web store for singers and songwriters to buy instrumental beats.View Website
Bzbeats's logo is inspired by touch pads on drum machines that music producer often have in their studios.
It also uses a combination of serif (Lusitana) as title font and san serif (Montserrat) as body font.
A landing page which will lead user into the home page.
Header of home page showcases the latest beat, followed by sections of popular beats, trending genres, and community links.
The store page shows all the available beats in a grid view along with filter on the top.
Users are able to preview and add beat into cart in this page.
Users are able to view all their added-to-cart beats and proceed to checkout in this page.
Bzbeats is built with php and MySQL database.
Data is passed in using two php files. The first one is db_connect.php which contains information required to connect MySQL server.
The second file, data_feed.php, feeds the data that it fetches from the server, and turns it into a json file.
I used jQuery to pass the data in that json file to the DOM.
While for some parts of the page I use php to display the data like this,
I used jQuery to populate the content in store page by using the data_feed.php file mentioned earlier.
I also use jQuery on my page interactions such as filtering and playing audio files.
I used three css files for this project. Since I didn’t use any frameworks, I established a grid.css file for page layout and common.css for basic styling of the text, link, and form. The last css file, theme.css, that is solely used to style this project specifically.
I separated the css intro three files because I can reuse my grid system and basic setup later on in my future projects.
Filter interaction in store page.
Interactions in preview page.