Project 2: Creative Web App

Due Date: Wed. 10/7 at 11:59 PM
Time Estimate: about 8 focused hours (spread over ~10 days, and explicitly for this project)
Deliverables: Deployed web app + source code on GitHub (including README.md + prompt log) + short demonstration video + Google form response

Assignment Overview

Goal: Design and implement a creative, portfolio-ready web application while using AI effectively as part of your process. This project emphasizes attention to detail, thoughtful use of AI, clear documentation of your process, and demonstrable learning since the start of the semester.

Timeline: Roughly 10 days to complete. Expect to spend about 8 hours of focused work.

Why This Matters: This assignment asks you to combine your technical skills with responsible and strategic AI usage to produce a project you can show in interviews and on your portfolio.

Examples of what you might build:

An interactive character that showcases persona design, with sort of graphical representation, memory between visits, and safe prompt management
Some sort of useful web tool that uses a third-party API and stores user data (securely) on a backend, with a nicely-designed frontend
A visualization dashboard that performs meaningful data analysis and interactive graphical exploration of a public dataset
A web-based game that uses computer vision as part of its core mechanic

Note: We expect you to understand and be able to explain what each part of the code is responsible for, and you'll need to write or substantially modify at least some of your code, so be careful not to just vibe-code until it's too complicated for you to grasp. As you work, ask yourself this: Would you be comfortable discussing this project in an in-person technical job interview, without notes? If not, begin investing effort in understanding the code the AI has written for you, or focus on simplifying the project until you feel you understand and can discuss it.

Requirements & Grading

What You Must Submit

Deployed web app (public URL): A running, publicly accessible web application (This might be hosted on Github Pages or elsewhere, like Render or Vercel. Research and pick an option that makes sense for you.). It should also work on a phone, or at least degrade gracefully on a small screen, since this is a portfolio piece and people will open it on their phones. If your project is genuinely desktop-only (a WebGL game or something that needs a webcam, for example), that's fine, but say so in your README.
Source code on GitHub: A public repository (or a clearly named folder inside your GitHub Pages portfolio repo) containing your project code and documentation, including these required files in the project root or folder:
- README.md - must be named README.md and located at the repository root (or inside the project folder if you placed the project in your portfolio repo). The README should explain: what the project does, how to use it, which features you are most proud of, how to run it locally, and how secrets (if any) are handled. (Note that even if you deploy in github pages, this should be a new README for just this project.) Write this yourself, in your own words, and make sure it actually covers the items listed above. It must also briefly summarize how you used AI on this project, along with any citations that are relevant (for example, a model or tool that produced a substantial portion of the code, or an outside source you adapted). We are placing more weight on this than we did on earlier assignments. If you want to include AI-generated documentation as well, that is fine, but put it at the bottom of the README under a heading that clearly labels it as AI-generated.
- Prompt log - titled prompt_log.txt or prompt_log.md, and located in the same folder as your README. It must list which AI model(s)/tools you used, document the development process from start to finish (including which parts of the code were written or substantially modified by you), and include important, non-trivial prompts verbatim rather than AI-written summaries of them. As a whole, this file should make it obvious that you invested roughly 8 hours of work. As a very rough gauge, an 8-hour project that starts from a clear plan and then iterates from there might produce somewhere in the range of 15 to 40 prompts worth logging. Treat that as a rough estimate rather than a target, since we'd rather have a handful of well-constructed prompts over an artificially stretched list.
  Two specific things we want to see in this file:
  - Which tool for which job. A sentence or two on which model(s) or tool(s) you used for which parts of the work, and why. Brainstorming, writing code, and debugging are often best served by different tools, and choosing deliberately is a skill we want you practicing.
  - One place AI got it wrong. Describe at least one instance where a tool was confidently incorrect, proposed something that couldn't work, or introduced a bug it then couldn't find, and what you did about it. One short paragraph is plenty. These observations are what we use to build the class's shared best practices, and they tend to make for good discussion in your evaluation.
These must be two separate files. Your README and your prompt log are distinct documents sitting side by side in the same folder. Don't merge them into one file, and don't paste your prompt log into the bottom of your README. They serve different purposes and we read them separately.
Portfolio link: The project must be linked from the "Projects" section of your deployed portfolio website (i.e. Project 1).
Short demo video: A short screen-recorded video that shows how the app works and explains the main technical choices; upload to YouTube/Drive and include the link in the Google form, and make sure we can view it by testing your link in an incognito window. Put a little love into this one! Give it some sound, make it something that will get people excited!
Google form: Fill out the project submission form with your deployed URL, repository URL, and video link.
Midpoint check-in: There will be one required in-person check-in (similar to what we did for Project 1) on or around Sunday 10/4, so you can receive feedback and adjust direction with a few days still left. Details to follow. You don't need to prepare a document, but you should have some parts of your project working, and you should come ready to answer questions like these:
1. What does your app do, and which parts of it are actually working right now? Show us the most complete thing you have running, even if it's rough.
2. What is still missing before you would call it finished, and can that realistically happen by Wednesday?
3. What are you stuck on, or quietly avoiding?
4. Have you deployed anything yet, even a broken version? Leaving deployment until the end is a common way to lose an otherwise working project at the deadline.
5. If you had to cut one thing today in order to be safely finished by Wednesday, what would it be?
Final presentation: These will be done in week 2. Details to follow, but these will probably also be similar to what we did for Project 1, with just a little more attention on the code itself.

