Welcome to this code test! :)
The main objective of this technical excercise is for you to get a good grasp of what kind of problems we encounter on Genially. We wouldn't want you to find some nasty surprises if you decide to join us. Also, it's a good starting point to have a technical conversation during an interview.
As you can see, the code test is a simple create-react-app, with some included libraries and some code bundled with it. Let's go through some of the lesser-known technologies.
This is the app state manager we use at our React apps. It's meant to be used with mobx, and unlike it, is very opinionated as how you should define your stores, models etc.
Genially is a very interactivity-heavy application. Almost everything you use on the app can be moved around with your mouse, selected, scaled, rotated, etc. This library does most of the heavy lifting for us.
The test is an extremely simplified version of the Genially editor. We provide you a working area, named Canvas, and elements that are displayed inside of it, named Box.
We've also added a rudimentary toolbar for some of the required functionality.
When finished, the app should let the user:
- Add and remove boxes.
- Select a box, which should visually indicate that is selected
- Drag the boxes around using interact.js and using React refs.
- Keep** in mind you should be able to drag a box even if it's not selected when the dragging starts.
- Changing a box's color.
- Display a counter indicating how many boxes are selected.
- Support selection, dragging and color changing for multiple boxes.
- Save the state of the app locally and restore it when it loads.
- Undo / Redo capabilities
- hint: mobx-state-tree provides a middleware for this.
If you are unable to do some of the above, don't worry! But we would ask to at least explain what went wrong, how you would tackle the problem, or if you have no idea whatsoever 😃
Even if you manage to do everything, we also greatly appreciate comments on decisions you took, issues you faced or limitations you've left behind on purpose.
A good place to include those comments is the README.md of the repo.
Send it to us however it suits you, but our preferred method is to get access to a private fork of the repo. This way, we can see historical changes, and a complete diff against the original repo on a PR. It's also a great way to write down feedback and discussion points for the interview afterwards.
If you opt for a fork with limited access, see the contact list below for people you can give access to. Please always include Chema & Román, and then someone else (or all of them!).
If you have any questions about the test, you can contact any of us:
- Chema (Github User @chemitaxis / [email protected])
- Román (Github User @rjimenezda / [email protected])
- Rafa (Github User @rteran / [email protected])
- Emanuel ([email protected])
- Jesé ([email protected])
- Perico ([email protected])
- Julio ([email protected])
Good Luck!
I started by forking the project and then cloning the repository to my local environment. I improved the styles and the interface of the application before moving on to the functionalities. I had no previous experience with these libraries, so I spent my time studying the guidelines in the documentation. At first I had some difficulties that I later overcame.
Then on the second day I was already familiar with the libraries and was able to apply more features. I kept changing the styles as I progressed with the project and new features.
In general it was quite a challenge because I had not done a style project and I enjoyed it. I want to continue exploring these libraries to understand and consolidate the concepts.
Although it was not a requirement, I thought it was appropriate to deploy the application to quickly see how it works. You can see the display here, it was hosted in Vercel.
Despite my inexperience in testing, I recognize its value and seek training to apply it to my projects and raise the quality of the software I develop. That's why I decided to implement some unit tests on two of the app's components.
Here I included a screenshot of the desktop version of the interface that was modified and improved from the base that was delivered in the technical test. The base of the styles was inspired by the design system of the components that Genially uses on its website.
I understand that it was not within the requirements, but I wanted to add the following library that allows me to use icons in svg format quickly and easily.
- React Icons (https://react-icons.github.io/react-icons/)
- Prettier (https://prettier.io/) I used it to format the code for the whole project.
- Possibility to add other shapes.
- Possibility to add text.
- Possibility to save a screenshot of the canvas in png or jpg format.
- Magnets to align the boxes.
- Tooltips to indicate the functionality of each button.
- Responsive design for mobile devices.
- Toast messages to indicate actions such as creating a box, deleting a box, etc.