Congrats on making it thus far in the interview process for Stack AI!

Here is a 2-day task for you to show us where you shine the most 🙂

🥅 Goal

The goal of this task is to build a custom File Picker, similar to the one below, for a Google Drive connection:

• The functionality should be very similar to the one in your computer to manage your filesystem (e.g. Finder on MacOS). Here are some of the actions you need to perform:
  • Read: read the files and folders from the database that are in the Google Drive connection:
    • Mind that this is like the same functionality as in ls in your terminal, meaning, the API is done so that you have to specify which “folder” you want to read, and list the subsequent files/folders.
  • Delete: the ability to remove a file from the list of files indexed (mind that this does NOT delete the file in Google Drive, but instead de-indexes the file).
  • Create/Update: you do not need to perform these actions.
• Now, there is one more thing! The File Picker is meant to be used for selecting and indexing files to build Knowledge Bases (see API docs below) of a subset of files/folders, and as such, we want the user to be able to:
  • Select a file or entire folder and index it (see API endpoints in jupyter notebook below).
  • Provide information about whether the file is:
    • indexed
    • not indexed
    • being indexed
  • Allow the user to de-index a file (without necessarily deleting the file), and show the user when the file has been de-index.
• Finally, we care about the UI being snappy and fast, meaning, don’t put loading spinners everywhere 🌀.🌀:
  • Use skeletons for loading states
  • Wherever possible, pre-fetch information so that you minimize user’s waiting time
    • BUT do not fetch all the files at once, since that isn’t scalable.
    • a good balance between pre-fetching and skeletons as loading states, should make the file picking and indexing experience delightful.
  • Make use of Optimistic UI updates as much as possible, read SWR to learn more, and rollback on errors and show the user what happened when doing so. Use toasts for example to show the error.
• Bonus points:
  • Sorting:
    • By name
    • By date
  • Filtering:
    • By name
  • Searching:
    • By name

📔 Resources:

• Here is a jupyter notebook for you to see how to use the API endpoints:

  • To run and visualize this notebook in VSCode: install Jupyter Notebook extension.

  

  Knowledge_Base_Workflow.ipynb

  Make sure to save the file as a .ipynb notebook

• Credentials to log into Google Drive, and to log into Stack AI.

• You will be asked for the password below inside the jupyter notebook:

  • Email: [email protected]
  • Password: !z4ZnxkyLYs#vR

These are used for:

• Logging into Google Drive
• Accessing a StackAI account created for this task, with a Google Drive connection already created. DO NOT DELETE OR ADD NEW GOOGLE DRIVE ACCOUNTS.

⚠️ If you are asked for two factor authentication to log in with that email. Ping [email protected] (+18575295760, whatsapp/sms works) and/or your point of contact at Stack AI.