etch-a-sketch - Live Preview

About

This project is part of TheOdinProject curriculum. The project's lesson can be found here.

I've made a Figma mockup that I used as a starting point. Apart from the title, the website is pretty much identic with the mockup.

Features

• draw based on mouse up/down event
• 2 color modes: using Color Picker, and brush to wipe
• two or more users can draw in real-time
• reset
• share drawing by copying to clipboard

Technologies used

• HTML5
• CSS3
• JavaScript
• React
• ExpressJS
• WebSockets

Credits

I changed the original color of some of the icons.

• UI-Eric weibo for the reset icon
• siby-_- weibo for the brush icon
• Saori1994 for the favicon
• zuozuo for the share and color/RGB icon
• SofianChouaib for the Color Picker
• niklasvh for the screenshot library