Song Store

The perfect place to buy and sell songs!

Comment
🌐 Domain Name: https://mus-ex.tech/

☁️ Inspiration

Music is fun! We even listened to music while developing this app. Yet, it is shocking to hear that artists only receive 10-25% of their song revenue. On top of that, in iTunes, artists only get 1 cent per download, meaning 1,500 people would need to download their music for them to be paid minimum wage. This is definitely not workable, so we've created a decentralized music platform, where artists directly engage with listeners.

🚧 What It Does

This application allows people to listen to their favorite artists while paying them what they deserve. It allows them to buy and sell their songs as NFTs, while maintaining digital ownership. Musicians can post their music onto the music marketplace where users can donate to the musicians, buy their latest song for either Ethereum or using stripe (a payment software for paper money), or favorite the song. Once a user favorites a song, it will go onto their favorites page which shows them a preview of the song they have just favorited. If a user buys the song, 100% of the profits will head over to the artist through either the blockchain (for Ethereum) or stripe payments (for Paper Money). This helps solve the problem because it helps artists pursue their dreams without needing to worry about having a crazy amount of users buy their song.

👨🏾‍💻 How We Built It

The frontend was based on React which is a frontend framework for creating simple yet applications. We used NextJS as a wrapper around React, we used it because it gave us rendering capabilities such as Server Side Rendering that made the performance of our application much faster. We used axios and fetch for requests (to communicate with the backend). Lastly, we used TailwindCSS to style the overall application with Hero Icons for our icons . The backend used many technologies. For the server and database, we used Flask and Replit. To trim songs, we used ffmpeg. Finally, we used Hedera for the main part of our application.

Best Hardware Hack Sponsored by Digi-Key

We used Raspberry Pi 4 to develop and deploy the website. It is more secure as we would be having our server with database at home

👷 Challenges We Ran Into

The frontend ran into a series of challenges. Working with NextJS for the first time was quite hard to do so that was a challenge. We also had to deal with fetch and FormData not working well together. Lastly, we ran into bugs when trying to display information from fetch requests. For the backend, setting up the server and database using Replit and Flask was easy. After that, we ran into some issues using ffmpeg. We never wanted to compromise on file security, so everything we did was maintained through pipes and binary, never sent or saved anywhere (except for Hedera). Though it took a lot of debugging, we solved ffmpeg, and next came Hedera. After getting our Operator ID and Operator Key, we implemented the API. Because it was only our 2nd time using it, we had some difficulties, but in the end figured it out.

🎉 Accomplishments That We're Proud Of

We actually finished the application with all functionalities...woo hoo 🥳! On the frontend, learning NextJS was an accomplishment for us. We were able to use a framework we had always wanted to learn. We also were proud to expand on our knowledge of current technologies and design patterns with technologies such as TailwindCSS and Moralis. On the backend, we are proud of learning so much about Hedera and ffmpeg. They were complicated to learn, but we did it in the end! On top of that, we learned communications. We had 2 people in PST, 1 person in EST, and 1 person in IST. Collaboration was definitely complicated, but we learned to push through the difficulties.

📙 What We Learned

We learned a lot. We learned how to use Server Side Rendering and how to upload audio files using FormData. We also learned about design patterns which will be crucial in the future for UI and UX development. We learned a lot. First, we used how to trim a video using only pipes and binary, no file system, using ffmpeg. On top of that, we learned the Hedera API, which will be a vital skill in the future.

🔜 What's Next For Song Store

  • Better Styles
  • More Efficient Video Trimming
  • Asynchronous Functions
  • Song Queues
  • Adding Comments to Songs

Built With

Share this project:

Updates