Drawing Tool

2 min read

CodeX is a small team of enthusiasts working on open-source products. Currently, we're looking for skilled and, more importantly, motivated people who are interested in improving technical and product skills and working with teammates on cutting-edge technologies. And who is ready to spend enough time working in CodeX.

We have some kind of probation task that will allow us to better understand your technical and motivation levels. And also it will allow us to better know each other, start your integration in our workflow. During that work we'll communicate and work together, so you also will better understand whether CodeX is interesting to you or not.

Context

Our most popular product, Editor.js, has its own ecosystem of tools: various block types, inline formatting tools, and more. One of the most commonly used tools is the Image Tool.  Hundreds of developers around the world use this tool to enrich their texts with images and videos. We are continually improving this plugin and plan to add a number of enhancements, including the ability to edit images.

We suggest you try implementing a part the image editing feature: a drawing tool.

About the task

You need to implement a Drawing tool.

Features:

  1. Drawing by Brush
  2. Drawing by Blur
  3. Undo / Redo operations (bonus task)
  4. Exporting the result

Drawing by Brush

In this scenario, user should have abilities for:

  1. Change brush color
  2. Change brush size
  3. View a cursor projecting brush size and position

Drawing by Blur

User should have abilities for:

  1. Change brush size
  2. View a cursor projecting brush size and position

Technical Requirements

Please, follow these requirements during your implementation

  1. Styles should follow the Figma file
  2. For icons it's recommended to use CodeX Icons.
  3. Implementation of Undo/Redo functionality is a bonus tasks. 
  4. The source code should be published on GitHub
  5. The component should be presented via some playground, for example, GitHub Pages.
  6. There should be a clear Readme describing how to use your component
  7. 3rd party image editing libraries are prohibited
  8. You can use any UI framework or implement it natively (recommended)
  9. Usage of TypeScript is recommended.

Deadline

October, 16th. It's recommended to show your in-between progress and ask questions in a Telegram Channel.

Hope it will be interesting. Good luck!