Our Journey at SYNCS 2020 Hackathon

SYNCS 2020 Hackathon Experience

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.

Harmonics

Harmonics 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. Users are presented with a small card displaying the user's icon, a short bio, and a short 15 to 20-second audio clip sampled from their linked SoundCloud, showing future friends & band members a sample of their previous works.

The Hackathon Journey

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 its 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 learned 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 on the 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 in your future endeavors. I hope to team up with you guys for the next Sydney Computing Society - SYNCS hackathon!

Harmonics: Bridging Musicians Together

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 often slow and ineffective as a 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 larger 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 popularized by "Tinder" and "Bumble," which entirely revolutionized how matchmaking was done.

What it Does

Harmonics matches users with a selection of artists based on their preferences, which 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.

How We Built It

• 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 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 had never met. However, within hours, we became 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 on what progress had 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 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 as a 40-hour hackathon, many team members had commitments as well as needed time off to rest and replenish.
• Another major challenge we faced was the lack of common technical knowledge. Whilst Shaan and Jacky, the programming leads, knew about desktop development, neither had experience in website development before the hackathon. Three of our members were 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, making preparations for the hackathon and the hackathon itself harder.
• Our third big challenge was the lack of resources. Due to the time and budget constraints, we opted to make this hackathon as cheap as possible for us, meaning we weren't able to start development on other hackathon ideas such as dynamic video generation.

What's Next For Harmonics

Monetization

Built With

Try It Out

• Try It Out