prototype screens from Figma
The purpose of this website is generating songs based upon the mood of the users. The target audience consists of teenagers and young adults who surf the internet in their free time.
The site has AI recommendation features to generate the songs based on the moods users click.
This is my first coded website on the software "Cursor" and I also made use of the AI prompt feature in it. The languages used are React, Javascript along with Tailwind CSS. I created different files for each coded section and linked them all in the App.jsx file. Using Tailwind CSS is super easy since we can just include the styling in the same file as the code. I hosted the website manually via Netlify, where I dragged and dropped the "dist" folder.
I used the Mono font for a retro look. The black and white nature of the buttons add onto the theme. I kept the backgrounds vibrant and clean for a minimalist look. I added animations to the heading and the image. The emojis for the mood are a type of text radio button which the users click and the done button stores that value. Adding onto the interaction I made a slider/ toggle which records two values of percentages (one from 0-50 and other from 50-100%) and finally clicking on the generate button gives you the song. Then you can also go to Spotify to listen to the song when clicked on the listen button.
Click here to go to the website!