courses.pgbovine.net

Class Project

As part of this class, you will create a Web application in a group of 2 or 3 students. (No single-student projects allowed.)

An open-ended class project complements the traditional lecture-and-exam format of this course. While exams rigorously assess your conceptual understanding, the project allows you to hone your pragmatic Web programming skills, to practice project and team management, and to express your creativity.

Minimum project requirements

At minimum, you must create a CRUD Web application (sorry for the unsavory name!) that supports Web 2.0-style Ajax interactions, using the concepts from Lectures 1 to 7.

In other words, your Web app must:

  • allow users to create accounts and add new persistent data
  • read data from the server and present it on a webpage
  • allow users to update their existing data
  • allow users to delete their own data and accounts
  • do all of the above without reloading the webpage (Ajax)

Piazza, Gmail, and Facebook are all examples of such CRUD apps, though yours obviously won't need to be so sophisticated.

In contrast, a static personal website or even a dynamic weather-lookup app would not meet our requirements, since those are read-only. There is no way for a user to create an account or to update their personal data.

In the spirit of creative freedom, you are free to use any programming languages, libraries, or frameworks that you like. However, if you would like to get help from your TA, please ask them what tools they are most familiar with, so that you can get the best help from them.

Here are a few high-level rules:

  • Your Web app must work properly when viewed in a modern Web browser without installing any plug-ins or extensions. This means no Flash, no Silverlight, no Java, etc. It also means that your client-side code must be some form of HTML/CSS/JavaScript. (But you can write code in other languages that compile into HTML/CSS/JavaScript.)

  • All of your project's code must be publicly hosted on GitHub.

  • Your team must be able to demo the project in-person to your TA for grading and allow your TA to use your Web app, either on your own computer or online. (You don't actually need to deploy online if that's too much trouble to set up.)

  • Your project must not contain offensive content or otherwise be in bad taste. We know that “taste” is inherently subjective and context-dependent, but you must trust the staff's judgment. Our goal is not to stifle your creativity, but rather to ensure a safe and inclusive environment for your classmates. An appropriate project is something that could be shown in a PG-rated movie, and that you would feel comfortable showing off at a big family reunion.

Groups

You need to form a group of 2 or 3 students. All members will collectively submit a single copy of all milestones (as documents on GitHub) and receive a single grade. It's your responsibility to divide up the work fairly amongst members. The staff will not intervene in intra-group conflicts.

We will expect 3-person groups to attempt more ambitious projects than 2-person groups. Each group will be assigned a TA who advises and grades their project.

Milestones

To provide some structure to this endeavor, we have provided four graded milestones plus a final report and presentation. Submit all project documents on GitHub, and include all of your group members' names and UR email addresses. All of your group members can be collaborators on the same GitHub repository, so anyone can submit. Also, pick a (tasteful) team or project name so that we can easily identify your group.


Project Milestone 1 due at 11:59pm on October 20

By this milestone, you need to turn in a project proposal on GitHub. Your project's details will likely change throughout the semester, but it's important to have some starting point. Your proposal must address these questions:

  • What is the proposed name for your Web application? (Make your GitHub repository name similar to your project name.)

  • Who is the target audience for your Web application?

    • [Optional stretch goal: Identify a target audience that none of your group members belong to. This will make your project more unique than a Web app for college students.]
  • What problem is it intended to solve for that audience?

  • How will it meet the minimum project requirements?

  • Why is your proposed Web application unique or creative beyond simply meeting the minimum requirements?

There isn't a length requirement for the proposal, but make sure it clearly answers the above questions in enough detail so that the staff can assess whether your project is appropriate for the class.

The staff will be available on Piazza and in office hours to answer your questions about project proposals and to work with you to refine your ideas.

How to submit: Create a new free public repository on GitHub and put your proposal document into the repository with the (exact!) filename csc210-proposal.md if you want to use Markdown, or csc210-proposal.txt if you want to write in plain text. Make sure this file is visible from the Web interface. The latest commit timestamp on this file must be on or before 11:59pm on October 20 (U.S. Eastern Time). Then, very importantly:

