Skip to content

File Search Challenge for Senior Frontend Developer Position

Notifications You must be signed in to change notification settings

Kjaer/codesandbox-file-searcher

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

README

Hi! We're really happy to see you here and thank you for taking the time to do this exercise!

Contender's note: Result of the challenge can be seen here: https://codesandbox-file-searcher.netlify.app/

Problem statement

Given a sandbox, a developer should be able to search across files for a keyword. (Please see figma file below for design)

screenshot

Instructions

  1. Please fork this sandbox.

  2. Here is the design specification for the feature: Figma file.

  3. To get files, use this open API: https://codesandbox.io/api/v1/sandboxes/84jkx. The relevant field is data.modules.

  4. The theme (colors, fontsizes, etc.) used in the Figma example is available in src/theme/ as css variables and javascript both. You are free to use either of them.

  5. All the icons from design are in the src/icons.js. The Icon component are 16px by 16px by default. The component accepts a size prop.

  6. Please feel free to add any libraries that you need.

  7. After implementing your solution, you can reply to the email with a link to your solution sandbox.

  8. According to our measurement, this assignment takes about 2-3 hours. Please do not spend too much time on it.

Features

  1. You can search for a keyword in the contents of all files inside a sandbox (sandbox id can be hardcoded)

  2. By default, the query is case-insensitive. Example: React should return both React and react

  3. When "Match case" (Aa) is toggled on,it should only search for the case mentioned. Example: React should return React, but not react

  4. The list of results is grouped by file name. The search term is highlighted in the result. (see Figma file for design)

  5. It should search on Enter or when you click the Search button.

What are we looking for?

  1. Attention to detail
  2. Accuracy of implementation of features
  3. Polish of the UI
  4. Structure of the code

How to use the Figma file

  • Open this file - Figma link
  • Figma would prompt you to log in/create an account to be able to see the colors, fontsizes, etc.
  • After logging in, you would be able to see the color, font sizes and space used in the file. Example: Blues 600, the name of colors and font size match what's available in src/theme.
  • The font used in the file is Inter, and is already added to styles.css

Help?

If you have any doubts, please feel free to reply to the email you recieved with this assignment.

Example

Here's an example implementation.

(You do not have to replicate this exactly, this is only for reference)

screen recording

About

File Search Challenge for Senior Frontend Developer Position

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published