The main objective of this technical excercise was for me to get a good grasp of what kind of problems face developers in their day to day at the company . You can find the test instructions in its original README.
- Frontend code test
Important
You need to have Node.
To start using this project, clone this repo into a new directory and move inside it.
$ git clone https://github.com/conchaasensio/frontend-code-test.git $ cd frontend-code-test
First of all you have to install the dependencies.
$ npm install
Run the app.
$ npm start
Navigate to the app
👉 Open http://localhost:3000 to view in the browser
Should you like to take a look to the deployed app, here you have the link.
Finally, to run the tests you need to introduce the following commands on your terminal:
$ npm run testI updated the packages to their latest version, since some of them were really outdated, and much of the information I was reading about the technologies I needed to apply referred to later versions.
This was one of the first decisions I had to make. The technical test repository was initially set up in JavaScript, and although I considered implementing it in TypeScript (as I understand it is valued for this role), I ultimately decided to proceed with JavaScript. Given the short timeframe and the need to learn two completely new libraries, I chose to focus on delivery using a language I am more experienced with. This allowed me to prioritize achieving the required functionalities, and I am confident that with more time, I could easily transition this to TypeScript.
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.
As it was my first experience with mobx-state-tree, I focused on quickly grasping its fundamentals to implement the required functionality within the timeframe. Despite the learning curve, I successfully integrated it into the project and achieved the expected outcomes. This experience has sparked my interest in further exploring this library to deepen my understanding and identify potential enhancements for future iterations.
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 them.
This was also my first time working with interact.js, and I found it quite engaging since it allowed me to implement draggable elements -something I hadn’t tackled before. Given the timeframe, I focused on learning the essentials to get this functionality up and running, and I was able to achieve the required draggable behavior successfully. Working with interact.js has opened up new possibilities, and I’m keen to explore the documentation further to deepen my understanding and refine this implementation even more in future iterations.
I am really interested in all that having to do with clean code and best practices. Testing is something that I keep learning. Although I am not an "advanced user" regarding this practice, I wanted to try to put it into practice during this exercise. I have included tests files for the components, using React Testing Library.
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.
- Add TypeScript.
- Add more tests.
- Add e2e tests.
- Make it responsive.
- Improve the design and architecture of the app.
- Improve the look and feel and UI of the app.
- Dockerize the app.
This App has been developed by Concha Asensio.