A5: Core implementation – DUE Friday, Nov. 9 @ 12:30am

[The workload for the rest of the assignments will ramp up significantly since you need to start writing code and working toward creating a fully-functional web application. Please plan accordingly and get up to speed on frontend web programming.]

This week's goal is for you to complete the interaction flow for your app. Spend this week fleshing out the implementation of your main interactive features. Don't worry about making it aesthetically beautiful yet—fonts, colors, and pixel-perfect layout can all come later. Also, update your development plan as you discover more about what you want to prioritize, what you can expect to implement, and what you may need to mock up.

Step 1: Revisit POV & Inspiration

This week you will be completing core implementation features of your app. However, it's important not to lose sight of your point of view (POV) and inspiration while implementing functionality. To keep you on track, you will revisit your POV as well as your inspirations for your app. In one paragraph, summarize your POV and think about the inspirations that you are using to develop your app. You may find it helpful to return to your A1 and A2 assignments to refresh your memory on the POV and inspirations, but the paragraph should contain revised and new information based on what you've learned in the past few weeks.

Step 2: Implement Unique Interactions

What is it about your app that makes it unique? What specific features make it stand out?

Now is the time to implement the unique features that separate your app from other apps; i.e., not just implementing generic functionality like a login page or displaying an overview. For example, if you were developing Yelp back when it first came out, you might implement a feature to search for suitable restaurants based off of filter preferences and the user's location this week. With Yelp, you might also develop the review system, where users can write reviews for each place and rate it.

By the end of this week, your goal is to provide the users with several ways to interact with your app, including the most important and required interactions.

Note that for this project, you will need to only implement web frontend functionality with HTML/CSS/JavaScript. You can simulate backend database functionality with localStorage. If you want to implement a real backend, then go for it, but it's not required.

Step 3: Fake Login Screen

Making a login screen will help you keep track of individual users and their personal progress within your app. Using Wizard-of-Oz techniques, create a fake login page, which simulates the experience of logging in but does not use real user accounts. For example, you may ask for a login and password, which upon submit, lead the users to the first page of your app without saving the information or any actual authentification of the information. Do not spend time making real login functionality. You can do it later if you want.

Note that if your app does not require users to log in, you can skip this part and instead explain in the relevant rubric item why you do not need user accounts.

Step 4: Update Your Development Plan

Follow the development plan you created last week, and update it as you go. Mark tasks that have been completed and add new ones if you need to. Make sure that your next week is planned out with goals and who is responsible for each task. Re-evaluate your stretch goals and what's feasible and what isn't. You may decide that your plan is too ambitious, or you may decide that your plan is too conservative; maneuver accordingly, but keep your TA in the loop if you're planning on making any major changes.

Step 5: Task Description

Write a 2-sentence description of a task that you'd like your TA to try when grading this assignment, without giving away the exact instructions on how to accomplish this task. For example, if you ultimately want users to visit a newsfeed page and subscribe to it, the instructions might be "find a way to keep up to date with current events outside of the app." In another example, if you were developing Uber, you might want the user to enter a destination, use the fare estimate feature, and compare UberX from Uber Black, but your instructions should say something like: "Find the cheapest way to get home from UCSD" (since that does not give away how exactly to accomplish the task). The task should not require your TA provide any personal information or to create an account (including on third-party platforms such as Facebook or Google). If your task requires any such information, create a dummy account or dummy information for your TA to use, and add it to the task description.

Student Examples

Here are some examples of development plans. If you want, use File -> Make a copy... to copy over the formatting for each spreadsheet to form the basis for your own plan.

  • (1) is very stylized, dynamic, and mostly thorough,
  • (2) is fairly thorough, colorful, but is missing time estimates and has only one stretch goal listed,
  • (3) is a mediocre plan that's mostly thorough, where most tasks are broken down into less than 1 hour chunks,
  • (4) is very thorough, with time estimates and time costs, but some tasks could be more actionable,
  • (5) is a great video of the dynamic nature of implementation plans throughout the project.

GradeSource++: This example project abstracts away GradeSource for you and works with the data to show you where you are in a class.

