Learning goals

• Make a basic React Javascript frontend that uses your REST API developed in HW2.
• The final result of this homework and the previous two is a complete news article search engine.
• On other words, we will have built something impressive in a few hundred lines of code (HW1 +HW2 + HW3).

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. 

Requirements

Your UI should include:

• A big search box, like google.com.
• Search results should appear as you type.
• If more than ten search results are available, then you should provide a control to see further pages of results.  Further results can be shown on a new page or they can be loaded below the original results.  Alternatively, you can provide an "infinite scroll" to see more results.  However, be careful not to load more than ten results at the beginning.
• For each search result, show a row similar to what is shown at google.com.  It should include:
  • The page title.
  • The url (readable to the user).
  • A small snippet of text from the article, with search keywords highlighted.
  • At least some part of it should be clickable to visit the page.
• There should be controls to filter the search results by language, and also by date.  For example, you can include a checkbox to include only english (en) search results.

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:
https://reactjs.org/docs/hello-world.html.

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:

fetch("https://ssa-hw2-backend.stevetarzia.com/api/search?query=hello")
        .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.

Tips

• A more complete React example is in the repo at https://github.com/starzia/ssa-skeleton/blob/master/hw3/index2.html
• One of the recent Zoom class times talked about HW3 and showed how to debug your code in a browser.  I suggest you review this recording, starting at time 12:40.
• If you overwhelm the backend you might temporarily get 400 or 500 errors in your HTTP responses.  These should not break your interface.
• When implementing results "as you type" you'll be sending lots of concurrent requests (one for each letter typed).  It's possible that the responses will take different amounts of time and lead to a reordering of the responses.  You should handle this correctly (but ignoring a delayed response to an earlier request).

Evaluation

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

Submission

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