Project Description

Web Application

Programming – .raw

Technical Information

Languages Used:

  • SQL

  • PHP

  • JavaScript

  • HTML

  • CSS

Plugins Added/ Used:

  • Wavesurfer

Software Programs Used:

  • Brackets

  • Notepad++

  • Teamviewer

  • GitHub

  • GitKrackin

  • FileZilla


Front End Developer, Back End Developer and Project Manager.


September 2017 – December 2017


MDIA 3126 and MDIA 3003 | Digital Asset Design & Integration and Project 2 | Henry Leung and Edward Fajardo

British Columbia Institute of Technology | Digital Design and Development Diploma


This app brings musicians together for a better music building experience is what made me passionate to take on this project. We’ve created an improved version of SoundCloud with special features that will blow your mind away.   From our extensive research, there are two types of users on the SoundCloud platform. 40% of these users love to listen to music while the other 60% are artists who upload their own music. Artists love to upload their music because they get to follow their passion and get validated by their listeners.   We believe small musicians should be compensated for all their hard work from producing their music. Our RAW web application helps solve this problem.   We believe that if Soundcloud artists get compensated better, they will keep using SoundCloud and release more music on the platform for their fans.  Hence, even more opportunities for SoundCloud to monetize its platform.


Creating a Base Template

I first created a base template that was color coded to indicated where the various sections would be. This way it allowed the team and I to then plug-in content to the right sections faster. This helped speed up the process and divide tasks a lot easier for everyone. Not only were we able to get the Front End complete but we finished ahead of time which gave me more time to work on connecting the pages to the Back End.

Using GitHub to Collaborate with team members

Throughout the process of coding the website, we used GitHub to store our code. This allowed easy access for everyone on the team. We were able to work on the project remotely. While coding the project I was able to code around 29,000 lines of code within 3 and a half months.


The Logic for .raw was first to create a group. The group was created by first having a join button. If the user clicks join then that button disappears and a new button appears called enter and leave. If the user enter the group they then are able to upload music into that one specific group. If they click on add song then the user will be able to fill out a form and from that form the values are placed into the correct tables in the database. the values for specific topics are stored depending if its checked as numbers using 0 = not chosen and 1 = chosen category. In order to save the values of the song that is uploaded by a specific user the database needs to save the id number along with the values in the database. This way the right music is grabbed from the database.

For the music playing part on various pages, I used wavesurfer to grab the music link stored in the database and saved in the folder which then transcribes it into a wave format for users to see. Then users can click on the play or pause button. This will triggered is the music to play. Users are also able to download songs.

Using GitKrackin to Push/Pull from GitHub

I used GitKrackin to help Push and Pull from our groups project saved on GitHub. Using the program helped graphically show who committed and when. This also provided an easier way to save time when I was pushing and pulling files from GitHub. It reduced the typing time and made everything visually clear about what I was doing.

GitKrackin allowed the team and I to divide the tasks and work simultaneously with one another. This means we first had a meeting every week to discuss who would do which pages to prevent team members from working on the same pages. Once we all agreed on the pages we made sure we met the deadlines we set every week.


Throughout the process we learned to collaboratively work together, communicate and organize our time to complete the project. With my strategic planning process I was able to break down tasks and give everyone the tasks that best matched their skill set to reach all of our fullest potential

You will be able to log into our webapp by using:
pass: 111

You can also create your own account.