aioff.
中文
Product design
PRODUCT DESIGN·7 min

Milanote: turn reference images into a design direction people can discuss

Milanote is a visual tool for organizing creative material and moving projects forward. Designers can place images, text and links on one board, then invite clients to comment on specific content.

Break down the problem and try your own design and implementation first. Then explore the reasoning to check states, edge cases, trade-offs, and ways to test your approach. The guide offers a reasoning path, not a complete implementation.

01
CODE EXERCISE

Count comments for one image

Write a function that counts the comments received by one reference image. Each comment has a string field named cardId, identifying its image. All fields are present, and each record represents a separate comment.

  1. Input and output: Accept a comment list and a target image ID, and return a count. For example, given [{cardId: "A"}, {cardId: "B"}, {cardId: "B"}] and target ID "B", return the number 2.
  2. Rules: Count only records whose cardId exactly matches the target ID. Return 0 if nothing matches or the comment list is empty.
  3. Deliver: Write the function and check the example, target ID "C", and an empty list. Use local data.
Explore the reasoning
  1. Check whether each comment's image ID equals the target ID.
  2. Count only matching records; you do not need to change the original list.
  3. Confirm the two B comments in the example, then check that no matches and an empty list both produce zero.