Post your repository's URL on Piazza as a reply in the "Project GitHub URLs" thread, so that the staff can see everyone's URLs in one place. Do not start a new thread, since we will lose track of your URL.

If we think your proposal needs to be amended, then we will give you feedback by October 25.


Note: These milestones are here to help you pace yourself on your final project. If you would like to work faster than this pace, then by all means, go ahead!

Project Milestone 2 – meet with your TA on Nov 2 to 8

By this milestone, you need to have implemented the “C” part of your CRUD app: allow users to create accounts and, optionally, to add some persistent data of their own such as user profile information or preferences.

You need to let your TA verify in person that they can successfully create an account. The best way to do so is to make a login page so that they can log in with their newly-created account.

You must implement your own account creation and persistent data storage layer (e.g., using a database) rather than using a third-party login service such as Facebook, Twitter, or Google+ authentication. You can use libraries to help you implement this functionality, but you cannot simply use a third-party login service. (Your project can still integrate with Facebook, Twitter, Google+, etc., but you must create your own independent login service.)

Your TA will meet with you in person to try out your Web app to make sure it works so far. They must be able to open up several different Web browsers and create independent user accounts in your app. In other words, your app cannot simply use IP address as a proxy for user identity, since someone on a single computer using multiple Web browsers should be able to simultaneously log in with several different accounts.

Don't worry about security for this project ... just do the best job you reasonably can. For instance, you don't need to activate HTTPS since many low-cost Web hosting services don't support it. Also, don't worry if your app looks bare or ugly at this point. Just focus on making the user account functionality work well.


Project Milestone 3 – meet with your TA on Nov 16 to 22

By this milestone, you should implement enough functionality for a user to:

  • Create an account (from Milestone 2)
  • Log in and see an on-screen indicator that they are logged in.
  • Remain logged in even after closing their browser and re-opening it, assuming cookies are enabled. Hint: use cookies with expires and/or max-age tags. You can also use localStorage.
  • Not be allowed to log in again until they have logged out.
  • Log out.
  • Do something CRUD-related when they are logged in. This can be pretty much anything non-trivial; we just want you to make some forward progress on your project's functionality.

As always, your TA will try out your Web app to make sure it works so far. They must be able to open up several different Web browsers on a single computer, create independent user accounts, log in, remain logged in even after closing and re-opening their browser, do something in your app, and then log out. Your app should behave as a reasonable user would expect when they are logged in and logged out.


Project Milestone 4 – meet with your TA on Nov 30 to Dec 6

By this milestone, you should implement some non-trivial Ajax CRUD functionality, which is the final part of your minimum project requirements. You should also have made substantial progress toward implementing your project idea, since your project is about to be due!

Your TA will try out your Web app in person to make sure that the Ajax part works as advertised, and that your group members understand how the code works.


In-class final project presentations – Dec 1 and 3

Please come to class on both Dec 1 and 3 to see what your classmates are doing for their final project!

You will have 4 minutes to present your project. Since time is short, pick one group member to come up to present. To prevent switching laptops, we will use my laptop, which means that you will need to show off screenshots or an optional YouTube video linked to your GitHub repository. Don't worry about getting fancy with your presentation; we just want to know what you did for your project, and why you're excited about it. There's no pressure to make anything fancy.

Make sure your presentation runs purely in a Web browser in Incognito mode without logging in. Don't use PowerPoint files! Instead, use Google Docs presentations, YouTube videos, PDFs, or content hosted on GitHub. You can use Camtasia or Quicktime to easily make a screen recording video. There will not be audio output in the lecture hall, so don't rely on audio.

We will coordinate presentations using the Google Doc linked from the Piazza post.


Private presentation and oral exam – meet with your TA on Dec 7 to 11

