Build a name-and-face quiz site from a spreadsheet
AI Engineer World's Fair 2024. Task: Scott Wu used Devin to build a mobile-friendly React name-game website from a TSV file of speaker photos and names. Devin planned the work, created the directory, and deployed a first version that incorrectly displayed photo labels. Wu provided plain-English feedback to hide labels until answered, restyle buttons, and add a streak counter, which Devin implemented and redeployed.; tools: Devin. Human role: The original post does not say how a person stayed involved.; limitations: The initial deployment failed to hide photo labels, requiring human feedback to correct the specification. The source notes that Devin's plan can change as new information arrives, implying iterative refinement is necessary. No specific cost or integration constraints for this toy application are detailed..
Tools
Published on Agent Work Atlas:
Overview
AI Engineer World's Fair 2024
Workflow
Scott Wu used Devin to build a mobile-friendly React name-game website from a TSV file of speaker photos and names. Devin planned the work, created the directory, and deployed a first version that incorrectly displayed photo labels. Wu provided plain-English feedback to hide labels until answered, restyle buttons, and add a streak counter, which Devin implemented and redeployed.
Reported result
The final deployed version correctly hid labels until an answer was chosen and reset the streak counter on errors. Wu reported that playing the game helped him learn the names of approximately 170 speakers. The source does not provide metrics on development time saved or code quality beyond the functional demonstration.
Human role
The original post does not say how a person stayed involved.
Limitations
The initial deployment failed to hide photo labels, requiring human feedback to correct the specification. The source notes that Devin's plan can change as new information arrives, implying iterative refinement is necessary. No specific cost or integration constraints for this toy application are detailed.
Try it
Act as a developer using Devin to build a name-matching quiz app. Input: A TSV file [replaceable: path/to/speakers.tsv] containing columns for 'name' and 'photo_url'. Target: A mobile-friendly React web app. Steps: 1. Instruct Devin to create a new React project and read the TSV. 2. Define the game logic: show two random faces and one name; user clicks the matching face. 3. Specify UI constraints: hide face labels until the user answers; show 'Correct' or 'Incorrect' feedback; include a 'Play Again' button; implement a streak counter that resets to zero on a wrong answer. 4. Ask Devin to deploy the app. 5. Review the deployed URL. If labels are visible before answering, instruct Devin to hide them until the state 'answered' is true. 6. Verify the streak counter resets on error. Deliverable: A working URL and the source code. Success Metric: The app functions as described without revealing answers prematurely. Dry Run: Test with 3 sample entries first. Human Confirmation: Approve the UI layout before final deployment.
Source reports are not independently verified. Publication date is the catalog publication date, not the original article date.