-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
154 lines (130 loc) · 4.82 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html>
<head>
<title>File Browser</title>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<style>
body {
padding-bottom: 200px;
}
td {
padding-bottom: 16px;
}
code {
background: #eee;
padding: 4px 8px;
}
.container {
margin: 0 auto;
width: 640px;
}
.header {
font-weight: bold;
padding-right: 16px;
}
</style>
</head>
<body>
<div class="container">
<h1>File Browser</h1>
<h3>Overview</h3>
<p>Imagine that you are building a file browser for a remote server hosting some
source code and text files. The server provides an API that allows you to list all
the files and filter the file names by a provided prefix.</p>
<p>The goal of this take-home coding challenge is to build an interactive web app
for this simple HTTP-based API. We want this web app to expose a simple UI which
allows users to search the backend for relevant files, and then navigate to a
detail view which displays the file contents.</p>
<h3>API</h3>
<table>
<tr><td class="header">URL</td><td>/search</td></tr>
<tr><td class="header">Method</td><td>GET</td></tr>
<tr>
<td class="header">Query Params</td>
<td>
<code>prefix: string = ''</code><br/>
<code>count: integer = 10</code><br/>
<code>randomDelay: boolean = false</code><br/>
</td>
</tr>
<tr>
<td class="header">Response</td>
<td>
<code>{ "results": ["foobar/a.txt", "b.txt", "m.json", ...] }</code>
</td>
</tr>
<tr>
<td class="header">Example</td>
<td><a href="/search?count=7&prefix=cookie&randomDelay=false">/search?count=7&prefix=cookie&randomDelay=false</a></td>
</tr>
</table>
<h3>Requirements</h3>
<p>
You may use any JavaScript frameworks to accomplish the following goals (but React is encouraged), in
order or priority.
</p>
<ol>
<li>
Create a text input that when its <code>onChange</code> event fires,
searches for files using the API with <code>value</code> as <code>prefix</code>.
The results should be displayed below the input in an appropriate fashion.
</li>
<li>
Create a loading spinner that shows up after the text input has changed but
before the results are returned from the API. Test this part with
<code>randomDelay=true</code>
which will cause the API to wait a random interval between 0 to 3 seconds
before returning the results.
</li>
<li>
Create a numeric input of any suitable kind that allows the user to pick
the number of suggestions they want to see at a given time. Use that value
when querying the API by including the <code>count</code> query param.
</li>
<li>
Allow the user to use the keyboard up and down arrows to highlight one of
the current search results, while still allowing the user to type in the text
input.
</li>
<li>
While a file is highlighted, allow the user to press enter to display the
content of the file in a seperate area of the UI on the same screen. Every
file returned by the search can be downloaded at <code>/static/[filename]</code>.
For example, if the result is <code>"accepts/README.md"</code>, then the URL
is <a href="/static/accepts/README.md">/static/accepts/README.md</a>.
</li>
<li>
The user should be able to press enter to navigate to a detail view for that
file, which should show the full file contents. When these contents are
showing, it should be the only visible UI besides a back button.
</li>
<li>
When the back button is pressed (or the user presses backspace on the
keyboard) from the detail view, the app should go back to the search screen
with the previous state restored. The search term, results, and highlighted
result should be the same as before.
</li>
</ol>
<p>
Try to complete as many of the tasks above as you can in the allocated time,
but please prioritize code design and correctness over quantity.
</p>
<p>
You can find the source code for this API server at
<a href="https://github.com/VertaAI/file-browser-interview/blob/master/index.js">
https://github.com/VertaAI/file-browser-interview/blob/master/index.js
</a>.
</p>
<h3>Things to consider</h3>
<p>A quick note on some of the things to keep in mind while working on this
assignment. You should treat this assignment as if it were a production project
you were working on at a job -- that means you should focus on writing it in a way
that is extensible and easy for other team members to understand. Add code
comments if there are any interesting product/technical choices that may not be
obvious to the reader.</p>
<p>There is no specific technical criteria that we are looking for, beyond the
requirements noted above, but try to pay attention to how you can minimize the
number of network requests to fetch redundant data.</p>
</div>
</body>
</html>