- Create a new repository based on this template (Use this template > Create a new repository)
- Clone the repository and open in your editor
- Install dependencies with npm (
npm install) - Start the local development server (
npm run dev) - Follow the instructions below.
tldraw is working on a new feature for our white-boarding app: stickers!
You've been assigned the ticket:
Stickers are little shapes that you can stamp down on a drawing to give a quick thumbs up, share some love, vote on a topic, or bring some attention to part of the page. After choosing a sticker, a user can click on the page to place the sticker down.
- In this repository's project, implement the basics of the feature as shown and described above. Use regular HTML and CSS. Don't use HTML canvas and don't use any third party libraries like Paper.js. Use emojis for the stickers (🌟, 🔥, 💖, 👍, 👎).
- Next, think beyond the basic specification written in the ticket. What else does the demo show? What else might this stickers feature need before it was ready for people to use? Come up with a few ideas. Create issues in your from these issues ofin the form of user stories, for example “as a user I want to delete a sticker”.
- As a stretch goal, pick one of the stories you created in step two and implement it in your app.
Good luck!
I took this challenge as opportunity to stretch my self-learning and create the replica in React.
I watched Mike Dane's Giraffe Academy on Youtube to learn javascript and SQL and used his introduction to React to guide how I put this together. In some instances I used chatGPT to better understand how useState and useEffect work to make the app work functionally.
File Structure - I'm still learning node and how to install packages and organise the files appropriately. For example, src. vs. compnonents vs. gitignore etc. I'm still working on how best to scope and modularise functions to refactor my code. Clipboard - I'm not sure using the clipboard was the easiest route to put this page together but copy/paste felt intuitive for a user. However, this led to being able to copy any text on to the page. For next time - I think next time I would take TDD approach to putting this together and may have been this easier to prevent bugs (like being able to paste text outside of app on to the page) next time.
clone repo and use the local host address to view the page.
git clone 'https://github.com/cameochoquer/FAC_tldraw_challenge'
npm run dev
From here, copy the local host url into your browser