This assignment builds on the past two by implementing a React.js frontend to present news article search results.
It will be manually viewed by a TA for grading.
Note that again this is NOT a group project.
Your UI should include:
Skeleton code for HW3 has been pushed to https://github.com/starzia/ssa-skeleton/blob/master/hw3/index.html
If you are new to React, I suggest that you use my skeleton code to develop your application entirely in one big file (with JS and CSS embedded in the HTML). The advantage of this approach is that it lets you focus on the basics of React without having to install or learn any new tools. One the other hand, using one big file makes it difficult to built a very large codebase and to import third party libraries. If you are already familiar with React, then you can ignore my skeleton and submit a zip or tgz file with multiple files. (I think this can be generated with "npm install hw3.tgz" but I have not verified this.)
If you do not already know React, this is a good opportunity to learn it. Please set aside an hour or two to carefully go through this entire React tutorial:
The tutorial linked above has everything you need to know about React to do the assignment. Normally I prefer to "learn by doing," but React is really quite different than any other framework/language I've seen, so the tutorial is actually essential!
Also, I recommend that you make your API calls using the fetch function, for example:
.then(response => response.json()) /* asynchronously parse the response as JSON */
.then(json => /* do something with the resulting "json" object */)
.catch(() => /* do something if either the HTTP call or the JSON parsing fails */);
If you don't know anything at all about HTML, then now is a good time to learn HTML as well.
The provided skeleton includes the Bootstrap CSS library. This lets you make things prettier than the default HTML style, but you can drop it if you prefer another way of styling your page.
A TA will download and view your page. Points will be given for functionality, ease-of-use, and (to a lesser extent) beauty. Please make sure that your index.html file still works when your submission is moved to a new empty folder (in other words, that your submission is self-sufficient and does not rely on any other files).
The HTML file your submit to Canvas should be hard-coded to make REST requests to my own implementation of the backend, at "https://ssa-hw2-backend.stevetarzia.com/api/search".
You can actually do HW3 before HW2 is completed (because I have made my own, correct backend implementation available to handle your REST requests).