CSE 134B: Client-Side Web Languages

Winter 2017 | University of California, San Diego CSE Department

Homework #4 - Prototyping the Core CRUD and Authentication Features

The first homework had us design the basic CRUD and Login aspects of our TopicDex app. The last two assignments had us prototype the views and markup scaffold in CSS and HTML respectively. In this assignment we prototype the core functionality of the application in JavaScript using the popular Firebase platform. The final assignment will have us integrate and refine our application in a final form.

A common mistake observed in Web development practices is prototyping is too often limited solely to the interface development portion of a project. An exploratory attitude can also serve us quite well in coding. In this assignment we want to implement the basic functionality of our final app with little distraction. In this assignment we must use Firebase to show working login system. Firebase provides numerous methods for performing authentication. You must implement standard email and Google based login only. Second, we must provide a way to perform CRUD actions (Create, Read, Update, and Delete) on some data that is like the data that might be stored in your TopicDex. Firebase also provides APIs to do this here and here. Understand that our TopicDex will have standard textual assets as well as dependent files like images. This will require us potentially to use both APIs previously mentioned for CRUD actions. Numerous examples can be found that show how basic CRUD examples can be created with Firebase online both using vanilla JavaScript, jQuery and a framework such as VueJS. You do not necessarily have to mimic the flow of your app in a final form for this assignment but you do have to accomplish these rough tasks to pass a sanity check test that it functions properly. You also may find that there are demos that use components in Bootstrap or Material style design (in raw JS, jQuery or VueJS) for project specific interface features like data grids, dialogs, and upload facilities can be found widely online. Testing these features out in an exploratory fashion before a final execution would help us execute our last phase quickly and with quality.

A secondary goal of the assignment is to take our prototype work and attempt to define coding practices before we make our final execution push. We will allow students to use vanilla JS, jQuery or VueJS in this effort (no other choices will be allowed for our grading sanity). However, we need to encourage some adoption of a code structure so that your project doesn't quickly devolve. The prototype you turn in should show a clean file tree, consistent names of files, clean formatting and naming and so on. We do this now in this small case so that when we perform the final effort we will have a pattern to follow as we work out details. There is no right answer to this other than consistency. The graders will want to see decisions made and followed. A good guideline is that if they can tell three different people wrote the code, named the files, etc. you will lose points. While this part of the assignment isn't worth many points now, expect the final turn will increase the value, so if you nail this down now it will be easier to collect more points later.

The final goal of this assignment is to understand the ramifications of the use of technologies again. We want to note the things we discover as we work with Firebase as well as any libraries or components we employ to test out the core functions. We also again want to see what will happen if we run our code on a limited device (the Android device with a 3G network throttle). If you can make adjustments to make your prototype code work better on this device under these conditions you should do it as it will only get worse in the final step. In other words, if you have not done any optimization to make your prototype code run in a user tolerating fashion there is little chance that once you fully implement the app it will work reasonably from the user's perspective.

Your turn-in will include a single version of your Firebase prototypes that should be reachable online at your hosted location. However, note that you can prototype as many ways as you like, but you will turn in only what you want us to see and grade. You may however do other things which may discuss in your write-up. As usual you must provide repo information for the TAs to look over your efforts and specific details will be provided in channel to assist the turn in logistics. Also like the previous assignment you should write some information about what you found out in your efforts particularly any data you may have on the performance challenges and development challenges you faced. Failures in coding exploration are not only tolerated, but may be welcome and useful to you. For example, if you found things hard, inappropriate for the job, etc. use your write-up as a place to recover points. Once again the write-up should be no longer than 3 pages and be succinct and to the point.

Back to CSE134B


  • 10pts for authentication (5pts for email, 5pts for Google)
  • 20pts for CRUD (5 points for each function).
  • 10pts for asset management (2.5 points for each CRUD function against image or other assets used)
  • 5pts for repo organization and coding consistency
  • 5pts for performance optimization
  • 15pts for write-up

Total: 65pts, the graders may award up to 10pts extra for submissions that show quality or execution above class average including in lessons learned discussed in write-up

Due Date: 9PM March 6th