A web app that retrieves data from the iTunes API created with React

Explanation

  • This is an app that retrieves data from the iTunes API. The app has a search bar, which is used to type in the search terms.
  • The app also includes the option to search for a specific media type. This is done by selecting an option from the dropdown menu.
  • Press the search button below that to start the search.
  • The search results and the favorite list section items are displayed in a dropdown fashion. You must click on an item to
    reveal more details about the listed item.
  • After the search results are displayed, there is the option to add items from the search resuls to the favorites list.
  • This is done by pressing the ‘add to favorites’ button below the item.
  • Once added, these items can also be removed from the favorites list.
  • This is done by clicking the ‘remove item’ button below the item

How to install

  • This app was built with React and Express.
  • Install node.js on your local computer: https://nodejs.org/en/download/
  • Navigate to the root folder of the app and run the command prompt in it.
  • Type into the command prompt: npm install
  • Click enter and wait from the installation to finish.
  • Change the directory in the command prompt to the sub directory called ‘front-end’.
  • Type into the command prompt: npm install
  • Click enter and wait from the installation to finish.

How to test

  • This application uses Jest, Mocha and Chai for tests.
  • Navigate to the root folder of the app and run the command prompt in it.
  • Type into the command prompt: npm test
  • Click enter and wait from the tests to finish.
  • After the tests are completed, change the directory in the command prompt to the sub directory called ‘front-end’.
  • Type into the command prompt: npm test
  • Click enter and wait from the tests to finish.

How to run

  • Navigate to the root folder of the app and run the command prompt in it.
  • Type into the command prompt: npm start
  • Open another command prompt and change the directory of it to the project sub folder ‘front-end’
  • Type into the command prompt: npm start
  • Wait until both applications are loaded. Your local internet browser will automatically open a new tab.

Security

  • This application uses the Helmet tool for security.
  • This application does not require the use of API keys to run.

GitHub

View Github