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

Homework 6: Connecting to a Backend

Assigned: 11/4/2021; Due 11/16/2021 extended until 11/18/2021 at 3:05pm ET


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 graphics editor of homework 5 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 also 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.


NEW! Clara made a useful video to go over how to set up Firebase database, and how to write code to make use of it. See:

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.

You will build homework 6 on top of your homework 4 implementation, since you are familiar with it, and most people did well on that assignment. We will strive to not penalize you again for whatever you lost points on for homework 4, so you can focus on the new parts - please make a note of these in your README.

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:

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 (and some extra credit) 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 3:05pm ET on 11/16/2021 extended until 11/18/2021.