pcmueller/the-wormhole

A "music discovery app" using global streaming data to present users with the top artists and songs in countries around the world.

~connecting music fans all over the world~

View our deployed site H E R E

Table of Contents

• Description
• Installation
• Walkthrough
• Authors
• Technologies

Description

A "music discovery app" using global streaming data to present users with the top artists and songs in countries around the world.

This was a group project in which were given two weeks to push ourselves to learn a new technology, as well as to reinforce our knowledge of React and associated libraries and technologies.

As a group we agreed to learn and implement Global State Management using Redux, layered into React in cooperation with Router, asynchronous JavaScript, Cypress testing, and UI design using Sass. The assignment rubric & spec for this project can be found here

Notable Features

• Custom-built dataset of all countries with valid Last.fm data allows user to manually select or randomize a location and render the top artists and tracks in a given country via Last.fm API
• Additional API request to retrieve and display individual "artist bio" pages.
• Generates individual artist images using another proprietary dataset, built personally using links to license-free images on Wikimedia Commons and matching image links to API data.
• Integrates global state using Redux, implemented mid-development over existing codebase.
• Thoroughly tested using Cypress integration testing of all user flows
• Responsive design: can be used on all screen sizes with considerations for tabbing, color choices, and button sizing for enhanced UX

Installation

1. Clone this repo using:

• git clone https://github.com/pcmueller/the-wormhole

2. cd into your cloned directory
3. Run npm install
4. Run npm start

Cypress Testing

1. Once the app is set up locally, from the root directory, install Cypress

• Run npm install cypress --save-dev

2. To open and run the tests

• Run npx cypress open

Walkthrough

1. Once loaded, the home page welcomes the user to their country of origin, with the United States set as the default location. Displayed below is the Last.fm "Top Tracks" and "Top Artists" streaming data from that location, automatically populated into two vertical lists.

2. In order to switch locations, a user can either select a specific country from the dropdown menu in the navigation bar, or click the "Randomize Location" button, which will randomly select an option from the list of available countries and automatically generate new streaming data for that location.

3. If a user wants to see more information about a particular artist, they can reach that artist's "details" page by either clicking the thumbnail image of one of the "Top Artists" listed below, or by using the search bar next the dropdown menu to search for an artist by name.

4. Once an artist image is clicked - or if the search returns a succesful match from the Last.fm database - the page will reroute to the appropriate "artist details" view, which will display the artist's name, image, and biography. The artist's name can be clicked to link out of the Wormhole domain and over to that artist's Last.fm page, where the user can learn more about the artist and stream individual songs.

5. While on the home page, any of the "Top Tracks" can also be clicked to link out of the Wormhole domain and over to that songs's Last.fm page, where where the user can learn more about the track and stream it if available.

6. In order to return to the home page from the "artist details" view, a user can click either the "Return Home" button or the WORMHOLE page title itself, both in the page header.

Learning Goals

• Successfully implement Global State Mangement using Redux, build over an existing React application.
• Further understand and incorporate React's modular component structure by integrating SCSS styling.
• Test all Component flows, asynchronous JavaScript, and conditional rendering using Cypress.

Future Iterations

• Refactor all Redux files for best GSM practices, using actions, reducers, and thunks as appropriately and efficiently as possible.
• Build out functionality to allow users to save their favorite artists and tracks.
• Implement ARIA inside the React component structure to verify that our page is truly accessible.

Authors

Peter Muellerleile GH	Bryan Hohn GH	Angie Battillo GH

Technologies

JavaScript	React	Redux	Router	HTML	CSS	Sass	Cypress	Heroku