Skip to content

Commit 8299f56

Browse files
danielarias123danielarias123
committed
Initital commit
0 parents  commit 8299f56

File tree

17 files changed

+731
-0
lines changed

17 files changed

+731
-0
lines changed

‎.babelrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["es2015", "react", "stage-0"],
3+
}

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎INSTRUCTIONS.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# Exercise: Build an Explorer
2+
3+
This exercise is to build a folder and file explorer (or a tree control). You can use any front-end JS frameworks you'd like (such as jQuery, React, Angular, etc).
4+
5+
Please do not use an off-the-shelf tree control packages or any CSS frameworks (like Bootstrap or Foundation) since that would
6+
defeat the purpose of this project!
7+
8+
## Requirements
9+
10+
### Application
11+
* Create a new file `index.html` that renders an interactive file explorer shown in `mockup.png`
12+
* Use the data from `data.json` to render the actual folders & files. You can make the data in `data.json` a global variable so that you don't need to load it with AJAX.
13+
* Unless you provide specific instructions, we will run your code by just opening up `index.html`.
14+
15+
#### Appearance
16+
* What you build should look like a modal but doesn't need to function like one. (i.e. opening/closing and dragging it around are not necessary)
17+
* Visually has appearance similar to that of `mockup.png` (private folders should have the red icon appearance)
18+
19+
### Minimum Features
20+
* Folders should be able to expand or collapse by clicking anywhere on the row (not just the icon or label itself)
21+
* Folders and files should have a hover appearance (such as highlighting the row blue).
22+
* Folders and files are selected by clicking on the row, but only one folder or file should be selected at a time. A selected folder/file should have some sort of special appearance (such as highlighting the row green)
23+
24+
### Advanced Features (Not Required!)
25+
Below are advanced features you do NOT need to implement, but **need to plan for**. In later interviews,
26+
you will be asked exactly how you would implement all of these into your app.
27+
28+
* Add a button "Export". This should export the exact state & configuration of your app - the folders & files structure,
29+
which ones are expanded/collapsed, which one is selected. You should decide what you want the exported configuration file to hold.
30+
* Add a button "Import". This should allow the user to import data that you exported from the above feature and
31+
re-render the explorer to the state specified in the imported file.
32+
* Add a button "Add". This should allow the user to add a new file or folder to the location that is currently selected.
33+
* Add the ability to move a file or folder by dragging it to another location.
34+
35+
36+
## Evaluation Criteria
37+
38+
1. Minimum features completed
39+
2. DRY, reusable, well-thought-out code that lays good infrastructure for implementing all of the Advanced Features
40+
3. Clean CSS rendering of `mockup.png` in latest Chrome

‎README.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# tree-control-project
2+
3+
Tree Control Application written in React
4+
5+
![alt text](https://github.com/danielarias123/tree-control-project/blob/master/example.gif "Tree Control Example Gif")
6+
7+
8+
## Running the code
9+
To run the code, input the following commands in your terminal (assuming `npm` is installed globally):
10+
11+
12+
```shell
13+
npm i
14+
npm start
15+
```
16+
17+
The app will run on `http://localhost:8080/` through a Webpack dev server.

‎data.json‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
{
2+
"children": [
3+
{
4+
"name": "Main Folder",
5+
"type": "folder",
6+
"children": [
7+
{
8+
"name": "Sub Folder 1",
9+
"type": "folder",
10+
"children": [
11+
{
12+
"name": "Nested Folder",
13+
"type": "folder",
14+
"children": [
15+
{
16+
"name": "Super Nested Folder",
17+
"type": "folder",
18+
"children": [
19+
{
20+
"name": "Deep File",
21+
"type": "file"
22+
},
23+
{
24+
"name": "Deep File 2",
25+
"type": "file"
26+
}
27+
]
28+
}
29+
]
30+
},
31+
{
32+
"name": "Empty Folder",
33+
"type": "folder"
34+
},
35+
{
36+
"name": "Simple Folder",
37+
"type": "folder",
38+
"children": [
39+
{
40+
"name": "File",
41+
"type": "file"
42+
}
43+
]
44+
},
45+
{
46+
"name": "Empty Folder",
47+
"type": "folder"
48+
},
49+
{
50+
"name": "Nested File",
51+
"type": "file"
52+
}
53+
]
54+
}
55+
]
56+
},
57+
{
58+
"name": "Private folder",
59+
"type": "folder",
60+
"private": true,
61+
"children": [
62+
{
63+
"name": "Private document",
64+
"type": "file"
65+
},
66+
{
67+
"name": "Another folder",
68+
"type": "folder",
69+
"children" : [
70+
{
71+
"name": "Super secret document",
72+
"type": "file"
73+
}
74+
]
75+
}
76+
]
77+
},
78+
{
79+
"name": "Empty Folder",
80+
"type": "folder"
81+
},
82+
{
83+
"name": "Empty Folder",
84+
"type": "folder"
85+
},
86+
{
87+
"name": "Simple Folder",
88+
"type": "folder",
89+
"children": [
90+
{
91+
"name": "File",
92+
"type": "file"
93+
}
94+
]
95+
},
96+
{
97+
"name": "Poorly Named Folder",
98+
"type": "folder",
99+
"children": [
100+
{
101+
"name": "Extremely long file name 3847283948383837472738690283472394256982734982349871203984569872340981234",
102+
"type": "file"
103+
}
104+
]
105+
}
106+
]
107+
}

‎icon-sprite.png‎

1.49 KB
Loading

‎index.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/*
2+
* index.js file that inserts React into the DOM
3+
*/
4+
5+
import React, { Component } from 'react';
6+
import { render } from 'react-dom';
7+
import App from './src/components/App';
8+
9+
render(<App />, document.getElementById('app'));

‎mockup.png‎

33 KB
Loading

‎package.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "tree-control-project",
3+
"version": "1.0.0",
4+
"description": "Tree Control Application written in React",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "webpack-dev-server --hot --inline"
8+
},
9+
"keywords": [
10+
"React",
11+
"Babel",
12+
"Webpack"
13+
],
14+
"author": "Daniel Arias <danielarias_123@msn.com>",
15+
"license": "MIT",
16+
"devDependencies": {
17+
"babel-core": "^6.25.0",
18+
"babel-loader": "^7.1.1",
19+
"babel-preset-es2015": "^6.24.1",
20+
"babel-preset-react": "^6.24.1",
21+
"babel-preset-stage-0": "^6.24.1",
22+
"css-loader": "^0.28.4",
23+
"extract-text-webpack-plugin": "^2.1.2",
24+
"node-sass": "^4.5.3",
25+
"sass-loader": "^6.0.6",
26+
"style-loader": "^0.18.2",
27+
"webpack": "^3.0.0",
28+
"webpack-dev-server": "^2.5.0"
29+
},
30+
"dependencies": {
31+
"classnames": "^2.2.5",
32+
"prop-types": "^15.5.10",
33+
"react": "^15.6.1",
34+
"react-dom": "^15.6.1"
35+
}
36+
}

‎public/icon-sprite.png‎

1.49 KB
Loading

0 commit comments

Comments
 (0)