Job Tech Challenge

So, I’m back after a week since I wrote the last post. I’m making an effort to keep the momentum in the blog going.

In the same fashion of this post, I’m going to write about a take-home challenge that was proprosed to me as part of an application to work in a FinOps startup. I ended up not being selected - but my solution of the challenge was not the problem (at least, it did not seem so when I presented it).

Since I don’t know if I can share the document that specifies the problem, I am going to put it in my own words:

Create a modern web application that is a file explorer. Users should be able to navigate a filesystem comprised of files an directories. The system must have a fluid user experience (UX) with real time updates and file and directory size calculations.

The tech stack choice was free, but the company stated that it used Next.js and React-query for the front-end, Django (and Django Rest Framework) for the backend, as well as, PostgreSQL for the database. So, naturally, I went with the company stack.

Below you can see a high-level schematic of the solution I proposed. It is important to mention that I did not implement the storage layer.

Some of the things that I found more interesting in this challenge:

• In the Django Backend, if I remember correctly, I did the things in this order:

  • Created the Node model (which was used to create rows in the database). It sound like a good idea since a filesystem can be thought of a tree where the nodes are files or directories (and the root of this tree is the root NOde).

  • Defined the services, meaning, the functions that would be triggered by requests and interact with the database (creating, deleting or just reading rows from tables).

  • Wrote tests for the services defined above.

  • Implemented the API layer: linked endpoints to functions defined in the services file.

Then I proceeded to the front-end:

• Next.js framework uses the structure and contents of the app directory on the project to define the url of the application in the browser. It seems to streamline the development since this convetion takes the decision from the developer hands.
• React-query is responsible for calling fetch most of the times. It can keep a cache of the content fetched, it can refetch automatically when the window of the browser is refocused or it can refetch after a specified period. This is very important for the UX part of the challenge.

I struggled a lot with the mental model of React. But, in the end, I got it.

I think I spent 3 days doing this project. I learned a lot. The most valuable thing I think it was the understanding that the Database in this case is just a ledger and the file contents would live somewhere else (in a local filesystem, maybe in Amazon S3, or maybe a Network File System).

Well. I did not get the job, but I learned a lot. It became clear that take-home challenges are my preferred form of being evaluated.

Oh, and if you made this far, here’s a like for my solution: https://github.com/iuryr/samax_tech_challenge

Until next time!