[TODO: Replace with your Netflify status badge]
[TODO: Replace with a link to your Netlify deployed solution here]
For your unit 4 assessment you will be building a Media Store App that allows users to search the iTunes store for music, videos, TV shows and other media types.
This repository contains a basic React app. To install the basic packages needed to run the app, run the following command in your terminal:
> npm installThe finished app should include the following functionality:
- A user should have the ability to add and remove items from a basket.
- The basket should display the number of items added.
- A user should be able to search the iTunes Search API using a text search field and review a list of results.
- A user should be able to add and remove items in the search results to and from their basket.
- The app should have an About page explaining how to use the app and who designed it.
By the due date of this assessment you must have what is stated in the criteria, detailed below, pushed to GitHub ready to be marked. You must also have your working code deployed to Netlify and your site's status badge added to this file (README.md)
The tasks and homework throughout unit 4 explain how to build a Bookcase React App to store books. The Bookcase React App is an example of a SPA (Single-Page App). The same functionality and concepts can be used to build your Media Store app for this assessment.
The main functionality of the Bookcase React App was the ability to add and remove from a <BookList/> component and search a third party API. The Bookcase React App also used the BrowserRouter module to create new pages.
Ensure your app has the following file structure and functionality:
- public/
|-- index.html
- src/
|-- components/
|-- Basket.js
|-- BasketCount.js
|-- BasketTotal.js
|-- Header.js
|-- Product.js
|-- ProductList.js
|-- Search.js
|-- models/
|-- data.json
|-- pages/
|-- About.js
|-- styles/
|-- App.css
|-- App.js
|-- index.js
Ensure your application is broken down into components. Each component should be a logical representation of objects displayed in your application.
This is the main component of your application. The following functions will be defined in this file:
-
addToBasket(): Allows a product to be added to the<Basket/> -
removeFromBasket(): Allows a product to be removed from the<Basket/> -
search(): Searches the iTunes API for thetermsentered by the user
When started, the app should load an initial set of items from a local JSON file. Rename the example file \src\models\example-data.json to data.json and pass items from here into your <ProductList/> component.
Each object in the JSON file should be rendered by your <Product/> component.
Each product should have a button to Add to Basket. When clicked the item should be removed from <ProductList/> and added to your <Basket/> component.
Search.js will return a form with the following identifier id="searchAPI" e.g., <form id="searchAPI">. The form should have at least one text field for keyword input e.g. <input id="term"/> and a button to submit the form.
The search should be available on the home page of your app. Your search <form/> will need to have an onSubmit() handler that will call your search() function. The search() function will return results of the iTunes Search API
Your app should display the results of the search in an component called <ProductList/> with the identifier id="results" e.g. <div id="results"/>.
Users should be able to navigate to their <Basket/> and view all saved items. When their <Basket/> is empty a message should be displayed in an element with the empty class attribute set, that includes the phrase:
"No items found"
Users should be able to add items returned in the results from the iTunes Search API and items in the data.json to their <Basket/> component.
Users should be able to see a running total/tally of the costs of the items in their basket as well as the number of items. The total should be displayed in a <BasketTotal /> component.
<BasketTotal basketTotal={total} />Each item in your <Basket/> should have a button to Remove from basket. When clicked, the item should be removed from the <Basket/> and restored to the <ProductList /> component.
Your app should keep a count of the number of items in your <Basket/> and display the count in a <BasketCount /> component, e.g.
<BasketCount basketCount={count} />Expected functions and props for the <Product/> component are listed below:
Example expected props. Please note this is not an exhaustive list, but the minimum props required for assessment.
<Basket
basket={basket}
removeFromBasket={removeFromBasket}
basketCount={count}
basketTotal={total} />Allow a user to view an About page called About.js explaining the application functionality. This page should contain a <h1></h1> element containing the title "About". The About.js should be created in the pages folder. Each view/page of the app should have relevant links to enable navigation between the the About page, the Basket and the Home page.
Your finished app should contain three <Route/> components with the following paths:
<Route path="/"/>
<Route path="about"/>
<Route path="basket"/>To navigate to the routes above, your <Header/> file should contain the following <Link/> components:
<Link to="/" id="homelink"> Home </Link> |
<Link to="/about" id="aboutlink"> About </Link> |
<Link to="/basket" id="basketlink"> Basket ({props.itemCount})</Link>The component should render in an element with the product class attribute set. Expected props for the <Product/> component are listed below:
Example expected props. Please note this is not an exhaustive list, but the minimum props required for assessment.
<Product
kind={kind}
id={trackId}
name={trackName}
thumbnail={artworkUrl100}
price={trackPrice}
addToBasket={addToBasket}
removeFromBasket={removeFromBasket} />When the <ProductList/> is empty a message should be displayed in an element with the empty class attribute set, that includes the phrase:
"No items found"
Expected props for the <ProductList/> component are listed below:
Example expected props. Please note this is not an exhaustive list, but the minimum props required for assessment.
<ProductList
items={items}
addToBasket={addToBasket} />Add pagination (next and previous buttons). This will require storing the book data and page number in state, then only showing so many results per page
Add numbered pages and display the results of the search.
Add some animation or transitions to the application, i.e.
- Consider animating the selection and deselection of books.
- An animated results count when the search returns more than one page of results.
Modify the display of each product depending on the kind of item returned (e.g. movie, music, shortfilm etc). Read the iTunes Search API Documentation for a list of returned kinds.
Commit all created/generated files and folders to the repo and push to your remote repo for assessment.
The iTunes Search API can be searched for iTunes and Apple music, videos, TV show and other media.
An example of the output from a search can be found in the models folder example-data.json.
The following example show a call to the API to search the iTunes Search API for the word orange using the term query with a limit of 15, e.g.
> curl https://itunes.apple.com/search?term=orange&limit=30&explicit=noUse the following link to find out more details about how to use the iTunes Search API.
- To improve response times, minimize the number of search results the Search API returns by specifying an appropriate value for the limit parameter key.
- The Search API is limited to approximately 20 calls per minute (subject to change).
See the iTunes API help guide for more information on limits