scroll

Bzbeats

Web design Front-end development

Online store for instrumental beats.

About bzbeats

Bzbeats is a responsive web store for singers and songwriters to buy instrumental beats.

View Website  

Style

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.

Splash page

A landing page which will lead user into the home page.

Home page

Header of home page showcases the latest beat, followed by sections of popular beats, trending genres, and community links.

Store page

The store page shows all the available beats in a grid view along with filter on the top.

Beat preview

Users are able to preview and add beat into cart in this page.

Cart page

Users are able to view all their added-to-cart beats and proceed to checkout in this page.

PHP

Bzbeats is built with php and MySQL database.

Data

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.

Javascript

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.

CSS

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.

Interactions

Filter interaction in store page.

Interactions

Interactions in preview page.

tools
  • Adobe Illustrator
  • Sketchapp
Language
  • PHP
  • HTML
  • CSS
  • Javascript