Privacy & Security: Do not commit API keys, credentials, or secrets to GitHub. Store secrets as environment variables or use Render/Vercel secret management. Committing secrets to GitHub may result in a large deduction. See the key-handling guidance in HW3 if you need a refresher.

Grading

Full credit requires a working, well-documented, and thoughtfully designed project. Special emphasis will be placed on:

Clear README and comprehensive prompt log
Evidence of meaningful learning, and that you engaged with the code yourself. However the code was first authored (by you, by a chat window, or by an agent inside your editor), we want to see a few meaningful changes that you made yourself. They don't have to be clever: editing content, reorganizing a section, or pointing the code at a different file all count, as long as they show you understood the structure well enough to know where to go and why. A project that stays a black box you can't claim authorship over will not receive full credit.
Evidence of about 8 hours of work specifically for Project 2
Robust and thoughtfully designed and tested user interface, and attention to detail in the user experience (it should be engaging and richly interactive with no common bugs)
Correct, secure handling of secrets and APIs

We expect ~8 hours of *new* work for this project. If you want to reuse some part of an old assignment from 113, that's fine, but your project should be transformationally different (not just a generally-improved version of something you already submitted). (If this new work serves a dual purpose between 113 and some other course or your research etc., that's a-ok as long as you're meeting the requirements here.)

Detailed Instructions

Decide on a creative idea. Pick a project that excites you and can be completed in ~8 hours. Focus on something that will be useful or impressive on your portfolio.

First focus on substance over polish: Demonstrate clear functionality and learning. UI polish will help your grade, but the graders will first evaluate for functionality and technical implementation.

Build the core app. You may use any stack (i.e. any combination of technologies) that meets the project requirements, but make sure your project includes at least one (and preferably two) of the following:
- Frontend-backend communication (e.g., fetch + API endpoint)
- Thoughtful third-party API usage with secure keys
- Use of a database
- Substantial data analysis or visualization
- Exceptionally rich interactivity through a technology we haven't explored yet, like WebGL
- Use of a computer vision or ML module/algorithm
Also plan to go in and make a few meaningful changes to the code yourself, as described under Grading above, so that you can explain them in person or on video.
Document thoroughly and document as you build (rather than just at the end). Add a clear README.md and a detailed prompt log (prompt_log.txt or similar) that shows your workflow and AI usage.
Commit and push changes regularly. We will expect to see several commits made to your repository over the 10-day project period, since this will be evidence for sustained effort. We recommend pushing your changes whenever you are done working each day. (This also prevents you from losing your progress if your computer breaks at the deadline, which will happen to at least one or two of you. And if for some reason you aren't able to submit the form on time, we could in theory still find and grade your existing work, which is good for you and good for us.)
Attend the midpoint in-person check-in. Bring as much working code as possible and be ready to describe progress and remaining work, and be ready to answer questions like the five listed above.
Test end-to-end. Make sure the deployed frontend talks to any backend services (if applicable). Make sure that error states are handled gracefully (i.e. try not to crash due to unexpected user behavior, and provide sensible error messages for issues that cannot be avoided, like a backend server outage). We strongly recommend testing any backends locally first, in order to speed up the debugging process.
Push to GitHub & deploy. Put both frontend and backend (if any) in public repos or a clearly labeled project folder in your portfolio repo. Deploy the app and verify the public link works.
Record a short demo video. Show the app running (in its deployed location, not just locally) and briefly explain the architecture and the portion of code you implemented yourself.
Complete the Google form. Submit your deployed URL, repository URL(s), and video link before the deadline.

Tips

Having trouble coming up with an idea? Talk to a actual human! Maybe even our TAs! Compared to AI, they'll be able to give you a better sense for what might be feasible and what you might want to consider.
Start with a clear MVP (Minimum Viable Product): Implement one core feature well, test it, then add extras as allowed by time.
Test locally first: Run and debug your app locally before deploying. Use curl or browser devtools to validate requests and responses. See the Testing Locally section of HW4 for concrete steps.
Store secrets safely: Use environment variables or Render/Vercel secret management; do not commit keys to GitHub.
Handle errors gracefully: Return helpful error messages from the backend and show friendly messages in the UI.
Document everything: The README + prompt log are part of the grade. Be explicit about what you built and how AI helped.
Be prepared to explain: You should be ready to verbally explain the architecture, and especially the parts of the code you wrote or modified using your own technical skills.

Note: Start early and back up your work! We aren't willing to extend the deadline this into Fall Break (and probably can't without assigning you an incomplete for the mini, which we'd only do in a rare and serious emergency and with your advisor's approval) so you should try to get done early. Extensions on this project for typical reasons (illnesses, broken computers, etc) are very unlikely.

Questions? Ask on Ed, attend office hours, or email the instructor. Consult the course AI usage and collaboration policies on the course homepage.