Sketchy Friends

AIM - Search for my friends by GitHub username and try to draw them on a canvas 😄

Main goals

• Accept some user input (e.g. a username)
• Query an API (e.g. the Github API)
• Populate the UI with API data
• Have some form of persistent state and interactivity (e.g. A hunger bar that decreases over time and is topped up when you feed them stars, or: A button to add more users to your collection)
• Have integration tests using React Testing Library

Stretch goals

• Save drawing as pgn (right click, Save As .png)
• ...see a 10:00 timer at the bottom before the image disappears
• Save your state to localStorage so you can leave the page and come back later
• Have a Clear and Undo buttons for the canvas
• Download image button

Selected idea: Drawing board

User stories

As a user I want to...

• ...input a search term (photo-size / github url)
• ...be returned an image matching this search term (https://picsum.photos/200/300)
• ...be able to draw the image on a canvas (https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event)

MVP

Things we learned

• Gigi learned how to use canvas, useRef hook
• asyn-await for fetch

36 hours in... it has already triggered significant creative breakthroughs...

Resources

https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event