Learning goals

The Assignment

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:

Provided code skeleton

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.

You can do all of your testing locally on your own machine, by simply opening the html file in the browser of your choice.  The web browser also allows you to set breakpoints in your JS code and use the Javascript console for debugging.



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).