In this programming assignment, you will implement a front-end interface using React that consumes an API. Please read through the entire MP before you start.
Here is a video demo for a sample application.
Create a single-page React app that lets users interact with the data from one of the following APIs.
- TMDB (https://www.themoviedb.org/documentation/api)
- Spotify (https://developer.spotify.com/web-api/)
- Pokemon (https://pokeapi.co/) Note that you may need to create an account and/or acquire an API key for some of the APIs.
Your app should have the following features:
- A list view: where users can input a search query and the app returns a list of results that match the query (i.e. searching movies or albums). There should also be a way to sort the search results based on different properties of the results (such as the name or rank) and of specifying an ordering (ascending and descending). Also, the search bar should filter as you type. You can sort and filter in the client side.
- A gallery view: that displays some kind of image media from the chosen API (gallery of movie posters). The gallery view should also have some kind filtering attribute where users can select one or many attributes and filter the gallery by them (i.e. genres of films or music).
- A detail view: When an item in the search view or the gallery view is clicked, the app should display the different attributes of the selected item. Also, this view should have previous and next buttons (can be implemented with arrows) that lets the user cycle through the list of objects.
Total Points : 50
List View:
- Does the list view display relevant items from the chosen API ? (2 points)
- Does the search bar filter down the items based on the search? (4 points)
- Can you sort by at least 2 properties? (4 points)
- Can the sorting be done in Ascending and Descending order? (4 points)
Gallery View:
- Is the gallery composed of item media? (2 points)
- Does clicking on a filter change the results? (4 points)
Details View:
- Does clicking on an item in List View take you to the Details View? (5 points)
- Does clicking on an item in Gallery View take you to the Details View? (5 points)
- Does the Details View contain item details? (4 points)
- Does the PREVIOUS and NEXT buttons work correctly? (5 points)
Other:
- Does the implementation use React Router and PropTypes? (6 points)
- Design (5 points)
- Start early! This is first MP that uses React so start ahead.
- Use
react-router-domfor routing. - Use
Axiosfor API calls. - Use
SemanticUIfor frontend design - Use
PropTypesfor relevant components. https://facebook.github.io/react/docs/typechecking-with-proptypes.html
- This is an individual assignment. No collaboration is permitted.
- It is not permitted to copy/paste code that is not your own. You are, however, free to look at different code sources for inspiration and clarity. All sources (code as well as reading material) that you reference to complete this assignment must be declared in the submission.
- There should be no use of inline styling.
- No inline script tags should be used.
- HTML tables cannot be used for layout.
- If you think something you’re doing might not be acceptable, please ask on Piazza.
- You must utilize some SCSS features (variables, mixins, etc). A plain CSS file will receive less points.
- Clone the repository:
git clone https://github.com/uiuc-web-programming/mp2_starter_17.git mp2, thencd mp2 - Install dependencies:
npm install - Run the dev server:
npm run dev - Open a browser and go to
http://localhost:8080/to view your page. You should see "Welcome to MP2!". - Open up
source/index.jsandsource/html/index.htmland read the comments in those files to get an idea of how to start. We will not answer questions that are already answered by the comments there.
TBD