Hackathon

SYNCS Hackathon 2020 - Harmonics

Syncs Hackathon 2020, featuring team Harmonics

Shaan Khan

Sep 17, 2020 • 6 min read

This year I participated in the SYNCS 2020 hackathon. In this hackathon, I competed with a USYD team and had a total of 40 hours to decide on, plan and create a fully functional app. Although we didn't win, we did fairly well considering and produced a fully functional product that was temporarily deployed live for the hackathon. My team consisted of 6 members (myself included) and we created the website Harmonics.Harmonic is a platform targeted at musicians who are looking for a platform to match and discover other artists and like-minded people. To do this we utilized a similar and fairly well-known matching method popularized by the likes of Tinder, Bumble and other dating apps. The swipe feature. By creating a swipe feature where users could swipe left or right, we created an engaging yet responsive way for users to match and view other users profiles seamlessly. To do this we made users be presented with a small card displaying the users' icon, a short bio as well as a short 15 to 20-second audio clip sampled from their linked SoundCloud showing future friends & band members a sample of their previous works.

Whilst this hackathon was long, exhausting and overall just tiring, after 2 sleepless nights, thanks to coffee and a bit too many cans of Redbull that I'm afraid to admit to, we were able to look back to the start and reflect on what we had created in 40 hours. In 40 hours a group of strangers from a few days prior collaborated and developed a fully functional website, it was unheard of!

Whilst this hackathon had it's a fair share of bumps, especially in the start where we realized none of us had relevant (if any) hackathon experience, we were able to overcome them all and develop an app that I'm proud of. Whilst I primarily worked on the back-end and the front-end, I learnt a lot, especially concerning project management and the scrum (agile) method. Whilst being formally taught the Waterfall method in high school, it was slow, tedious and required a lot of documentation before commencement thus being unideal for hackathons. However, through agile we were able to change ideas at a fly and bootstrap our application to work fast and pivot quickly.

I'd like to thank my team once again, for the opportunity to participate with you guys, it was a pleasure and I wish all of you the best on your future endeavours and I hope to team up with you guys for the next Sydney Computing Society - SYNCS hackathon!

Harmonics

Need someone to play your new song? Want to contribute as a guitarist to produce an original song? Or do you just want an original song to play on your brand new guitar?

Regardless of whether you are a music professional or just want to jam. Harmonics can match you with the right person to collaborate with.

Inspiration

Finding a band or finding someone to jam with is a problem many small artists or hobbyists have. Whilst platforms such as "BandMix" exist, these websites don't cater to different proficiency levels. On the other hand, while applications such as "Facebook", "Gumtree", "find-a-musician.com" and "Musolist" allow people to create advertisements on their website, advertisements are not efficient nor effective as they are often a slow way to find matches. More shockingly none of the listed sites allows the user to preview a demo clip! Isn't music all about listening and hearing?

To aid these problems our team set out to design a website that allows users to efficiently search through a bigger range of artists and simultaneously listen to the artist's demo tracks. This will majorly streamline the process of matching artists with high musical compatibility. Our website is heavily inspired by the swiping mechanism popularised by "Tinder" and "Bumble" which entirely revolutionized how matchmaking was done.

What it Does

Harmonics matches the user with a tight selection of artists based on their preferences. Preferences include the level of engagement, roles, and genre of music. Instead of reviewing redundant profiles for an hour, users can listen to up to 50 relevant artists in the hour, swiping left and right to find a jamming partner or a band.

Demo of our hackathon project, Harmonics.

How We Built It

Concept
Design
Front-end
Back-end
Demonstration

Design

The user interface and experience as stated above are influenced by "Tinder" and "Bumble" which radicalized how matchmaking was done - i.e. swipe right and swipe left. The general style of the website adapts a contemporary minimal layout that allows the user to focus all their attention on the artists and their creations.

Our design team used MS Paint to create initial wireframes and detailed the mockups using Adobe Illustrator and Adobe Photoshop. Using the mockups, the design team and Front End Developers worked together to build the website interface.

Front End

The Front End Developers learned how to write in HTML and utilize bootstrap. Afterward, they were given mockups and wireframes by the design team to implement into the final project. Next, the Front End Team and the Back End Developers merged the project, which is fully functional on a local device as well as the VPS, hosted on DigitalOcean. Later, the Front End team was merged into the design team which worked together to create the presentation.

The front-end developers stack mainly consisted of:

JS
HTML
CSS
Bootstrap

Back End

Through communication with the front-end team, the back-end team implemented the business logic and relevant databases to the project, giving functionality. After the first meeting with the front-end team on implementation of buttons & UI/UX features, the back-end team developed the logistical back-end that allowed users to; sign-up, login & match with other users.

These features were implemented and programmed through a range of numerous technologies. The main back-end languages used in this project consist of:

PHP
MySQL
Digital Ocean (Droplets) - Ubuntu 20.04 running LAMP

Accomplishments That We're Proud Of

Before this hackathon, most of us have never met. However, within hours, we have become a fully functional unit. Each person had their role and excelled at them. A big accomplishment, as a result, is completing a working prototype.

What We Learned

Teamwork and collaboration skills.
Technical skills required for website development.
Team management and development.
Our team members learnt multiple programming languages, these include:
- HTML
- CSS
- JS
- Bootstrap
- PHP
- MySQL

Project Management

This project was done with the scrum (agile) method in mind, as it required little documentation and allowed us to rapidly prototype for this hackathon
We created a Trello Board to delegate tasks and create deadlines.
We assigned J.T. and Marco to maintain the Trello Board- We had a stand-up meeting every 3 hours to report back what progress has been made and what other requirements had to be done.
To collaborate we used a mixture of google drive, google docs, google slides, and for the front & back-end, we used the git version control software facilitated through GitHub.

Challenges We Ran Into

An obvious challenge was the limited time frame to complete the task. While the event was marketed to be a 40-hour hackathon, many team members had commitments as well as needed time off to rest and replenish.

Another major challenge we face is the lack of common technical knowledge. Whilst Shaan and Jacky, the programming leads, know about desktop development, neither have experience in website development before the hackathon. 3 of our members are from non-software development backgrounds and were required to pick up programming concepts as well as technologies in an incredibly short timeframe i.e the git version control system, the scrum (agile) method as well as how to rapidly create websites using bootstrap. Additionally, the majority of our members were either new to hackathons or new to software-oriented hackathons, as such making preparations for the hackathon and the hackathon itself harder.

Our third big challenge is the lack of resources. due to the time and budget constraints, we opted to make this hackathon as cheap as possible for us, as such we weren't able to start development on other hackathon ideas such as dynamic video generation.

What's Next For Harmonics

Develop a mobile app:
- Aim to develop a mobile app for ease of access and portability. Through making this application we can gain a larger target audience & market share.
Implement chat features:
- Through the implementation of chat features, we will be able to audit, monitor and control our platform better, allowing us to ensure a more safe and better experience for our users.
Implement file upload:
- After the implementation of the chat feature, we aim to implement file uploading to allow artists to better collaborate through the platform.
Implement listeners:
- After the implementation of the base business requirements, we intend to add the ability for listeners to search and discover new music and artists.
Monetization:
Artists, producers Freemium (Current Plan)
- Limitations on the number of people you can swipe on
- Have ads
- Cannot "unswipe" or undo a miss-swipe
- Cannot "boost" profile, increasing visibility
VIP
- ($5-$10 Monthly)
- No ads
- Ability to "boost" profiles, increasing visibility
- Can "unswipe" or undo a miss-swipe

Built With