Class Project

The purpose of the quarter-long project is to give you hands-on experience with building a full-stack web application with the following basic components:

  • A server backend
  • A database
  • Connecting to external APIs
  • A frontend that loads data from backend without page refreshes (Ajax)
  • Using a data visualization library or API on the frontend

(We will not place as much emphasis on the concepts in the What will we not cover in this course? section at the bottom of the course description page.)

Project Theme

The project theme that we will focus on this quarter is interacting with real-world data.

This is purposely a broad topic, so we encourage creative ideas along the following lines:

  • Personal informatics
  • Health/fitness tracking
  • Behavioral tracking (e.g., your computer usage habits)
  • Civic informatics (e.g., using government data)
  • Discovery and recommendations
  • Computer systems monitoring and DevOps

If you are unsure of whether your topic is in scope, please message the course staff on Piazza.

User Privacy

Please read the following notes on user privacy with regard to the course project, and let the course staff know if you have any questions.

Taboo Topics

The following are taboo topics that your project must not contain, since they historically tended to be done too frequently for HCI / web programming course projects.

  • To-do lists
  • Calendar-based or event-finding apps
  • Parking or ridesharing apps
  • Dating apps
  • Food delivery apps
  • Chat/messaging apps

(Note that if you want to use your course project as part of your design portfolio for future jobs, you want to avoid these topics anyhow since they won't make your portfolio stand out.)

Project Deliverables

Milestone 1 – Proposal

Milestone 2 – Sketches

Milestone 3 – Frontend and Backend Skeletons

Milestone 4 – Connect Backend to Real-World Data

Milestone 5 – Progress on Frontend

Milestone 6 – Data Visualizations and Nearly-Finalized App

Final Deliverables

Frequently Asked Questions

  • See here for coding-related tips for Node.js web apps

  • Should we build a web app for desktop browsers or for mobile devices? Either is fine with us, depending on the details of your project. You can create either a regular web app or one optimized for mobile devices.

  • Can I build a native mobile app rather than a web app? No, you must build a web app since that is the technical focus of this course. Note that there are frameworks that you can use to make web apps behave like native mobile apps, so you can use those if you want.

  • What libraries or frameworks can I use? Anything you want, as long as you properly document the sources. We will be teaching a basic Node.js + client-side JavaScript stack in lectures, but you are free to learn whatever else you want on your own in order to use in your project. Feel free to be creative!

  • Do you have a recommended tech stack that we can use? Here is the officially supported tech stack for this course, although you are free to use whatever you like:

    • Node.js (backend)
    • Express (backend)
    • SQLite (database)
    • jQuery (frontend, Ajax to connect to backend)
    • Bootstrap (responsive CSS frontend)
    • plotly.js (data visualization)
  • My TA suggested that we pivot or switch our project idea. Will we get penalized for this? No, you will not get points marked off if you came up with an initial idea that may need to be adjusted, assuming that you made a good effort on meeting all the rubric items. In the design process, the purpose of feedback is to give you the freedom to iterate without penalty. As long as rubric grading items are met, you will get the proper credit. Also, please communicate clearly with your TA about whether their comments are merely suggestions or whether your project is truly out of scope and urgently needs to be changed. It is important to distinguish between different levels of feedback.

  • Why do we have to all turn in our milestones at the same time even though our in-person grading time may be a few days later? This is helpful for you because it gives you an official verified timestamp on the GitHub website for when you completed a milestone, which is useful in case you forget to bring something to your grading meeting (e.g., you forgot your laptop) or need to make a regrade request. You can feel free to improve your project after turning in you milestone, and your TA will grade the latest copies of whatever you present to them in person. (During the next set of milestones, a different set of teams will get that extra time, to make things fair.)

  • I can't make it to class during my assigned in-person grading time. What should I do? All in-person grading is scheduled during regular class periods, so you should be able to make it to class. However, if you cannot make it to class due to an emergency, that's fine. In general, all team members will earn the same grade on the project. But if your TA notices that you are frequently missing and not available to talk about your project, or if your teammates write down in their teammate assessment forms that you are frequently missing, then that may negatively impact your grade.

  • Do we have to come to class on grading days when our team isn't being graded? No, you don't. However, if you'd like to hang out and provide informal feedback to your classmates, you're welcome to come. But that will not be part of your grade.

  • Can we reschedule our grading times? Unfortunately not, because each grading day will be full of work for the TAs, and it is not fair for other teams to get less time if you switch days. Since this is a team project, somebody on your team should be able to make it to your grading day.

  • What is the policy on regrade requests? see here