Welcome! and thank you for taking the time to complete the Classkick take-home challenge for our Senior/Staff Frontend Engineer position.

You will have 3 days to complete the project and expect to spend < 3 hours on it. Once you have completed your solution, please reply with a link to a forked GitHub repository or your folder with any helpful instructions for us.

At Classkick, our teachers and students LOVE using our Canvas feature to create fun and engaging content.

This project emulates the type of scenarios we face at Classkick, with similar technical challenges regarding UI and real-time UX.

Your task is to create a Canvas element to:

• Create a Drawing
• Create a Textbox
• Add an Eraser Tool. The Eraser UX is left up to your design decisions. Here are 3 examples of how it could function, but you can design your own function as well.
  • The eraser acts like a smudge eraser.
  • When a user smudges over a line in eraser mode, that erases the entire line.
  • When a user points and clicks a line, it erases.

[Bonus]: Add other tools like Colors, Images, or something else!

• Your app does NOT have to be hooked up to a backend and thus it does NOT have to preserve state.
• It should be clear in your code and/or documentation on areas for eg:
  • Design/Technical decisions
  • Mocks a virtual API that could be injected to persist all actions on the canvas remotely (eg: Firebase)
• Exhibits SOLID design principles, good application architecture, and project organization.
• Create components as you feel is best suited for your solution.
• Tests!

Just remember: when in doubt, treat this project as though you are about to submit it to your peers for a PR.

• Make it accessible.
• Make it production ready.

SETUP GUIDE

Good luck and if you have questions, please reach out to us at [email protected]