Balancr: This app helps people balance their time between work and play. This team has done a wonderful job making the app functional-- you can create a sign-up, add activities, and see it reflected on the pie chart.

For both examples above, simply imagine that the data that powers the functionality of the apps are temporarily stored in a variable that is pre-populated with data from your JavaScript files.

Assignment Submission

Submit a single well-formatted PDF file for your entire team with the following items concatenated within it:

  • Names and PIDs of all of your team members, along with your team name. (If you forget someone's name, they will not get credit for this assignment.)
  • One paragraph on your point of view & inspirations for your app. (Revisit POV & Inspiration)
  • The public GitHub URL for your project's source code.
  • The URL of the prototype that you want us to see and grade. Note: the URL must work at least until your assignment is graded in the coming week. If it doesn't work, you'll receive no credit. Very important: the contents of this URL should not change in the upcoming week while your TA is grading this assignment, or else that is a violation of the academic honesty policy; test your new changes at a different URL. (Interaction Flow)
  • A description of the unique interactions that you chose to implement, along with an argument for why those are unique to your app. (Unique Interactions)
  • The PDF of your original A4 development plan that you submitted last week. (Look up how to join multiple PDFs into one single PDF submission.) (Original A4 Development Plan)
  • The PDF of your updated development plan, taking into account this week's updates. (Look up how to join multiple PDFs into one single PDF submission.) (Updated Development Plan)
  • A ~2-sentence description of the task you'd like us to try when grading this assignment. This description should include any needed login/password information, if relevant. (Task Description)

Reminder: Do not put your PIDs on any public documents such as those in your GitHub repository.

Note: since we may grade your assignment up to a few days after submission, per the honor code, we expect that the prototype URL show the state of your prototype at the time of submission. You will very likely be updating your prototype after submission, but please do so on a separate URL.

Submit your single formatted PDF in Gradescope to the bin for your studio section. Only one team member needs to submit on behalf of the entire team.

Evaluation criteria & Grading rubric

The rubric below contains criteria that are worth one point each and will be graded independently and in a binary fashion.

  1. The "Revisit POV & Inspiration" paragraph summarizes the POV and inspirations that connect to how the prototype is being designed.
  2. Your GitHub code repository's URL is present and is publicly viewable.
  3. Your deployed app prototype's URL is present and is publicly viewable.
  4. Every page in the app has their primary functionality implemented.
  5. Every page is able to perform a task that contributes to the overall goal of the app. (2 points)
  6. Manually testing all functionality in each page of the app does not lead to dead ends or errors. (2 points)
  7. The description of your unique interaction(s) convincingly argues that it is, in fact, unique for your app.
  8. At least one piece of unique interaction has been implemented in the app.
  9. Login screen simulates the experience of logging in. (If your app does not require user accounts or login, then explain why you don't need one, in order to get credit for this rubric item.)
  10. Development plan is attached as a PDF, is easy for your TA to read and understand, and has been updated to show progress and additional tasks in the new version compared to the previous week.
  11. 2-sentence task description is present.
  12. Task description does not give specific instructions, but instead describes a task that a real user might want to do.
  13. The app's functionality for the described task is complete in its interaction and causes no errors.
  14. Extra credit (up to 2 points) - In addition, your TA can give your team up to 2 extra credit points if your app is extraordinarily polished by this deadline, which provides an incentive to get work done early and to go above and beyond the basic requirements.

Due In Studio: Teammate Assessment

During studio, click here to assess how each of your teammates contributed to this assignment.

Frequently Asked Questions

Q: What web frameworks or open-source tools can we use?

A: Anything you want, as long as you can meet the requirements of each assignment's rubric. Note that the teaching staff may not be able to help you beyond what is covered in the labs, so choose wisely (i.e., make sure the entire group is comfortable with the stack and none of you is burdened to handle things alone). We will only officially support the web stack that we teach in labs, so if you go above and beyond this basic stack, then make sure your team is fully comfortable using your chosen tools.

Q: Where can I find more web development tutorials and resources?

A: As a starting point, check out our web dev resources section.