Initial UI plan for website
Final Home page
Music Player
Pomodoro Timer
Pomodoro Settings

Mood inspired Music Player

Inspiration

A productivity app that cares for your health enhancing your mental health. People can get too stressed, procrastinating and overworking, this website allows the user to set timed goals to motivate the user. It also ensures the user's physical health is also considered with a background 'eyecare' timer.

What it does

This website uses a pomodoro timer to maximise productivity, alongside eyecare functionality as people often spend too long focused on a screen. The eyecare function reminds users every 20 minutes they need to rest their eyes. There is also a music player for users that are Feeling Lazy. User's select the genre of music they wish to listen to, and are given playlist suggestions; they then select a playlist and using a Spotify API the songs may be selected and played.

How we built it

Using the prebuilt JavaScript library for building user interfaces, React, we used a combination of JavaScript and CSS to build the website. Additionally, we used semantics-UI, Bootstrap and react-router-dom as just some of the add-on we used in order to format the website as effectively as possible. GitHub was used to share and merge the developments as the were created to ensure that all members has access to the most up-to-date version of the website.

Challenges we ran into

Having never used React before, most members had to download a number of programs in order to develop the programme. Moreover, we occasionally had some issues with GitHub and merge conflicts, this meant time has to be dedicated to understanding these conflicts and correcting them.

Accomplishments that we're proud of

Learning how to use React from scratch as a group was a huge accomplishment for us, with some members having not even used JavaScript or CSS before. Whilst this did result in a large chuck of time being dedicated to researching how to make basic changes, the overall development of the group was exponential.

What we learned

Hackathons are fun! Before beginning this project only one member of the team had used React before, however this was a while ago and as a result this was a steep learning curve for everyone. We learnt how to use javascript alongside css to create a website with different pages. Additionally the Spotify API limits songs to 30 seconds, requiring users to log in, for some browsers and not for others.

What's next for Mood Inspired Music Player

Some added functionality for the 'Feeling Lazy' section has been started, however it was not working enough to be viewed in the final project. This 'Game' feature would allow the user to play whilst listening to music, however the monotony of the game means players are likely to bore and as a result decide to do more work. This functionality would also be linked to the pomodoro 'break' however it would be under the designated timer reverting back to the pomodoro main page when the break is over.