After checking the technical requirements, I've compiled that list:

So, first I've made a simple layout using grids. In tech. docs was shown a layout with 3 columns, so I've made a 3 columns, as simple as that, nothing interesting yet.

Second one, Main View. I had a sketch how that main view should look like, basically YouTube, so there is nothing interesting either. But, actually, there is. Since I already knew, that there should be 3 columns, I chose relation 2 columns to 1 in main view and was more the satisfied and here is the trick, that I used. Since I know the layout should be dynamic (I mean there should be some UX response to user), I managed to control the width of list and main view layout elements and shrink them whenever I want. So, actually, there was a 2 containers. First one is width of 0, if there is no notes selected, and second one, that represents the list itself and has a layout of 3 columns. Here is where magic happends, so user clicks on a card, and that invokes the callback function with card data and since I already have a references for each container, that I described, I can shrink the list component and visualize the main view container with provided data. By doing that, I can easily achieve the select animation, when list layout shrinks after click and main view being rendered.

Three! So, I already made a little bit of animations, but it wasn't that good looking. I scavanged the internet for some good ideas, but unfortunately didn't find anything cool, so after a few hours the idea came to me by herself, maybe I should implement a floating card animation? And that idea was right on the money. So, since I already have a information about clicked card, that means I can easily query the card itself and get it's rectangle values. I just re-used data of each card element and generated a new one.That's it, I just queried the bounding client rect and used absolute position for overlap and provided start-end coordinates and timing, when the floating card should be unmounted. Then I just delayed the actual notes card render and my work with layout was done.

Four! The finale. As I said, the company that I was trying to get hired for was a AI-piano notes, so I had to make a double range selector for it. That task took more time then I thought. Firstly I tried to make a 2 states with left and right pointers, but that idea was born dead. I can set left and right positions while moving the mouse, but I couldn't make a selector from right to left, because first click was setting only left position. So, I wen't to school and couldn't stop thinking about that task. Eventually, my school textbook became an IDE and, literally, 20 minutes after from the start of a class, I came up with the idea of setting 2 pointers and just getting the lowest and highest one for carets and that idea worked like a charm, so, yeah, Google boys feel free to reach me.

Finally, the work was done. For the whole application I had a one week deadline and I did everything on time. Truthfully speaking, I wasn't satisfied with the optimization side of that app, because I initialized the project using Vite, but didn't had a lot of experience with it and I needed some server-side-generation. Obviously, I didn't want to spend the entire week getting know that Vite SSG thingy and just migrated that app to NextJS. Thanks to Vercel team, SSG is embedded into framework and I started to refactor my code right away. There is not much to describe, I utilized SSG for API calls which made my application a half-second faster on the first load and wrapped cards into meaty memo() function which made my app 10 times faster, sheeesh! I moved the notes drawing process from client to server on the first load with API calls and that's it, application was finished, at last! I went down from aproximately 70-90ms of rendering to 10-15ms, pretty neat, huh? Here is the repo, if you interested: Piano notes!.

You know what? I've been waiting for a week for their response and got nothing. So, eventually I lost my patience and decided to write them directly. I wrote them that I didn't get any response from them and answer was hilarious. They somehow messed up the mailing system and I got into group with other candidates and got rejected, but the guy told me, that they didn't saw my solution and they will be back as soon as possible. I thought, alright, shit happends, no one is perfect, bla bla bla. Response was super fast, one day or something and obviously, they liked my code and I could arrange the interview day using some online website that utilizes google calendar. From the start I will tell ya, that I am a geeky guy and I try to take care of my pc as well as I care about my privacy, so my main OS is Arch linux, because I can control almost each step of my system, from audio servers to initialization system and that played a baaad, bad joke with me. So, if you aware I am currently in Poland, which means that we have a summer and winter time format. I was aware about it, but didn't think, that my thunderbird email client and the GODDAMN online website will use my system time. So, yeah, I was super confident in myself and my code. Everything was perfect. I arranged interview to the next day at 7PM. I attended my polish language classes, went to supermarket to get some food, came back home, did a delicious rizotto and connected to the interview 10 minutes before the planned time. I've been waiting for a 5 minutes after, 10, 15 and started to ask myself some questions. Did something happend? Maybe I missed something? Eventually, I went to their discord server and the guy was online. Well, I thought maybe he is conducting an interview and a bit late. Nothing strange, it happends sometimes. I've waited 10 minutes more and started to thinking that there is no way they are late for a 30 minutes straight. I checked my email and finally found the problem. Problem indeed was on my side and interview was set to 6PM instead of 7PM, because I didn't change my damn time to winter format and was late for an hour. It's 7:45 on the clocks and I wrote them, that I had some time format issues and I am very sorry for being late, is there any way to rearrange the interview for a next day, but got silence, literally, no one contacted me for a day, and next day I've contacted the guy in discord DM's, where he told me, that - "If candidate is being late for a interview, that means that he is disqualified." So, yeah, if you are interested I am still able to become a part of your team! And from now on I will change my goddamn system time right! I am not a distro-hopper, but sometimes the system becomes bloated and the easiest way of cleaning that mess, is just to reinstall the OS with formatting the whole drive. So, I think, somewhere in that time I messed my time and set it hardcodedly like: timedatectl set-time "23.05.23 12:00:00".

That's the story, thank you for reading this and HIRE ME!