Personal project
July 10, 2023

SoundSurf

SoundSurf is a web application for music, music player and equalizer. I created the application for my final project in high school. The application allows users to listen to, like and upload their own songs, as well as adjust the equalizer settings and see the visualizer.

I got the inspiration for the design from Dribbble and Pinterest, where I found some examples of modern and attractive music web applications. I used HTML, CSS, JavaScript, jQuery, mockAPI and wavesurfer.js to create the application. I used mockAPI to create a fake database for storing the songs and the user data. I used wavesurfer.js to create the waveform and the visualizer for the songs. I used object-oriented programming to structure the code and make it more modular and reusable.

I tested and optimized the application for functionality, usability and user experience. I used Chrome DevTools to debug the code and check for errors. I used Lighthouse to measure the performance, accessibility and best practices of the application. I used UserTesting.com to get feedback from real users about the design, functionality and usability of the application.

The main challenges of the project were learning object-oriented programming and using mockAPI. I had not used these concepts and tools before, so I had to learn them from scratch. I solved these challenges by watching tutorials, reading documentation and asking for help on Stack Overflow. I learned how to use APIs, OOP programming and mock data.

The outcomes of the project were very positive, because I created a web application for music that has features of a social network and interaction among the community. The application met the goals and expectations of my school project and impressed my teachers and classmates. The users who tested the application liked the design, functionality and user experience of SoundSurf.

  • Web design and development
  • Web application development
  • Music player and equalizer development
  • API integration and mock data
  • Object-oriented programming
  • Web performance optimization
  • Web usability and user experience testing