Sometime during this week, your TA will arrange to meet with your group for the final private presentation. Make sure that all of your group members are present, or else it will reflect badly on those who don't show up.

Your TA will serve as a “customer” of your web application and try to test all of its functionality. This is an exam, so if your app doesn't work properly in some cases, then you will probably lose points. Think of this as real-world usage; if a customer is trying to use your app and it doesn't behave as expected, then they won't be happy.

The version of your app that your TA uses in this exam is considered the final version, so make sure that it exceeds the minimum requirements by some non-trivial amount. If your TA sees that you're just trying to do the bare minimum to pass the requirements, then that won't be looked upon favorably.

Your TA may also ask your group questions about how you implemented certain features, so make sure your group members can explain how everything works in sufficient detail. However, your TA will not be grading your code since there is not enough time. Since your code is available on GitHub, we may look at it later if we have uncertainties about how it was implemented.


Project Final Report – cancelled

This requirement has been cancelled!

Frequently Asked Questions

Q: How heavily are we graded on aesthetics and graphical design?

A: Not at all. The purpose of this course is not to focus on visual aesthetics. However, your project will probably be slightly more impressive if it looks good. But good aesthetics alone is no substitute for meeting the actual requirements of the project.

Q: How ambitious should I make my project?

A: This is a hard question to answer. But here is a baseline: A project that merely meets the minimum requirements will not receive full credit. This intuitively makes sense, since we cannot justify giving 100% for any assignment where someone just does the bare minimum. Instead, think of the minimum requirements as what is required to earn a passing grade. In this case, a bare minimum project would probably deserve some grade in the B- or C range.

Don't panic, though, because you can easily make your project more ambitious in a variety of dimensions, including (but not limited to) a great user experience, real-time updates, sophisticated use of external APIs, ingeniously creative concepts, non-trivial algorithms, etc.

[Edit for clarification: You don't necessarily need to have advanced features to get a good grade on the project; but you do need to demonstrate genuine effort that results in a realistic working Web app. In contrast, a "bare minimum project" is one where a group blatantly tried to implement just the bare minimum functionality to satisfy the requirements with no thought into making it into a non-trivial, substantive project that they would actually be proud to show off. Anyone who is serious about this class won't make such a project, though. Come to office hours to ask for more details.]

Q: Can I get help from people outside of this course?

A: Yes, as long as you and your groupmates do the majority of the programming for the project, and as long as you write down who helped you with what parts as comments in your source code. Treat people outside of this course like "online resources" for help, so the same academic honesty rules apply. e.g., it's OK to get help from an online discussion forum (e.g., StackOverflow) take a small snippet of code, paste it into your project, and write a comment attributing the origin. But it's not OK to simply copy and paste and entire Web application from somewhere else, either from online or from a friend coding it for you.

Q: Can I re-use or extend parts of a project that I created before this class began?

A: No, you must start a new Web application from scratch. If your old project exposes some sort of Web API, then your CSC 210 project can certainly connect to your old project to gather data, much like how it can connect to any Web API such as Twitter's API. But you must create a standalone project solely for this class.

Q: What happens to my code after the class ends?

A: The code is completely yours. In fact, we encourage you to think creatively about how your CSC 210 project can extend into a larger, more ambitious project in the future.

Q: Will there be extra credit offered for impressive projects?

A: Nope, no extra credit. The class project counts for 50% of your total grade, so even if you do perfectly on it, you still need to do well on the exams to get an A in this course. However, if you're on the borderline between two grades, having an impressive project will definitely weigh into the staff's decisions in our final grading meeting.

Q: Can I change my project idea after submitting the initial proposal?

A: Definitely! Please go over changes with your TA to make sure they approve and are aware of your changes. And do not make any changes that would make your project either out of scope (i.e., not an Ajax CRUD Web app) or contain any inappropriate content.

Q: What languages, libraries, or frameworks should I use?

A: Anything you like, as long as your project meets the requirements. We've purposely designed the project to be open-ended, to simulate a real-world software development scenario.