SWE 432, Fall 2018, Homework 4, Due Nov 14, 10 am

Please post questions on Piazza

Project Overview

This semester, while you learn the key concepts of web application development, you will apply these skills to build a meme generator, which we will refer to as the Memebase. A meme is a cultural phenomenon that combines some popular graphic (for example, a cat or TV/movie character) with large-block text. As an example, here is a meme generated by combining a graphic called “news cat” with some text relevant to this project:

You will build the Memebase in four different components; each assignment will be one component. Each component will conform to a common interface, allowing them to be independently developed and tested. The final result will be a working website that allows users to generate memes, create accounts to share and track their memes.

This Assignment

For the fourth component, you will augment your frontend to allow users to register/login, and save generated memes in Firebase.

Getting Started

You’ll need to install Node.js on your computer — version 8 or higher. You can follow the instructions on the Node.js installation page for the “LTS” version to get it installed.

It is  not required that you use an IDE, but it’s a really really really really good idea. JetBrains’ IntelliJ/WebStorm is a great choice — if you already have IntelliJ you can add the NodeJS component to it, or simply download WebStorm. You can get a free license to use any of the JetBrains IDEs by filling out this simple form.

Then, you are ready to get started. Download the handout, extract it, and then open a terminal in the handout directory. Run the command  npm install, which will download all of the JavaScript modules that the assignment will use.

Overview

For this assignment you will augment the code from HW3, adding two key new features:

1. Users now must register and signin in order to generate memes
2. All memes that are generated are recorded in Firebase
3. Users can “favorite” memes (that they have generated or that others have generated) and view their favorites.

We’ve provided a writeup of some of the more complex behavior, but otherwise you should decide on what to implement and how based on the reference implementation, available at: http://reference.thememebase.com/

Helpful Links:

JavaScript reference book – Free access on campus or on VPN

React-Bootstrap documentation

React documentation

Firebase firestore documentation

Firebase authentication documentation

Part 0 – Configure Firebase

Copy your Firebase configuration into firebase.js. In the firebase console, under authentication, enable email/password signin.

Part 1 (20 points): Authentication – register and sign-in

We have configured the handout so that certain components are only available to the user when they are logged in, and to redirect the user to a login page if not logged in. You should implement your entire login functionality using Firebase’s email/password authentication. The rest of the application will detect that the user is correctly logged in once you succeed in performing the login with Firebase.

You can do the redirect by emitting:
<Redirect to={“/”} />
You can access the firebase auth component through the reference  firebase.auth.

Helpful API methods:

If a user tries to sign in and there is no account with that email, then an account should be automatically created. If there are any errors returned from firebase during registration/sign up, be sure to display that error to the user in a react-bootstrap  Alert.

Part 2 (40 points): Persisting, displaying generated memes

Whenever a meme is generated (but not including when the default template is generated), the meme should be recorded in Firebase. You should store it by recording the template name, and the text that is applied to that template (do this in MemeGenerator).

Implement the  MemeList to display the list of all generated memes (sorted by creation time, descending). It should paginate the list of memes, only showing a maximum of 10 memes per page. You might find the  Pagination component useful.

Use Firebase’s  onSnapshot call to fetch the data, and once it’s fetched, store it in your  MemeList’s  state.

Important:

Make sure to unregister any  onSnapshot observers that you create when the  MemeList is unmounted. The  onSnapshot method returns a method that you can call to cancel the observer — you should store this method for later use (to cancel the observer). Otherwise, you will leak resources.

Part 3 (40 points): Favoriting/unfavoriting memes

Add a button to your  MemeGenerator called “Favorite.” It should only be possible to favorite a meme that the user has generated (e.g. not the starter template that you show by default). When a user clicks “Favorite,” the meme should get saved into Firebase using the user’s email address as a key (accessible as  this.props.user.email in the  MemeGenerator and also in the  MemeList. If the meme has been favorited already, then disable the button to indicate that it has already been saved

Update your MemeList to display a favorite/unfavorite button for every meme. From the main page (which you implemented in part 2, and displays all of the memes), users should be able to select to favorite any meme (and if it’s already favorited, then to unfavorite it).

Update your  MemeList to take into account the  this.props.isUnfiltered property. If this property is set to false, then you should display  only memes that the user has favorited already (this is what is rendered when selecting “View Saved Memes”).

Note: You should consider each generated meme as a target for favoriting – so, if there are 3 memes with the same template name and same text, a user could choose to favorite each one individually.

Grading

Your meme generator will be graded by hand (as described in each section above). When you submit to Autolab, it will not grade your submission at all. We will grade for correctness on the above points — and you should test your functionality by hand as well.

Hand In Instructions

You must turn in your assignment using Autolab (You MUST be on the campus network, or connected to the GMU VPN to connect to Autolab). If you did not receive a confirmation email from Autolab to set a password, enter your @gmu.edu (NOT @masonlive) email, and click “forgot password” to get a new password.

To prepare your code to be submitted, run npm pack in the assignment directory. This will create an archive  thememebase-4.0.0.tgz – this is what you will submit to Autolab. Do not try and generate this archive without using  npm; it’s highly likely to cause Autolab to reject it.

You can resubmit your assignment an unlimited number of times before the deadline. Note the course late-submission policy: assignments will be accepted up until 24 hours past the deadline at a penalty of 10%; after 24 hours, no late assignments will be accepted, no exceptions.

Questions

Please post questions on Piazza