FlatLine

• 

  Homepage of our Project as it looks

Inspiration

The inspiration comes from endlessly searching for a particular song's lyrics which is not in our native language, and then trying to understand what it means

What it does

The webpage takes in a song's name and artist from the user, and then displays the translated lyrics, in the language preferred by the user or in a randomized language ( just for fun :) ), and also recites the translated lyrics through a text-to-speech API.

How we built it

Created the frontend pages, components, and forms using React and used all the different APIs and modules in the backend through JavaScript Styled out react components with Styled components and Tailwind CSS

Challenges we ran into

Integrating the backend JavaScript with the frontend react. Specifically, we were unsuccessful in importing the libraries used in the backend

Accomplishments that we're proud of

-Coming up with such an innovative and user-unfriendly idea -Making the frontend the way it looks -Getting familiar with Tailwind CSS -Using multiple APIs and libraries at the same time ( music matcher, google-tts-api) -Making our web app Mobile display friendly -Being able to get a song translated to another language and use text-to-speech to get a link of the output translation audio

What we learned

Using React for creating user friendly and responsive web designs Working with multiple JavaScript libraries simultaneously Getting used to Tailwind CSS

What's next for FlatLine

-Trying to figure out the solution to the challenge or explore alternative methods to avoid the issue. -Making the website actually user-friendly by giving the users an option to see the lyrics in the language they wish to -Creating a text-to-speech model for reciting the translated lyrics to the user in the translated language itself -Creating a mailer which can email the user their favourite artists' song lyrics in the user's native language whenever a new song is released by them

Built With

• google-tts-api
• html5
• javascript
• react
• tailwindcss