Initial commit

README.md

@@ -0,0 +1,100 @@
+# Klaxoon - Frontend take home test
+
+The project has been set up with `node` version **22.16.0** and `npm` version **10.9.2**.
+
+## Technical stack
+
+-   `nx` (monorepo)
+-   `rspack` (bundler)
+-   `eslint`
+-   `prettier`
+-   `react`
+-   `typescript`
+-   `tailwinds`
+
+## Libs
+
+-   `mobx`
+-   `react-rnd`
+-   `@faker-js/faker`
+-   `@emotion/react`
+
+## First steps
+
+-   Install dependencies : `npm install`
+-   Start apps :
+    -   board : `npm run serve:board`
+    -   admin : `npm run serve:admin`
+
+## App description
+
+The current monorepo is composed of 2 apps : `board` and `admin` ; and 2 packages : `models` and `ui`.
+
+### `board` app
+
+-   This is a basic whiteboard app that displays a single type of object : ideas.
+-   They can be moved and resized on the board.
+
+### `admin` app
+
+-   This is a basic app that displays a list of users in a table after being fetched.
+-   There is also a button for showing and hiding a clock.
+
+## Expectations
+
+### Board : New object types
+
+-   Update the whiteboard in order to handle 2 new object types : **images** and **iframes**.
+
+An image object that can be added to the board with an input file.
+
+An iframe object that can be added to the board with a button that shows a form asking for the iframe url.
+
+Keep in mind that the board need to scalable : some other new board object types can be added or existing ones can updated in the future.
+
+Feel free to update the apps and packages for a better project **architecture** and **state management** (global and/or local). You can also add unit tests if you feel like it.
+
+-   A bug has also been spotted by our team : the resize of a board object is not always working, can you help us fix it?
+
+-   Apps need to be operational for a live demo.
+
+---
+
+### Admin : Improvements
+
+-   We're not very proud of how the `admin` app has been made, it seems to be **buggy** and have some **performance** issues.
+
+Could you take a look and help use improve it ?
+
+
+## Board : Bug Fixes
+
+The resize bug has been fixed by ensuring that the size is updated correctly in the state management when the user resizes an object, previsouly only position was monitored.
+Bottom right corner or right edge resizing didn't work as the size was not being updated correctly in those cases. Other corners were working fine as a side effect of the top left corner moving during resize, this triggered a re render due to position changes.
+
+## Board : New Object Types
+
+I added support for images and iframes, I started by updating the "Add idea" button into a "Plus" button that will display a menu allowing users to select the type of idea they want to add. This menu includes options for text, image, and iframe ideas.
+I also implemented the necessary components and logic to handle the creation and rendering of image and iframe ideas on the board, I started to implement some kind of "smart" paste functionality that will automatically detect and embed images or iframes when users paste a URL into the text area. For security reasons all iframes inputs are parsed and only essential attributes are kept like size or url. This might require further adjustments to the parsing logic to ensure that only safe and valid URLs are embedded and also to keep some specific properties depending on the provider.
+
+## Board : state management
+
+I improved the state management for the board by implementing a more robust and scalable architecture. This included using a centralized store to manage the state of all board objects, making it easier to add, update, and remove objects as needed.
+
+## Board: Unit Tests
+
+I added unit tests for the new object types and the smart paste functionality to ensure that everything works as expected and to prevent regressions in the future.
+A script has been added to automate the testing process and ensure that all tests are run consistently (`npm run test:board`).
+
+## Admin : Improvements
+
+I refactored the admin app to improve its performance and fix existing bugs. This included optimizing the data fetching logic, reducing unnecessary re-renders, and improving the overall user experience.
+A virtualized list was implemented to efficiently render the user table, significantly improving performance when dealing with large datasets.
+An improvement could be made by implementing pagination to further enhance the user experience and performance when navigating through large lists of users. This would be paired with an API able to efficiently fetch user data in chunks.
+Multiple filters have been proposed to allow users to easily find and manage specific users within the table, filters are also updating the page URL to reflect the current state of the table, allowing easy bookmarking and sharing of specific views.
+
+## Potential Future Improvements
+
+- Drag and drop support for ideas on the board (mostly for images)
+- Better usage on mobile devices, including touch gestures and responsive design improvements.
+- Better safari support for contextual menus. (currently using clipboard features triggers platform-specific UI menus over the context menu)