Code Monkey home page Code Monkey logo

shapes-on-canvas's Introduction

Frontend Challenge

This is a coding test for evaluating a candidate for frontend skills.

Process

  • There are few tasks listed below that you need to work on in this test.
  • You have a time of 1 week starting from the day you receive this assignment. We understand you might already be engaged in your current work and might not have time immediately. In that case, please let us know when would you be able to start the test and if you need longer than a week.
  • You should open pull-request for each task. Someone from the dev team will keep a check on your pull-requests and review them timely.
  • Once you are done from your side, please reply to our email thread regarding the coding test.

Tasklist

The tasks listed here are in no order. You are the owner of this project and are required to prioritize on what you think is appropriate.

This is a mini app that can draw rectangle shapes (currently static) like Figma/Sketch. You are required to add some logging when shapes are hovered with the mouse. Create this app in any React framework, preferably Next JS.

  1. Creat App UI - https://www.figma.com/file/0w1S9rhy5SxSyx7s34ohSs/Sepana-Frontend-Task
  2. Prototype Link - https://www.figma.com/proto/0w1S9rhy5SxSyx7s34ohSs/Sepana-Frontend-Task
  3. Feature - Mouse coordinates: Hovering any shape should also log the realtime x/y coordinates of the mouse relative to the shape dimension. The center for these relative coordinate system should be bottom-left point of the shape. Also, the points should show as integers.
  4. Feature - Adding Shapes: Here is what should happen after this feature is implemented: a. If we click anywhere on the window, a modal should open. b. There should be a form inside the modal asking for 4 things: top, left, width and height of the shape to be added. c. Submitting that form should add a new shape on the page according to the data filled in the form.
  5. Do you see any current or potential performance bottlenecks in this app? List them as separate issues on GitHub explaining how exactly they can affect the app.
  6. Surprise us! Show us your creativity by improving the current app.

Points to keep in mind

  • We would like you to complete all the tasks mentioned above. But in case you are not able to implement them for any reason, please open an issue on Github and put your notes/reason in the comments of that issue.
  • Evaluation is based on how many tasks you are able to complete and the quality of code written. We expect the code to be written with performance and security in mind. At the same time, it should be easy to read. We love clean code :) We hate clever code!
  • Keep your commits and pull-requests small so that it is easy for the reviewer to review your pull-request.
  • If you are stuck anywhere or have any questions, ask us through Github issues. Just keep us posted on the progress throughout the project duration. Status updates are very important in a remote team

shapes-on-canvas's People

Contributors

neriros avatar proksh avatar

Watchers

 avatar  avatar

shapes-on-canvas's Issues

[discussion] OOP Shapes

I tried going with functional programming all the way,
but taking into account the nature of the shapes and the many possibilities,
I would consider rewriting the main shape-handling part with OOP.

I went with functional programming purely to keep it aligned with the framework.
But if there where some nonfunctional requirements for agility I would write this in OOP.

Let me know you thoughts :)

[performance] drag and drop

dragging and dropping rerenders the entire canvas and additional unrelated elements.

This maybe happening because the update shape function in the use canvas provider is returning a copy of the shapes array and therefore reloads many parts.

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.