Simple Application where you can search for song tracks from Itunes API and reproduce the previews.
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.
| 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. |
You can download the app and play around, enhance or even learn from it, and here is how to do it:
Show instructions
-
Clone the repo:
$ git clone https://github.com/luigi055/itunes-previewer.git
-
Install package.json dependencies:
$ npm install
-
start the app 😃:
$ npm start
$ npm test$ npm run test:ci