Tuudle

• 

  Tuudle Logo

• 

  Tuudle User Flow

Inspiration

Create instrumental music with a whistle! We decided on creating a program that takes someone's whistles and convert it into music notes for a variety of instruments. This is especially great for people like us who are new to music theory and aren't familiar with sheet music, but want to create music. We wanted to provide the option for prospective users to create music easily with the instruments provided on the app. As well as designing a UI that makes the program user-friendly and accessible.

What it does

When launching the program, users should have a microphone connected to their device. Clicking on the record button will allow users to record their whistles. The program will give users the option to convert their whistles to various instruments available on the website. Once the conversion is done, users are able to preview and download the audio.

How we built it

Frontend: Javascript with Node.js, React, Bootstrap Backend: Python with Flask and GitHub to collaborate Design: Creating prospective user flow, Figma

Challenges we ran into

Initially, we wanted to utilize next.js. We ran into some trouble trying to use next.js for the audio recorder. Unfortunately, it did not work but it worked fine on react. We switched to react last minute to accommodate this feature. Additionally, we wanted to include the option for users to select multiple instruments when converting whistle audio. We could not do so due to time constraints.

Accomplishments that we're proud of

One of our hackers was new to react. After working on the frontend designs, they learned a lot in a short amount of time. On the design side of the project, we were happy with making a user-friendly program for anyone to use. As well as being inclusive in our design, reaching all types of users by making the program responsive to different screen sizes.

What we learned

When working on the frontend, we had to switch to react to accommodate to the audio recorder. We learned how to use react for the needs of the product and UI that was designed on Figma. Regarding the backend, learning flask to the extent of the needs of the project was new for us. For the design, we learned the extent of how the design hand-off process works. We reiterated the design for the prototype interaction, use cases, and assets.

What's next for Tuudle

Going forward, we'd like to add more instruments that are showcased on the app. Users should also have the option to save their audio and instrument recordings on the website. Additionally, we also want to collect user data to improve the parsing of the audio files.

Built With

• flask
• node.js
• python
• react