Skip to content

Project 3: Frontend Development

Learning Goals

  • Learn how to transform development specifications into a working user interface.
  • Learn how to use Figma's AI tools to create mockups.
  • Learn how to collaborate with LLMs to generate frontend code, while refining and debugging the output, with a mocked backend.

Project Context

In P1, you defined requirements and user stories. In P2, you expanded some of those stories into detailed development specifications. In P3, you will use an LLM to implement the front end of your application.

Begin by creating polished UI/UX mockups in Figma for your user stories. Then, you’ll use those mockups and the development specifications to use LLMs to generate the frontend. Since the backend isn’t fully implemented yet, you will need to mock the backend to simulate functionality.

The emphasis here is on getting something real and visual, even if it’s only partially functional. By the end of this sprint, you’ll have mockups, a working frontend implementation, and mocked backend to power the interface.

Remember, use the LLMs as much as possible to generate the deliverables. You may not modify any generated graphics or code directly, only by prompting the LLM.

Deliverables

Choose two of the three user stories from P2: Development Specification whose front end you will implement. They must include one independent user story and one user story dependent on the first one.

Note: If you are having second thoughts about the user stories you submitted for P1, you may update them.

1. UI Mockups in Figma

Create high-fidelity mockups for each of your two chosen user stories.

  • Include all states of the interface: e.g., empty state, loading, error, success, etc.
  • Include enough detail about the intended graphical design in your Figma project to help a developer to implement the appropriate CSS and layout code. For example, if your design needs to relayout in a specific way when the window is stretched or zoomed, please annotate the design with the behavior you want to see.
  • Write up the rationale for major design choices (e.g., navigation flow, component reuse, accessibility).

Check in high-resolution screenshots of your mockups into your project's GitHub repository.

2. Frontend Implementation

Implement the user stories in code using a popular frontend framework (e.g., React, Svelte).

  • Using your LLM, generate the front end code from your user stories, Figma mockups (with their design rationale and developer implementation guides), and development specifications.
  • Include responsive design for at least two screen sizes.
  • Ensure accessibility compliance with WCAG and alt-text for images where appropriate.
  • Ensure any backend functionality or data is mocked such that the frontend functionality can be demonstrated.

Important: The code for both user stories must be generated into the same frontend application. Watch out for duplicated functionality, inconsistent class names, and incomplete interfaces.

  • Screen record yourself testing the frontend implementation in a web browser (include appropriate voiceover narration so we can follow what you're trying to show). It should display correctly at your two different screen sizes. Use the browser's debugger to accurately set the screen size during testing. Resize the browser window with your mouse/finger to test for proper layout logic.
  • Upload the screen recording to YouTube.

Check in the frontend implementation to your GitHub repository.

3. Reflection

Write a 500-word (i.e., one-page) reflection on:

  1. How effective was the LLM in generating the frontend code? What did you like about the result?
  2. What was wrong with what the LLM generated? What were you able to fix it easily? What problems were more difficult to fix?
  3. How did you validate that the implementation was complete and correct? Did you use the LLM to help?
  4. How did you test the functionality of the implementation? Explain the steps you took and why you did them.

Turn-in Instructions

Please turn in a single document that contains these parts:

  1. The two user stories that you implemented.
  2. Provide a link to the Figma project with your mockups. Be sure that the instructors have read access to this project or you will receive no points for this deliverable.
  3. Provide links to each of the mockup's high-resolution screenshots as they are checked into GitHub.
  4. Link to the folder with the code in GitHub.
  5. Link to the YouTube video of your application test. You may set its visibility to private, but be sure that the instructors have read access to it or you will receive no points for this deliverable.
  6. A 1-page reflection.
  7. Copy-paste logs of all LLM interactions you used during this sprint.