CSE 134B: Client-Side Web Languages

Fall 2017 | University of California, San Diego CSE Department

Homework #5 - Fully Working RAIL Focused Progressive Web App

In the previous assignment we made our Soccer Application "work," but we did not fully integrate it with a cloud hosted environment nor prepare it for the final release to production. In this final assignment we finish wiring up the application and make it work as a highly resilient progressive web application (PWA) that performs excellently on our median Android phone throttled to a 3G connection. We aim to do this using plain Vanilla JavaScript with some assistance from a Google library, though an extra credit section will allow you to explore another approach using a modern JavaScript framework of your choice.

From HW4 our application did not fully implement the CRUD and Authentication features. In this assignment you should use Firebase or an alternative of your own choice to accomplish true user login and CRUD features. You should not need to write server-side code if you do this correctly at the worst case you may end up writing cloud functions or other JavaScript that you may host. As a client-side focused class if you find some desire to go write a bunch of PHP or NodeJS code you are doing things wrong and need to talk with the Prof or TAs promptly.

For this version of our app we should fully implement:

  • Appropriate authentication with Login and Logout
  • Handle roster creation and management (full CRUD - Create, Read, Update, and Delete of players on the team) to a live datastore in the cloud such as Firebase
  • Handle schedule creation and management (full CRUD of team schedule including practices and matches) also to a live data store in the cloud
  • Perform statistics collection and display using your live data store

Beyond these base requirements, your application should employ a PWA pattern. You are encouraged to use the Workbox library from Google to accomplish this step, though you may use Service Workers directly as you see fit without such a library.

As a PWA your application should:

  • Work offline
  • Score as high as possible in Lighthouse
  • Provide appropriate add to Home Screen and app integration features like splash screen and icons common to PWAs
  • Provide a speed focused solution that may include other strategies such as HTML/CSS/JS minification, gzip, bundling, caching, and optimized images. Image optimization may be performed manually or using an online service

Lastly, you should prepare your code for a final handoff with appropriate commenting, documentation and refactoring as you see fit to make this your last turn-in. Translation: If you have things you want to change in your application now that you have lived with it a bit please do so. To inform the graders to what you have done well and how your application works please provide a detailed write-up that covers your coding and solution approach, your runtime performance, any changes you made the graders should take note of and finally some indication of areas that you think you did well on and areas you could stand to improve. An honest assessment of your execution will carry significant weight in grading (see point discussion below).

Extra Credit: Since you have taken the time and care to implement the application in a raw form you may desire to see how it would go if using a modern library such as React, Angular, Polymer, or VueJS. You are free in the homework to port the application to one of these listed libraries and write up a comparison in terms of development efforts and performance trade-offs. The extra credit is worth up to 50pts, with 10pts being related to analysis and discussion and 40pts for the code. You may not perform the extra credit in place of the vanilla version. If your vanilla version does not work your extra credit will also not be accepted, so focus on your main assignment first and foremost.

Back to CSE134B


  • 10pts for Login/Logout
  • 20pts for Roster List and CRUD
  • 20pts for Schedule and CRUD
  • 20pts for Statistics Management
  • 20pts for PWA Execution
  • 10pts for Misc Speed Focused Changes
  • 25pts for Code Quality
  • 25pts for Write Up and Discussion

Total: 150pts

The required portion of the assignment is due Friday Dec 8 before 11:59PM. Turn-in logistics will be provided by the TAs in Slack. The extra credit may be turned in any time before Tuesday 12/12 at 11:59PM to the graders.