Project Milestone 3

DUE: Monday, April 23 at noon

The goal of this milestone is to create a skeleton for both your frontend and backend, which will form the foundation for the rest of your project. You are free to change your design as the quarter progresses. But it is important to have some sort of skeleton by now so that your TA can give you the proper feedback and so that your team can maintain the proper pace.

The grading rubric contains all of the required items to turn in for your write-up and to live demo to your TA. Always consult the rubric!

Create a UI skeleton of all screens of your web app, with one HTML webpage for each screen. Include a complete set of navigation links on all webpages. This means that every link and button is functional; there are no dead ends (i.e. where a user cannot go back) and no dead links (i.e. a non-working link/button). Although the links should all work, the pages they lead to need not be complete or filled with content yet—you can use empty placeholder pages instead. Now you should have a 'skeleton' for your web application. Don't worry about making your webpages look good aesthetically yet; it's OK if it looks like a rough draft.

After creating the full skeleton of your web app, you will create the home page (Screen #1) in HTML/CSS/JavaScript code. Then, you will flesh out one more major screen (Screen #2) by adding in all the frontend details of that screen. Add some relevant content and set up the functionality that will be required on both pages. For example, that screen requires an upvote button, you should create the button, though the upvoting functionality does not need to work yet.

(You may remember UI skeletons from one of the early COGS120/CSE170 assignments.)

Now create a skeleton for your backend by setting up the ability to serve your UI skeleton webpages (and associated images, if any) as static files hosted on a web server (either localhost on your computer or hosted online). Also create some Ajax functionality to connect your frontend to your backend.

Review the Node.js + Express web app lecture materials for reference on how to build a simple backend and Ajax functionality. However, you are free to use whatever web technologies you would like for the project.

Finally, fill out a teammate assessment form.

Your TA will grade your milestone in class during your assigned grading day, so plan to come to class then to present your demo. If you do not come to class that day, then your milestone will not be graded.

Grading rubric (14 points)

  1. is present in your project's GitHub repository.
  2. contains screenshots of your UI skeleton webpages embedded directly within the file.
  3. contains a written explanation of how your screenshots are similar to or differ from your paper prototypes in; it's perfectly okay if they are different, as long as you justify the changes.
  4. You successfully demo all of your UI skeleton webpages live to your TA by loading the pages from a web server (either on localhost on your own computer or on a remote server). You must not simply open the HTML files on your computer; you must serve them through some kind of web server software.
  5. You can properly explain to your TA how your server backend works at a high level by walking through the code that you wrote for it.
  6. All of your UI skeleton webpages contain working links to one another, so that your TA can navigate to all pages from the home page.
  7. Screen #1 (your app's home page) is complete in a way that clearly introduces your app and shows users what can be done in your app.
  8. Screen #1 includes all features or buttons needed to perform all tasks that can be done on that screen. (Don't worry about CSS styling or making things look good aesthetically.)
  9. Screen #2 is easily discoverable by following links from the home page, and is complete in a way that clearly shows users what can be done on that screen.
  10. Screen #2 includes all features or buttons needed to perform all tasks that can be done on that screen. (Don't worry about CSS styling or making things look good aesthetically.)
  11. You successfully live demo at least one Ajax interaction where your TA can trigger some action on one of your webpages, it fetches some data from your backend, and then displays that data directly on your webpage without reloading it.
  12. Your Ajax interaction is relevant to your project, even if the backend data is faked (in other words, it's not just directly copied from example code without modification). Real data is fine too but not required at this point.
  13. You can properly explain to your TA how that Ajax interaction works by walking through both your frontend and backend code that you wrote for it.
  14. You tell your TA a plausible plan for what real data you are going to use for your project, and how you are going to obtain it (e.g., via an API, open-source data set, by collecting your own data, etc.). You don't need to necessarily stick with this plan, but you must at least propose a plan.

Frequently Asked Questions

First please check the project FAQ.