Homepage
Moody Tunes is a music recommendation engine that provides music recommendations based on a user's mood. Users are able to save songs into their 'Favorites' and view the information at a later time, or play the song directly from Spotify.
Moody Tunes is a SPA built with React and designed to meet project requirements in the rubric laid out here, a group projects designed specifically for Mod 3 class 2008FE front end engineering students. The project seeks to challenge the totality of learning of students up to this point, pulling together their core-stack knowledge of HTML, CSS, JS, DOM interaction and TDD (test driven development), and extending that knowledge to build out a React app and incorporate a new technology - in this case TypeScript.
The project emphasises React fundamentals, such as state management/synching across components, and the flow and management of asynchronous operations (both in production code, and inside of testing suites), pushing students to think carefully and critically about component architecture and modularity, and expected user flow and behavior. The nature of the project encourages employing professional 'soft' skills in the planning and project management stages - utilizing wireframing and mind-mapping, and managing project workflow with Issues and PRs through the Agile methodology on GitHub Project Board.
Lastly, be sure to click this here when you see it:
**Under the Hood**
There's more info under here about the functionality being described!- React
- JavaScript
- HTML
- CSS
- TypeScript
- Green Sock Animation Platform
- React Router
- Jest (TDD)
- REST API
Homepage
Main Page
The homepage provides users with a simple form to collect user's mood and music decade. Local storage allows a user to retain their 'favorites', so users have the option of viewing their favorites without going through the music recommendation flow.
Music recommendations are gathered using the Musicovery API. The API draws on a database of music where each track has assigned to it 'mood' values, which consist of two parameters - 'arousal' and 'valence'. These two parameters are based on research around mapping emotion on a circumplex model as seen below. Currently we have set canned values, however in the future we'd like to map emotion to all values and use sliders to adjust valence/arousal.
**Under the Hood**
The Homepage itself is housed in the React <App /> component, as you might expect. To implement a multi-page experience, we implemented the <BrowserRouter/> and the components thereof that allowed linking/routing <Link />, <NavLink /> and <Route />.
With normal functionality, what ends up rendering on the homepage inside of <App> are two components. From 'top' to 'bottom':
<NavBar /> // Is always visible
<Form /> // A container for the Banner and MovieCard components
The useEffect hook is employed inside of the <App/> component to check local storage for user favorites. That data is an array of all of favoriteSong objects - that data is mapped over to create multiple <Favorite /> components inside of <FavoritesView />
Results View
Results View
In this view the users are presented with song results that match the 'mood' and optional 'decade' parameters they selected in the previous screen. Results can be added to the favorites by clicking the star icon, and results can be played on spotify by clicking the spotify icon. To return back to the main view a user can click the home button or on the MoodyTunes title.
**Under the Hood**
Favorites
Favorites
Favorites are populated with any results that have been added to the favorites. Local storage is used to persist favorite selections. Favorites can be removed by hovering over the favorite and selecting 'remove'.
- Implementing TypeScript across the app including TDD
- Implementing GreenSock Animation Platform to aid UX
- Implementing a proxy server for CORS workaround
- Site is responsive and functions on a mobile device without stylistic breaks
- Implementing React hooks
- Mastering typescript
- Dynamic range of valence/arousal that will translate to a mood
- Implementation of Spotify's actual API to interact with Spotify account
- Find songs similar to the mood of x song
FE Engineering student at Turing School who has found no end to the joy that is speaking the language of JS.
