Itunes Previewer Media Player

Simple Application where you can search for song tracks from Itunes API and reproduce the previews.

Previews Mobile

Live Demo

UX / UI Improvements

Basic improvements for Responsive Design. since the design provided was desktop only, I extended the Base design to be friendly with mobiles phones since most of the case the screen size are smaller than desktop screens.

• Playlist. for small screen the application shows the tracks like a list. displaying only the most relevant information, and in order to keep the sorting behavior. I added an additional HTML selector (only visible for small screen sizes) where the user can sort the list based on Track duration, price or Genre. The rest of the UI for wide screen sizes is displayed as the resources provided.

• Header. in order to make this component responsive in small screen sizes, The title will be on top of search input.

• Social Share Button. In small screen size the buttons are displayed above the player controls.

Technology Stack

• JavaScript
• TypeScript
• HTML,CSS
• surge.sh
• Node.js

Dependencies and Libraries

Library	Usage
React	library for building user interfaces
Redux	State Container for JS Appst
Jest	Testing Framework.
React Testing-Library	For testing React components
Styled Components	for Styling React component
Redux Saga	for Handling application side effects.
react-router-dom	DOM bindings for React Router.

Usage

You can download the app and play around, enhance or even learn from it, and here is how to do it:

Show instructions

1. Clone the repo:

   $ git clone https://github.com/luigi055/itunes-previewer.git

2. Install package.json dependencies:

   $ npm install

3. start the app 😃:

   $ npm start

Run Tests

$ npm test

Run Tests Coverage

$ npm run test:ci

License

MIT