CSE 134B: Client-Side Web Languages

Fall 2017 | University of California, San Diego CSE Department

Homework #4 - Front-End First Coding

It is time to implement the soccer team management application we speced in HW1 and prototyped in HW3. Traditionally as coding focused computing professionals we would spend a great deal of time building data structures and models first, but so far in this class we have designed from the interface down. In this step we should work upwards from the data and join the two halves. In this assignment we will build a partially functioning application and when finished all that be missing will be a few server-side pieces of the application.

While later we will employ the Firebase service to provide authentication and storage for our application, in this part of the assignment we want to build the application out without worrying about this cloud service, the network and all the related possible failures. To build our working app we will use Vanilla JS or jQuery focused JS to make our screens from HW3 work. You are free to use either ES6 or ES5 style JavaScript. Make sure any JavaScript you use is clean according to ESLint Note: If you believe you need more than anything beyond basic JS to accomplish this you must have clearance from the Professor.

Your app should:

  • Allow Login and Logout
  • Handle roster creation and management (full CRUD - Create, Read, Update, and Delete of players on the team)
  • Handle schedule creation and management (full CRUD of team schedule including practices and matches)
  • Perform statistics collection and display based upon what you speced in previous assignments
  • Any other feature you speced in HW3

You do not have to store data your team data in the cloud or a database. You can store the information in memory or local browser storage Authentication can also be faked with some harcoded passwords. Homework #5 will remove any mocked features so be careful and use abstractions so that it is easy to swap out a "faked" feature for the real one in the coming weeks.

You must make sure your application is tight and performant. Your evaluation should be performed with your median level Android phone throttled to a 3G connection. We will of course evaluate your application during grading against the RAIL principles so keep focusing on speed.

Because you are turning in an interim step for this HW you must compose a planning document discussing upcoming changes and include comments on your decisions especially you had to cut corners or leave execution until later.

Back to CSE134B


  • 5pts for Login/Loguout
  • 20pts for Roster List and CRUD
  • 20pts for Schedule and CRUD
  • 20pts for Statistics Management
  • 15pts for Code Quality
  • 10pts for Performance conformance
  • 10pts for Write-up

Total: 100pts We will award 10points extra to the three best executions in class.

The assignment is due Sunday Nov 26 @ 9PM. Turn-in logistics will be provided by the TAs in Slack