This is an old version of the class. Please see the 2021 version instead.

Homework 6: Connecting to a Backend

Assigned: 11/3/2020; Due 11/16/2020 at 1:30pm ET (extended from 11/12/2020)


In this assignment, you will be connecting your existing website to at least 2 different remote sources - the Google "Firebase" cloud database, and the Unsplash web service for downloading pictures, and then you will modify your shopping cart to support T-shirts using a picture. You will use the cloud database to allow users to login with their Google credentials, and to store their shopping cart, so it will persist between sessions, and also so different people can have different shopping carts. You will use the Unsplash web service to support adding a picture to a design (note: the free "demo" level only allows 50 queries per hour). For extra credit, you can also put your custom design from the editor onto a T-shirt, and be able to add that to the cart as well. These will be added to the version of your website from homeworks 4 and 5 that uses React for both the eCommerce part and the drawing editor part (with undo).

The user interface for homework 6 adds a way to log in and log out using Google credentials, and a screen to search for a particular image and put it on a t-shirt.

As with previous homeworks, you are allowed to use certain libraries for homework 6. You can obviously use all the ones from previous homeworks, plus the libraries that support Firebase and Unsplash. You can use the built-in functions for interfacing with the network, like fetch. You might find the library useful for sorting the array of cart items from the database.

However, you may not use libraries that implement saving a shopping cart directly, or saving a cart to a database, etc. If you have another package you would like to use, please ask on Piazza.


We have supplied a set of "Scotty" pictures (in the assets folder with the other pictures) that you can use as placeholders when there are no search results or when the user starts out (see this picture), as well as a blank t-shirt to put your pictures on. We also supplied a tempResults.json file which you can use as an example of the kind of data that the Unsplash web service returns, so you can debug your parsing and displaying functions, without using up your limit of 50 queries per hour to the real web service.

We recommend that you build this homework 6 on top of your homework 4 implementation, since you are familiar with it, and most people did well on that assignment. However, if you want, we have supplied a reference implementation of homework 4, called which you can download and use instead if you want. (To be clear, unlike with homework 5, for homework 6 you are not required to use ssui-hw4-demo to start with.)

You will download the file which will contain the following starter files:

In addition, we have supplied the following for your reference, also in the zip file:

Note that the reference implementation of hw4, called ssui-hw4-demo is not part of the SSUI-hw6 download, since it is optional.

index auth-login auth-popup auth-index-logged-in auth-logout create from picture Scotty Selected Tiger selected Display More Cart with Image Shirt

Detailed Requirements

We have supplied a movie to define the required behaviors. As with previous homeworks, you should be careful to meet the specification below for full credit. If something is unclear about how it should work, or you want to deviate from the defined behavior, you might want to first ask on Piazza.

Extra Credit

Turn In

Please have a README file in your subfolder (as in hw3, hw4 and hw5), which can be in plain text, Microsoft Word, or pdf format, which should contain:

Please upload this README file to Canvas by 1:30pm on 11/16/2020 (extended from 11/12/2020), in addition to having the file in your subfolder.