Dev Exercise

  • What we're trying to evaluate

  • From our first call, I'm happy that your communication skills & general mindset are what we need.

  • So the main thing being evaluated is your ability to "think on your feet" and learn quickly, how to reason from first principles, and a little bit of time management - we're going to throw a few new skills at you (tailwind & htmx) and see how you deal with them.

  • If you get stuck for more than an hour in one place, please ping me and I'll help to debug, particularly if it seems like something is broken that's unrelated to your task (e.g the server is down or slow). It's totally fine to get stuck - you won't be penalised for that. Time management is also an important skill - a component of which is knowing when to ask for help. So please treat this exercise similar to if you were building on a team and needed to ask a senior for help to remove a blocker.

  • Steps

    • Get a copy of this Healthcare UI Figma Template in your Figma.

    • Install the Remote - SSH VSCode extension

    • Send Tony your ssh public key.

      1. This can usually be found in the /.ssh folder on your mac. So running cat ~/.ssh/id_rsa.pub or cat ~/.ssh/github_rsa.pub in a terminal will usually work.

      2. Once Tony has authorized your public key on the server, connect to the server with Remote SSH using the command ssh root@playground.toniclabs.ltd

      3. Once connected, "Open Folder" to /apps/misc. This is the rails application.

      4. The application is live - as you make changes in VS Code, you can see them reflect at https://misc.toniclabs.ltd

    • Create a new route at /your_name

    • Create a new Appointments model and populate it with 10 dummy records, similar to the ones shown in the screenshot below.

      1. The structure of the data's not important here. What's important is having the records in the database so that we can use them for the htmx step.

      2. For profile images, feel free to store them as a url string (as opposed to an image upload) for simplicity. You can use pravatar or something similar.

    • Replicate the interface shown below using Tailwind classes. (You can get the assets and specs from the Figma file). Tailwind is already loaded in to the application layout, so you won't need to do anything fancy to enable it (we use a static version from a CDN to load it in, different to the method listed on the Tailwind site.)

      2. You can use the "closest available" classes that Tailwind has - it doesn't need to be pixel perfect. For example, tailwind has slightly different background colors and shadows. Use the Tailwind cheat sheet referenced below.

      3. You can leave out the weird blue stamp icon on the bottom right - not sure what that is

    • Bonus: Once the interface is built, wire up the Search input using htmx, so that typing a search will filter the search results shown in the table

      1. HTMX is also loaded into the layout already, so no need to do this yourself.

      2. HTMX has a full demo of how to do this search pattern here. Pay particular attention to the "Server Requests" section at the bottom, which will show you exactly what the server needs to receive as a response. (hint: render layout: false will come in handy in the controller here).

  • Resources

  • Website Page