CMSI 370 Interaction Design, Fall 2019

Now that you have your design and some startup know-how, you must be itching to start implementing it. So now we will, but in two phases.

The first phase is solely about the front end. We will leave stubs, placeholders, or mocks at the points where we expect to call our chosen web service APIs. Filling those in will be the concern of Assignment 1114. For this assignment, we focus on the core content of the course: your application’s user interface.

Resources to help you with this include many of the links listed on the course website, assorted samples from the bazaar repository, and the starter files that are included with your GitHub Classroom repositories for this assignment, once you have set yourself up.

For this assignment, you will most likely use the reference documentation of your chosen web service API. To review the big picture, you can refer back to this Prezi along with the class screengrab recording that talks through this big picture.

Because you are using the same repository for this assignment, you should be good to go with automated feedback. If not, then what’s taking you so long?

Replace the API stubs and mocks in your front end with actual requests to your chosen web service API. If you maintained the recommended design for this layer in Assignment 1029, then this part should be a no-brainer: once finished, your front end will “just work” and immediately shift to reading and writing real information to/from your chosen web service API. Once you have a broader range data coming in and out of your application, undiscovered bugs or areas of improvement may emerge, so make sure you run your front end through its paces afterward, fixing any issues that emerge.

The starter code for the technology stacks all contain an extra “real API” file that genuinely implements one web service API call for you. Pattern your full API implementation after that code.

Once this step is finished, you should have a complete application, with a user interface of your design and implementation communicating with a real-world web service.

Edit your front end code “in place” (i.e., keep on working on the code that you submitted for Assignment 1029) and continue to commit and push it as needed. If you need to revisit first principles, you can refer to the original starter code in the repository (aren’t you glad that you copied these files in the beginning, rather than going straight to editing them?).

Thus, your submission is simply a continuation of the work that you started with the front end. Evaluating your work will proceed as before, based on the files at the top level of the repository.

Programming assignments are scored according to outcomes 3a, 3b, and 4a to 4f in the syllabus. For this particular assignment, graded categories are as follows:

The last three graded categories are “deduction only,” meaning that you will only get points taken off if there are significant issues with those categories. Such issues include but are not limited to: lingering linting errors as of the final commit (4c), insufficiently granular or unmessaged commits (4e), and late commits (4f).

This folder contains a very simple React-based web front end sample that uses the Giphy API to search for then display matching animated GIFs. The project was bootstrapped with Create React App. The most recent version of its guide can be found here.

The “style” of component used here is class-based: i.e., components are defined via the definition of a React Component subclass.

From a fresh clone, run npm install.

To see the site locally, run npm start then visit http://localhost:3000.

Run tests with npm test. Look at your test coverage with npm test -- --coverage.

Create a deployment-ready build with npm run build.

If you don’t feel like styling your components yourself, you might consider the following:

• Font Awesome: A convenient and powerful collection of icons and glyphs—they have a free set which anyone may use
• Material UI: React components that implement Google’s Material Design
• reactstrap: React components that mimic Bootstrap 4

Not style-related, but still potentially useful, is React Router. This allows your application to serve up multiple URLs while still retaining a unified code base:

• React Router