Class Project

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

  • A server backend
  • A database
  • Connecting to some external API or using a source of real-world data (details here)
  • A frontend that loads data from backend without page refreshes (Ajax)

(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.)

Team Formation

First read these requirements for forming teams.

Project Theme

The project theme that we will focus on this quarter is designing for people very different from yourselves.

We often design products for ourselves or for people like us, which has the benefit of being able to use our friends for needfinding and user testing. However, some of the most interesting project ideas come from designing for those who are very different from us. These kinds of projects will really help your design portfolio stand out when applying for jobs.

This theme is purposely broad to give you lots of flexibility in coming up with project ideas. Think as different and out-of-the-box as you can. But here are some other constraints:

  • As a ground rule, none of your team members can be in the target user population for your project idea. (This means, at minimum, no projects that target college students!)
  • No taboo topics (see next section)
  • Your project should be something you would feel comfortable showing off to your extended family at a holiday reunion; this means keeping your content “PG-rated” in movie rating terms.
  • Finally, your project should either connect to some external API or use a source of real-world data that you import into your database (details here).

If you're unsure of whether your topic is in scope, please message the instructors on Piazza.

Taboo Topics

You cannot create the following kinds of projects, since they have been done too frequently for HCI / web programming courses:

  • To-do list apps
  • Calendar-based or event-finding apps
  • Event scheduling or organizing apps
  • Class finding, planning, scheduling, or registration apps
  • Parking or ridesharing apps
  • Dating apps
  • Chat/messaging apps
  • Discussion forums or discussion apps
  • Near-direct clone of a popular app that many students already have installed or use regularly in their web browser

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.

Note that you may include some of these ideas (e.g., real-time chat) as components in your project, but your project can't be primarily focused on these topics (e.g., it can't just be a chat app). Check with your TA for final approval.

Project Deliverables

See course schedule for all due dates.

Example API and Real-World Data Sources

For your COGS120/CSE170 projects, it was often OK to use mock (fake) data since you were prototyping basic interactions. However, for this course, we want you to use real-world data for your project. This can either be via connecting to APIs or by importing datasets (e.g., .csv files) directly into your database. Here are example APIs and sources of data. You're not obligated to use any of them; you can choose any real-world API or data source appropriate for your project, as long as your TA approves.



Frequently Asked Questions

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

  • Do our team members need to be in the same studio/section? No, they don't. You can team up with anyone who is in the course. Ignore the studio/section times for now.

  • 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)
  • 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