Sprint 1: Project Proposal and UI Design

Purpose: Planning for and getting started with your project.

Part 1 - Project Proposal

Over the semester, you will learn how to use both client facing and backend technologies to make a web application / website. You will work on each homework with a partner, and over the course of the semester, will build a dynamic web application piece by piece. To maintain some cohesion between each assignment, and leave you with a final, portfolio-worthy deliverable, you will decide on a project concept. You and your partner will define your own project based on something that is interesting to your team.

You should first find a partner. If you are looking for a partner, please post on the Piazza thread for finding a partner.

Note: For this assignment, no technical implementation is required, unless you would like to get feedback on what / how you plan to implement. General idea is sufficient. Please include enough information about your project — the nature of your project, what you want to do, what you try to achieve, how you will achieve, etc. The purpose of this assignment is to get you to start. You may revisit, modify, add, or remove any part of your project description as you proceed / implement. The more detail you include in this assignment, the more feedback and comment I can be provided.

Project requirements

  1. It must include dynamic behavior, where the front end responds to user input events or web service and updates the interface accordingly.
  2. It must include at least 3 functionalities (or scenarios), providing services to the users.
    • For each functionality (or scenario), be sure to describe its purpose, what it does, how it is used, and what the users can expect from using it. Later, you will implement each of these functionalities (or scenarios).
  3. It must include logic that will execute both (i) client side in a web browser, and (2) backend component on a web server.
    • Examples: logic that executes on a client side
      • Validate the form data (client-side input validation)
      • Auto complete some information
      • Auto correct typos or misspelling words
      • Reformat the form data entries (textual, tabular, and graphical formats)
      • Filter search results
      • Sort the search results
      • Build a visualization (textual, tabular, or graphical) from a 3rd-party API
    • Examples: logic that executes on a server side
      • Validate the form data (server-side input validation)
      • Add / update / delete / retrieve data (from files or database)
      • Produce HTML documents; for example, reports or confirmation pages
      • Perform business logic; for example, calculate tax, compute grade or GPA
      • Handle HTTP requests from CURL command or URL rewriting (HTTP requests that bypass the application’s interface or client-side input validation, and thus may break the execution flow of the app). Note: Bypassing the application’s interface increases vulnerability and may lead to unauthorized access. If your project involves sensitive information, a thorough server-side input valiation is necessary.
  4. It must support multiple users (i.e., maintain states of the application such that multiple users can access the application simultaneously and their sessions do not overlap or interfere with each other).
  5. It must support multiple sessions, allowing returning users to access / retrieve / manipulate their existing information or configuration (i.e., must include data persistence using a database).
  6. The frontend and the backend must have an asynchronous component (Angular-PHP):
    • The frontend (Angular) sends an asynchronous request to the backend (PHP).
    • The backend (PHP) processes the request and produces a response.
    • The backend (PHP) returns a response to the frontend (Angular).
    • The frontend (Angular) appropriately uses the response from the backend (PHP) in some way.
    • Note: It may seem unclear at this point how the Angular frontend and the PHP backend components interact. This course will help you see how to properly implement and connect the frontend and the backend components.
  7. Overall, your app must be a single unit. It must not be disconnected. All parts / components must be properly connected.
    • That is, once a user enters your app through a web browser, there is an appropriate navigation system and/or an execution flow allowing a user to achieve her/his goal(s) without (re)visiting another part of your app manually (for example, by entering another URL in a web browser’s address bar).

Guidelines on what we expect to make a good project:

Your project should be something you and your partner can implement in a semester

Some project ideas

These project ideas are just to get you started. Please do not let them limit the possibilities; your project should be fun, something that you’re passionate about and interested in, and excited to see built.

Optional Functionality

In addition to the above requirements, you may make use of any APIs or web services to enhance your project. Please be sure to document and justify your design decision.

Example web service APIs:

Part 2 - User Interface Design

Design at least three different screens or views (with respect to the three functionalities or scenarios above) of your project.

Each screen must adequately demonstrate its purpose and functionality. You should include all necessary elements and justify your design decision. Note: you may revisit and update your UI design while implementing the components.

To expand your experience and help you to move toward careers in web profession, you should try to create a digital illustration of your interfaces. You may use any software to draw your screens. There are several good, easy to use web-based software, standalone software, and wireframes (some are free, some offer free trail) that you can use to draw user interfaces:

Alternatively, Visio, PowerPoint, Paint / Preview, and Adobe Photoshop can also be useful.

If you draw your screens by hand, please be sure that your drawings are legible; take screenshots of your drawings and embed them as part of your proposal document.

If you draw your screen using any software, please be sure to embed your screens as part of your proposal document.

Grading Rubric

For this sprint, you will submit a brief report in two parts:

  1. (20 points) Project Proposal
    • (10 points) Clearly explain your project concept
    • (10 points) Satisfy the project requirements
      • Clearly describe how your project concept satisifies the project requirements or specify the parts fo your concept that satisfy the requirements
  2. (20 points) User Interface Design
    • (15 points) Include at least 3 screens (5 pts each)
    • (5 points) Clearly explain your design, justify your design decision, discuss how your design decision affects the usability


Upload your report as a PDF to the Project Proposal assignment on Gradescope. Name your file with all team members’ computing IDs, such as jh2jf-mst3k-proposal.pdf. Make sure you connect your partner to your group on Gradescope so that everyone receives credit.