├── .gitignore
├── README.md
├── interview--complete
    ├── .babelrc
    ├── api
    │   ├── index.js
    │   └── properties.js
    ├── assets
    │   ├── build
    │   │   └── app.js
    │   └── index.html
    ├── package.json
    ├── server.js
    ├── src
    │   ├── components
    │   │   ├── Break.js
    │   │   ├── Button.js
    │   │   ├── Form.js
    │   │   ├── Input.js
    │   │   ├── PropertyLI.js
    │   │   └── States.js
    │   ├── containers
    │   │   ├── AddProperty.js
    │   │   ├── App.js
    │   │   └── PropertyList.js
    │   ├── css.scss
    │   └── index.js
    └── webpack.config.babel.js
└── interview--incomplete
    ├── .babelrc
    ├── api
        ├── index.js
        └── properties.js
    ├── assets
        ├── build
        │   └── app.js
        └── index.html
    ├── package.json
    ├── server.js
    ├── src
        ├── components
        │   ├── Break.js
        │   ├── Button.js
        │   ├── Form.js
        │   ├── Input.js
        │   ├── PropertyLI.js
        │   └── States.js
        ├── containers
        │   ├── AddProperty.js
        │   ├── App.js
        │   └── PropertyList.js
        ├── css.scss
        └── index.js
    └── webpack.config.babel.js


/.gitignore:
--------------------------------------------------------------------------------
1 | interview--complete/node_modules
2 | interview--incomplete/node_modules


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Excercise-Template-Node-React-Mongo 
 2 | 
 3 | This is a template for testing a web developer's skill in:
 4 | MongoDB with Mongoose, ReactJS, Node with Express
 5 | 
 6 | This is to test competence in:
 7 | Asynchronous Functions, Promises, Mongoose, React Event Firing, Lifting State in React, HTTP.
 8 | 
 9 | ## Software Requirements
10 | You must install MongoDB and NodeJS
11 | 
12 | ## Running the Completed
13 | To start, first visit the interview--complete folder and:
14 | ```
15 | npm install
16 | mongod
17 | npm start
18 | ```
19 | Navigate to `www.localhost.com:8888` and you should see the application. When you add a new property it should add that property directly to the database and live update the property list. The api for the mongo data for "properties" is at `www.localhost.com:8888/api/properties`
20 | 
21 | ## Running the Incomplete
22 | To start, first visit the interview--incomplete folder and:
23 | ```
24 | npm install
25 | mongod
26 | webpack -w
27 | npm start
28 | ```
29 | 
30 | ## Database and Initial Data
31 | For your convenience, I have added initial data in the /api/properties.js. This was added so that the user knows when they have successfully connected to the database. If you accidently keep this up and you have too much data to test. Use `mongoose.connection.dropDatabase()` to drop the data.
32 | 
33 | ## Instructions
34 | 
35 | There are only 2 files that need to be eddited for completion:
36 | `src/container/App.js` and `api/properties.js`
37 | 
38 | The developer may need to navigate to the two other container:
39 | `AddProperty.js` and `PropertyList.js`, but they DO NOT need to be editted.
40 | 
41 | The developer has access to bluebird, axios, and of course fetch.
42 | 


--------------------------------------------------------------------------------
/interview--complete/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"presets": ["es2015", "react", "stage-2"],
3 | }


--------------------------------------------------------------------------------
/interview--complete/api/index.js:
--------------------------------------------------------------------------------
 1 | import express from 'express'
 2 | 
 3 | const router = express.Router()
 4 | 
 5 | router.get('/', (req, res) => {
 6 |   res.send('Welcome to the API page')
 7 | })
 8 | 
 9 | export default router
10 | 


--------------------------------------------------------------------------------
/interview--complete/api/properties.js:
--------------------------------------------------------------------------------
 1 | import express from 'express'
 2 | import mongoose from 'mongoose'
 3 | 
 4 | const router = express.Router()
 5 | 
 6 | // Declare Schema
 7 | let propertySchema = mongoose.Schema({
 8 |   address: String,
 9 |   state: String,
10 |   zip: String
11 | })
12 | 
13 | // Declare model
14 | let Property = mongoose.model('Property', propertySchema)
15 | 
16 | // Set inital Data
17 | const initialData = [
18 |   {
19 |     'address': '2360 Westridge Center',
20 |     'state': 'California',
21 |     'zip': 89183
22 |   }, {
23 |     'address': '05991 Grover Trail',
24 |     'state': 'California',
25 |     'zip': 89052
26 |   }, {
27 |     'address': '8287 Caliangt Plaza',
28 |     'state': 'Arizona',
29 |     'zip': 89052
30 |   }, {
31 |     'address': '35 Thompson Court',
32 |     'state': 'Texas',
33 |     'zip': 89183
34 |   }, {
35 |     'address': '297 Marquette Circle',
36 |     'state': 'California',
37 |     'zip': 89052
38 |   }
39 | ]
40 | 
41 | Property.create(initialData, (err) => {
42 |   if (err) {
43 |     console.log(err)
44 |   }
45 |   console.log('Load of initial data complete.')
46 | })
47 | 
48 | // Get Request for all Properties
49 | router.get('/', (req, res) => {
50 |   Property.find({}, (err, users) => {
51 |     if (err) console.log(err)
52 |     res.send(users)
53 |   })
54 | })
55 | 
56 | // Post Request for adding a Property
57 | router.post('/', (req, res) => {
58 |   let newProperty = new Property(req.body)
59 |   let promise = Property.create(newProperty)
60 |   promise.then(() => {
61 |     Property.find({}, (err, users) => {
62 |       if (err) console.log(err)
63 |       res.send(users)
64 |     })
65 |   })
66 | })
67 | 
68 | export default router
69 | 


--------------------------------------------------------------------------------
/interview--complete/assets/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <base href="/" >
 5 |     <script src="https://use.fontawesome.com/3cc8a15364.js"></script>
 6 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans:100,200,400,600,700,900" rel="stylesheet">
 7 |     <!-- To support Android -->
 8 |     <link rel="manifest" href="manifest.json">
 9 |     <link rel="apple-touch-icon" sizes="96×96" href="images/favicon-96x96.png">
10 |     <meta name="mobile-web-app-capable" content="yes">
11 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">
12 |     <meta charset="utf-8">
13 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
14 |     <title>EXERCISE</title>
15 |     <!--[if lt IE 9]>
16 | 	<script>
17 | 	(function(){
18 | 	  var ef = function(){};
19 | 	  window.console = window.console || {log:ef,warn:ef,error:ef,dir:ef};
20 | 	}());
21 | 	</script>
22 | 	<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
23 | 	<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv-printshiv.min.js"></script>
24 | 	<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.js"></script>
25 | 	<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-sham.js"></script>
26 | 	<![endif]-->
27 | 
28 |   </head>
29 |   <body>
30 |   	<div id="root"></div>
31 |   	<script src="/build/app.js" type="text/javascript"></script>
32 |   </body>
33 | </html>


--------------------------------------------------------------------------------
/interview--complete/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "interview",
 3 |   "version": "1.0.0",
 4 |   "description": "Interview Template to test MongoDB, NodeJS/Express, and ReactJS",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "nodemon --exec babel-node server.js --ignore assets/"
 8 |   },
 9 |   "dependencies": {
10 |     "axios": "^0.15.3",
11 |     "bluebird": "^3.5.0",
12 |     "body-parser": "^1.17.1",
13 |     "express": "^4.15.2",
14 |     "mongoose": "^4.9.3",
15 |     "react": "^15.4.1",
16 |     "react-dom": "^15.4.1"
17 |   },
18 |   "devDependencies": {
19 |     "babel-cli": "^6.23.0",
20 |     "babel-core": "^6.23.1",
21 |     "babel-loader": "^6.3.0",
22 |     "babel-polyfill": "^6.23.0",
23 |     "babel-preset-es2015": "^6.18.0",
24 |     "babel-preset-react": "^6.16.0",
25 |     "babel-preset-stage-2": "^6.18.0",
26 |     "css-loader": "^0.28.0",
27 |     "node-sass": "^4.5.2",
28 |     "nodemon": "^1.11.0",
29 |     "sass-loader": "^6.0.3",
30 |     "style-loader": "^0.16.1",
31 |     "webpack": "^2.2.1",
32 |     "webpack-dev-server": "^2.4.1"
33 |   },
34 |   "keywords": ["interview", "react", "mongodb", "node", "express"],
35 |   "author": "Federico Dottin",
36 |   "license": "ISC"
37 | }
38 | 


--------------------------------------------------------------------------------
/interview--complete/server.js:
--------------------------------------------------------------------------------
 1 | import mongoose from 'mongoose'
 2 | import bodyParser from 'body-parser'
 3 | 
 4 | import apiRouter from './api'
 5 | import properties from './api/properties'
 6 | 
 7 | import express from 'express'
 8 | const server = express()
 9 | 
10 | server.use(express.static(__dirname + '/assets'))
11 | server.use(bodyParser.json())
12 | server.use(bodyParser.urlencoded({extended: true}))
13 | server.use('/api', apiRouter)
14 | server.use('/api/properties', properties)
15 | 
16 | // start database
17 | mongoose.connect('mongodb://localhost:27017/interview')
18 | 
19 | var db = mongoose.connection
20 | db.on('error', console.error.bind(console, 'connection error:'))
21 | db.once('open', function () {
22 |   console.log('MongoDB is connected...')
23 | })
24 | 
25 | // catch 404 and forward to error handler
26 | server.use(function (req, res, next) {
27 |   var err = new Error('Not Found')
28 |   err.status = 404
29 |   next(err)
30 | })
31 | 
32 | // error handler
33 | server.use(function (err, req, res, next) {
34 |   // set locals, only providing error in development
35 |   res.locals.message = err.message
36 | 
37 |   // render the error page
38 |   res.status(err.status || 500)
39 |   res.render('error')
40 | })
41 | 
42 | server.listen(process.env.PORT || 8888, () => {
43 |   console.log('Express started. Server is online on port 8888.')
44 | })
45 | 
46 | export default server
47 | 


--------------------------------------------------------------------------------
/interview--complete/src/components/Break.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import '../css.scss'
3 | 
4 | export default () => {
5 |   return (
6 |     <hr className='break' />
7 |   )
8 | }
9 | 


--------------------------------------------------------------------------------
/interview--complete/src/components/Button.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import '../css.scss'
 3 | 
 4 | export default (props) => {
 5 |   let style = {
 6 |     wrapper: {}
 7 |   }
 8 |   style.wrapper.borderRadius = props.square ? 0 : 4
 9 |   return (
10 |     <div style={{ ...style.wrapper, ...props.style }} className={props.className} onClick={props.onClick}>
11 |       { props.iconClass ? <i style={{ marginRight: '.5rem' }} className={props.iconClass} /> : null }
12 |       { props.children }
13 |     </div>
14 |   )
15 | }
16 | 


--------------------------------------------------------------------------------
/interview--complete/src/components/Form.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import '../css.scss'
 3 | 
 4 | export default (props) => {
 5 |   return (
 6 |     <form style={props.style} className='form'>
 7 |       { props.heading ? <div className='form__heading'>{ props.heading }</div> : null }
 8 |       { props.children }
 9 |     </form>
10 |   )
11 | }
12 | 


--------------------------------------------------------------------------------
/interview--complete/src/components/Input.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import '../css.scss'
 3 | 
 4 | export default (props) => {
 5 |   function handleChange (e) {
 6 |     let placeholder = e.target.parentNode.getElementsByClassName('input__placeholder')[0]
 7 |     if (e.target.value !== '') {
 8 |       if (!(placeholder.classList.contains('input__placeholder--datain'))) { placeholder.classList.add('input__placeholder--datain') }
 9 |     } else {
10 |       placeholder.classList.remove('input__placeholder--datain')
11 |     }
12 |     props.onChange(e.target.name, e.target.value)
13 |   }
14 | 
15 |   const style = {
16 |     wrapper: {
17 |       width: (props.width * 100) + '%'
18 |     }
19 |   }
20 |   let Input
21 |   switch (props.type) {
22 |     case 'select':
23 |       Input = <select defaultValue='default' name={props.name} onChange={(e) => handleChange(e)} className='input'>
24 |         <option value='default' disabled hidden>Select</option>
25 |         { props.options ? props.options.map((option, i) => <option name={option} key={i}>{ option }</option>) : null }
26 |       </select>
27 |       break
28 |     case 'multiple':
29 |       Input = <select name={props.name} onChange={(e) => handleChange(e)} multiple className='inputLG'>
30 |         { props.options ? props.options.map((option, i) => <option name={option} key={i}>{ option }</option>) : null }
31 |       </select>
32 |       break
33 |     case 'area':
34 |       Input = <textarea name={props.name} onChange={(e) => handleChange(e)} className='inputLG' />
35 |       break
36 |     case 'file':
37 |       Input = <input name={props.name} type='file' className='input__file' />
38 |       break
39 |     default:
40 |       Input = <input name={props.name} onLoad={(e) => handleChange(e)}
41 |         onChange={(e) => handleChange(e)}
42 |         className='input' />
43 |   }
44 | 
45 |   let largeElement = props.type === 'multiple' || props.type === 'select' || props.type === 'file' || props.type === 'area'
46 | 
47 |   return (
48 |     <div style={{ ...style.wrapper, ...props.style }} className={largeElement ? 'inputLG__wrapper' : 'input__wrapper'}>
49 |       { Input }
50 |       { props.children }
51 |       <div className={largeElement ? 'input__placeholder input__placeholder--datain' : 'input__placeholder'}>
52 |         { props.placeholder }
53 |       </div>
54 |     </div>
55 |   )
56 | }
57 | 


--------------------------------------------------------------------------------
/interview--complete/src/components/PropertyLI.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import '../css.scss'
 3 | 
 4 | export default (props) => {
 5 |   return (
 6 |     <div className='propertyListItem__wrapper'>
 7 |       <div className='propertyListItem__address'>{ props.property.address }</div>
 8 |       <div className='propertyListItem__state'>{ props.property.state }</div>
 9 |       <div className='propertyListItem__zip'>{ props.property.zip }</div>
10 |     </div>
11 |   )
12 | }
13 | 


--------------------------------------------------------------------------------
/interview--complete/src/components/States.js:
--------------------------------------------------------------------------------
1 | const stateOptions = ['Alabama', 'Alaska', 'American Samoa', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'District of Columbia', 'Federated States of Micronesia', 'Florida', 'Georgia', 'Guam', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Marshall Islands', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Northern Mariana Islands', 'Ohio', 'Oklahoma', 'Oregon', 'Palau', 'Pennsylvania', 'Puerto Rico', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virgin Island', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming']
2 | 
3 | export default stateOptions
4 | 


--------------------------------------------------------------------------------
/interview--complete/src/containers/AddProperty.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Form from '../components/Form'
 3 | import Input from '../components/Input'
 4 | import Button from '../components/Button'
 5 | 
 6 | import '../css.scss'
 7 | import states from '../components/States'
 8 | 
 9 | export default class AddProperty extends React.Component {
10 |   constructor (props) {
11 |     super(props)
12 |     this.state = {
13 |       data: {
14 |         address: '',
15 |         state: '',
16 |         zip: ''
17 |       }
18 |     }
19 |   }
20 | 
21 |     // Save Form Input Changes into State
22 |   handleChange (name, value) {
23 |     let data = this.state.data
24 |     data[name] = value
25 |     this.setState({ data })
26 |   }
27 | 
28 |   render () {
29 |     return (
30 |       <Form style={this.props.style} heading='Add New Property'>
31 |         <Input onChange={(name, value) => this.handleChange(name, value)} width='1' name='address' placeholder='Address' />
32 |         <Input onChange={(name, value) => this.handleChange(name, value)} type='select' options={states}
33 |           width='.5' name='state' placeholder='State' />
34 |         <Input onChange={(name, value) => this.handleChange(name, value)} width='.5' name='zip' placeholder='Zip' />
35 |         <Button onClick={() => this.props.handleAdd(this.state.data)} iconClass='fa fa-plus' className='button__primary'>ADD</Button>
36 |       </Form>
37 |     )
38 |   }
39 | };
40 | 
41 | AddProperty.propTypes = {
42 |   handleAdd: React.PropTypes.func
43 | }
44 | 
45 | AddProperty.defaultProps = {
46 |   handleAdd: () => {}
47 | }
48 | 


--------------------------------------------------------------------------------
/interview--complete/src/containers/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import axios from 'axios'
 3 | import Promise from 'bluebird'
 4 | 
 5 | import PropertyList from './PropertyList'
 6 | import AddProperty from './AddProperty'
 7 | 
 8 | export default class App extends React.Component {
 9 |   constructor (props) {
10 |     super(props)
11 | 
12 |     this.state = {
13 |       properties: []
14 |     }
15 |   }
16 | 
17 |   componentWillMount () {
18 |     axios.get('/api/properties')
19 |       .then(res => {
20 |         this.setState({ properties: res.data })
21 |       })
22 |       .catch(err => {
23 |         console.log(err)
24 |       })
25 |   }
26 | 
27 |   handleAdd (property) {
28 |     axios.post('/api/properties', property)
29 |     .then(res => {
30 |       this.setState({ properties: res.data })
31 |     })
32 |     .catch(err => {
33 |       console.log(err)
34 |     })
35 |   }
36 | 
37 |   render () {
38 |     return (
39 |       <section className='app__wrapper'>
40 |         <PropertyList properties={this.state.properties} style={{ width: '42%', margin: '0px 4%' }} />
41 |         <AddProperty handleAdd={(property) => this.handleAdd(property)} style={{ width: '42%', margin: '0px 4%' }} />
42 |       </section>
43 |     )
44 |   }
45 | };
46 | 


--------------------------------------------------------------------------------
/interview--complete/src/containers/PropertyList.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Form from '../components/Form'
 3 | 
 4 | import '../css.scss'
 5 | import PropertyLI from '../components/PropertyLI'
 6 | 
 7 | export default class PropertyList extends React.Component {
 8 |   constructor (props) {
 9 |     super(props)
10 |     this.state = {
11 |       properties: []
12 |     }
13 |   }
14 | 
15 |   render () {
16 |     return (
17 |       <Form className={this.props.className} style={this.props.style} heading='Properties' >
18 |         { this.props.properties.map((property, i) =>
19 |           <PropertyLI key={i} property={property} />
20 |         )}
21 |       </Form>
22 |     )
23 |   }
24 | };
25 | 
26 | PropertyList.propTypes = {
27 |   properties: React.PropTypes.array
28 | }
29 | 
30 | PropertyList.defaultProps = {
31 |   properties: []
32 | }
33 | 


--------------------------------------------------------------------------------
/interview--complete/src/css.scss:
--------------------------------------------------------------------------------
  1 | body {
  2 |   margin: 0;
  3 | }
  4 | 
  5 | // SASS
  6 | $primary: #2c80b8;
  7 | $secondary: #5cb85c;
  8 | 
  9 | // App.js
 10 | .app__wrapper {
 11 |   display: block;
 12 |   margin: auto;
 13 |   padding: 1rem;
 14 | }
 15 | 
 16 | // PropertyLI.js
 17 | .propertyListItem__wrapper {
 18 |   width: 100%;
 19 |   height: 4rem;
 20 |   line-height: 4rem;
 21 |   font-size: 1rem;
 22 |   display: flex;
 23 |   flex-wrap: nowrap;
 24 |   flex-direction: row;
 25 |   justify-content: flex-start;
 26 |   text-align: center;
 27 |   cursor: pointer;
 28 |   font-weight: 700;
 29 |   margin-top: 9px;
 30 |   background-color: #EEE;
 31 |   &:hover {
 32 |     background-color: #CCC;
 33 |   }
 34 | }
 35 | .propertyListItem__address {
 36 |   width: 45%;
 37 |   white-space: nowrap;
 38 |   text-overflow: ellipsis;
 39 |   overflow: hidden;
 40 |   height: 100%;
 41 | }
 42 | .propertyListItem__state {
 43 |   @extend .propertyListItem__address;
 44 |   width: 35%;
 45 | }
 46 | .propertyListItem__zip {
 47 |   @extend .propertyListItem__address;
 48 |   width: 20%;
 49 | }
 50 | // Button.js
 51 | .button {
 52 | 	cursor: pointer;
 53 | 	width: 9.06rem;
 54 | 	height: 3.6rem;
 55 | 	font-weight: 900;
 56 | 	line-height: 3.6rem;
 57 | 	font-size: 1.15rem;
 58 | 	text-align: center;
 59 | 	position: relative;
 60 | 	border-bottom: 3px;
 61 | 	border-right: 2px;
 62 | 	border-top: 1px;
 63 | 	border-left: 1px;
 64 | 	border-style: solid;
 65 | 	background-color: #DDD;
 66 | 	border-color: #CCC;
 67 | }
 68 | .button__primary {
 69 | 	@extend .button;
 70 | 	color: white;
 71 | 	background-color: $primary;
 72 | 	border-color: #1976D2;
 73 | }
 74 | .button__success {
 75 | 	@extend .button;
 76 | 	color: white;
 77 | 	background-color: $secondary;
 78 | 	border-color: #2bbe69;
 79 | }
 80 | .button__warning {
 81 | 	@extend .button;
 82 | 	color: white;
 83 | 	background-color: #e74c3c;
 84 | 	border-color: #E43825;
 85 | }
 86 | .button__flatPrimary {
 87 | 	@extend .button;
 88 | 	background-color: transparent;
 89 | 	color: $primary;
 90 | 	border: none;
 91 | 	&:hover {
 92 | 		background-color: #DDD;
 93 | 	}
 94 | }
 95 | .button__flatSuccess {
 96 | 	@extend .button;
 97 | 	background-color: transparent;
 98 | 	color: $secondary;
 99 | 	border: none;
100 | 	&:hover {
101 | 		background-color: #DDD;
102 | 	}
103 | }
104 | .button__flatWarning {
105 | 	@extend .button;
106 | 	background-color: transparent;
107 | 	color: #e74c3c;
108 | 	border: none;
109 | 	&:hover {
110 | 		background-color: #DDD;
111 | 	}
112 | }
113 | .button__file {
114 | 	@extend .button;
115 | 	background-color: #f39c12;
116 | 	border: none;
117 | }
118 | 
119 | // Input.js
120 | .input__wrapper {
121 | 	height: 6.6rem;
122 | 	padding: 0px 1rem;
123 | 	position: relative;
124 | 	display: inline-block;
125 | }
126 | .inputLG__wrapper {
127 | 	@extend .input__wrapper;
128 | 	height: auto;
129 | }
130 | .input {
131 | 	width: 100%;
132 | 	border: 2px solid #b3b3b3;
133 | 	border-radius: 4px;
134 | 	height: 3.73rem;
135 | 	margin-top: 1.73rem;
136 | 	outline: 0;
137 | 	transition: all 200ms ease-out;
138 | 	position: relative;
139 | 	font-size: 1.2rem;
140 | 	font-weight: 500;
141 | 	padding: 2px 9px;
142 | 	box-shadow: inset 0px 0px 2px 1px #dddddd;
143 | 	&:focus {
144 | 		border: 3px solid $primary;
145 | 	}
146 | 	&:focus + .input__placeholder {
147 | 		top: 0px;
148 | 		color: $primary;
149 | 	}
150 | 	&LG {
151 | 		@extend .input;
152 | 		height: 7.46rem;
153 | 	}
154 | }
155 | .input__file {
156 | 	@extend .input;
157 | 	border: none;
158 | 	padding: 1rem;
159 | 	box-shadow: none;
160 | 	&:hover {
161 | 		border: none;
162 | 	}
163 | }
164 | .input__placeholder {
165 | 	position: absolute;
166 | 	transition: all 200ms linear;
167 | 	font-weight: 700;
168 | 	font-size: 1.2rem;
169 | 	pointer-events: none;
170 | 	left: 1.8rem;
171 | 	top: 2.75rem;
172 | 	color: #707070;
173 | }
174 | .input__placeholder--datain {
175 | 	top: 0;
176 | }
177 | 
178 | //Form.js
179 | .form {
180 | 	width: 100%;
181 | 	padding: 9px;
182 | 	background-color: white;
183 | 	border-radius: 4px;
184 | 	box-shadow: 0px 1px 4px 1px rgba(0,0,0,0.3);
185 | 	display: inline-flex;
186 | 	flex-direction: row;
187 | 	justify-content: center;
188 | 	flex-wrap: wrap;
189 |   	height: auto;
190 | }
191 | .form__heading {
192 | 	width: 100%;
193 | 	height: 1.9rem;
194 | 	font-size: 1.8rem;
195 | 	position: relative;
196 | 	color: $secondary;
197 | 	font-weight: 800;
198 | 	margin-bottom: 1rem;
199 | 	text-align: center;
200 | }
201 | 
202 | .break {
203 | 	margin-bottom: 0;
204 | 	margin-top: 5px;
205 | 	height: 2px;
206 | 	width: 100%;
207 | 	border: 0;
208 | 	background-image: linear-gradient(to right, rgba(200, 200, 200, .1), rgba(200, 200, 200, 0.75), rgba(200, 200, 200, .1));
209 | }
210 | 
211 | html {
212 | 	font-family: 'Open Sans', sans-serif;
213 | }
214 | 
215 | * {
216 |   -moz-box-sizing: border-box;
217 |   -webkit-box-sizing: border-box;
218 |   box-sizing: border-box;
219 | }
220 | 
221 | @media screen and (max-width: 500px){
222 |   html{
223 |     font-size: 8px;
224 |   }
225 | }
226 | 
227 | @media screen and (min-width: 500px){
228 |   html{
229 |     font-size: 9px;
230 |   }
231 | }
232 | @media screen and (min-width: 570px){
233 |   html{
234 |     font-size: 10px;
235 |   }
236 | }
237 | @media screen and (min-width: 620px){
238 |   html{
239 |     font-size: 11px;
240 |   }
241 | }
242 | @media screen and (min-width: 680px){
243 |   html{
244 |     font-size: 12px;
245 |   }
246 | }
247 | @media screen and (min-width: 720px){
248 |   html{
249 |     font-size: 13px;
250 |   }
251 | }
252 | @media screen and (min-width: 800px){
253 |   html{
254 |     font-size: 14px;
255 |   }
256 | }
257 | @media screen and (min-width: 860px){
258 |   html{
259 |     font-size: 15px;
260 |   }
261 | }
262 | @media screen and (min-width: 920px){
263 |   html{
264 |     font-size: 16px;
265 |   }
266 | }
267 | @media screen and (min-width: 992px){
268 |   html{
269 |     font-size: 11px;
270 |   }
271 | }
272 | @media screen and (min-width: 1140px){
273 |   html{
274 |     font-size: 13px;
275 |   }
276 | }
277 | @media screen and (min-width: 1280px){
278 |   html{
279 |     font-size: 15px;
280 |   }
281 | }
282 | @media screen and (min-width: 1420px){
283 |   html{
284 |     font-size: 17px;
285 |   }
286 | }


--------------------------------------------------------------------------------
/interview--complete/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { render } from 'react-dom'
 3 | 
 4 | import App from './containers/App'
 5 | 
 6 | render(
 7 |   <App />,
 8 |   document.getElementById('root')
 9 | )
10 | 


--------------------------------------------------------------------------------
/interview--complete/webpack.config.babel.js:
--------------------------------------------------------------------------------
 1 | import webpack from 'webpack'
 2 | import path from 'path'
 3 | 
 4 | module.exports = {
 5 |   entry: ['./src/index.js'],
 6 |   output: {
 7 |     publicPath: '/assets/',
 8 |     path: path.resolve(__dirname, 'assets/build'),
 9 |     filename: 'app.js'
10 |   },
11 |   devtool: '#source-map',
12 |   plugins: [
13 |     new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false })
14 |   ],
15 |   module: {
16 |     rules: [
17 |       {
18 |         test: /\.js?$/, // if js file then use this loader
19 |         exclude: /(node_modules|bower_components)/,
20 |         loaders: ['babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-2']
21 |       },
22 |       {
23 |         test: /\.scss$/,
24 |         use: ['style-loader', 'css-loader', 'sass-loader']
25 |       }
26 |     ]
27 |   },
28 |   devServer: {
29 |     historyApiFallback: true,
30 |     contentBase: path.join(__dirname, 'assets'),
31 |     inline: true
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/interview--incomplete/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"presets": ["es2015", "react", "stage-2"],
3 | }


--------------------------------------------------------------------------------
/interview--incomplete/api/index.js:
--------------------------------------------------------------------------------
 1 | import express from 'express'
 2 | 
 3 | const router = express.Router()
 4 | 
 5 | router.get('/', (req, res) => {
 6 |   res.send('Welcome to the API page')
 7 | })
 8 | 
 9 | export default router
10 | 


--------------------------------------------------------------------------------
/interview--incomplete/api/properties.js:
--------------------------------------------------------------------------------
 1 | import express from 'express'
 2 | import mongoose from 'mongoose'
 3 | 
 4 | const router = express.Router()
 5 | 
 6 | // DO NOT TOUCH
 7 | // Declare Schema
 8 | let propertySchema = mongoose.Schema({
 9 |   address: String,
10 |   state: String,
11 |   zip: String
12 | })
13 | 
14 | // DO NOT TOUCH
15 | // Declare model
16 | let Property = mongoose.model('Property', propertySchema)
17 | 
18 | // ATTENTION: COMMENT THIS OUT AFTER INITIAL LOAD.
19 | // (SHOULD BE DONE BEFORE ATTEMPTING THE EXCERCISE)
20 | // Set inital Data
21 | const initialData = [
22 |   {
23 |     'address': '2360 Westridge Center',
24 |     'state': 'California',
25 |     'zip': 89183
26 |   }, {
27 |     'address': '05991 Grover Trail',
28 |     'state': 'California',
29 |     'zip': 89052
30 |   }, {
31 |     'address': '8287 Caliangt Plaza',
32 |     'state': 'Arizona',
33 |     'zip': 89052
34 |   }, {
35 |     'address': '35 Thompson Court',
36 |     'state': 'Texas',
37 |     'zip': 89183
38 |   }, {
39 |     'address': '297 Marquette Circle',
40 |     'state': 'California',
41 |     'zip': 89052
42 |   }
43 | ]
44 | Property.create(initialData, (err) => {
45 |   if (err) {
46 |     console.log(err)
47 |   }
48 |   console.log('Load of initial data complete.')
49 | })
50 | 
51 | // DO NOT TOUCH
52 | // Get Request for all Properties
53 | router.get('/', (req, res) => {
54 |   Property.find({}, (err, users) => {
55 |     if (err) { console.log(err) }
56 |     res.send(users)
57 |   })
58 | })
59 | 
60 | // ***************************************** //
61 | // Handle Post Request for adding a Property //
62 | 
63 | // ********** YOUR CODE GOES HERE ********** //
64 | 
65 | // ***************************************** //
66 | 
67 | export default router
68 | 


--------------------------------------------------------------------------------
/interview--incomplete/assets/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <base href="/" >
 5 |     <script src="https://use.fontawesome.com/3cc8a15364.js"></script>
 6 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans:100,200,400,600,700,900" rel="stylesheet">
 7 |     <!-- To support Android -->
 8 |     <link rel="manifest" href="manifest.json">
 9 |     <meta name="mobile-web-app-capable" content="yes">
10 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">
11 |     <meta charset="utf-8">
12 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
13 |     <title>EXERCISE</title>
14 |     <!--[if lt IE 9]>
15 | 	<script>
16 | 	(function(){
17 | 	  var ef = function(){};
18 | 	  window.console = window.console || {log:ef,warn:ef,error:ef,dir:ef};
19 | 	}());
20 | 	</script>
21 | 	<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
22 | 	<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv-printshiv.min.js"></script>
23 | 	<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.js"></script>
24 | 	<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-sham.js"></script>
25 | 	<![endif]-->
26 | 
27 |   </head>
28 |   <body>
29 |   	<div id="root"></div>
30 |   	<script src="/build/app.js" type="text/javascript"></script>
31 |   </body>
32 | </html>


--------------------------------------------------------------------------------
/interview--incomplete/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "interview--incomplete",
 3 |   "version": "1.0.0",
 4 |   "description": "Interview Template to test MongoDB, NodeJS/Express, and ReactJS",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "nodemon --exec babel-node server.js --ignore assets/"
 8 |   },
 9 |   "dependencies": {
10 |     "axios": "^0.15.3",
11 |     "bluebird": "^3.5.0",
12 |     "body-parser": "^1.17.1",
13 |     "express": "^4.15.2",
14 |     "mongoose": "^4.9.3",
15 |     "react": "^15.4.1",
16 |     "react-dom": "^15.4.1"
17 |   },
18 |   "devDependencies": {
19 |     "babel-cli": "^6.23.0",
20 |     "babel-core": "^6.23.1",
21 |     "babel-loader": "^6.3.0",
22 |     "babel-polyfill": "^6.23.0",
23 |     "babel-preset-es2015": "^6.18.0",
24 |     "babel-preset-react": "^6.16.0",
25 |     "babel-preset-stage-2": "^6.18.0",
26 |     "css-loader": "^0.28.0",
27 |     "node-sass": "^4.5.2",
28 |     "nodemon": "^1.11.0",
29 |     "sass-loader": "^6.0.3",
30 |     "style-loader": "^0.16.1",
31 |     "webpack": "^2.2.1",
32 |     "webpack-dev-server": "^2.4.1"
33 |   },
34 |   "keywords": ["interview", "react", "mongodb", "node", "express"],
35 |   "author": "Federico Dottin",
36 |   "license": "ISC"
37 | }
38 | 


--------------------------------------------------------------------------------
/interview--incomplete/server.js:
--------------------------------------------------------------------------------
 1 | import mongoose from 'mongoose'
 2 | import bodyParser from 'body-parser'
 3 | 
 4 | import apiRouter from './api'
 5 | import properties from './api/properties'
 6 | 
 7 | import express from 'express'
 8 | const server = express()
 9 | 
10 | server.use(express.static(__dirname + '/assets'))
11 | server.use(bodyParser.json())
12 | server.use(bodyParser.urlencoded({extended: true}))
13 | server.use('/api', apiRouter)
14 | server.use('/api/properties', properties)
15 | 
16 | // start database
17 | mongoose.connect('mongodb://localhost:27017/interview')
18 | 
19 | var db = mongoose.connection
20 | db.on('error', console.error.bind(console, 'connection error:'))
21 | db.once('open', function () {
22 |   console.log('MongoDB is connected...')
23 | })
24 | 
25 | // catch 404 and forward to error handler
26 | server.use(function (req, res, next) {
27 |   var err = new Error('Not Found')
28 |   err.status = 404
29 |   next(err)
30 | })
31 | 
32 | // error handler
33 | server.use(function (err, req, res, next) {
34 |   // set locals, only providing error in development
35 |   res.locals.message = err.message
36 | 
37 |   // render the error page
38 |   res.status(err.status || 500)
39 |   res.render('error')
40 | })
41 | 
42 | server.listen(process.env.PORT || 8888, () => {
43 |   console.log('Express started. Server is online on port 8888.')
44 | })
45 | 
46 | export default server
47 | 


--------------------------------------------------------------------------------
/interview--incomplete/src/components/Break.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import '../css.scss'
3 | 
4 | export default () => {
5 |   return (
6 |     <hr className='break' />
7 |   )
8 | }
9 | 


--------------------------------------------------------------------------------
/interview--incomplete/src/components/Button.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import '../css.scss'
 3 | 
 4 | export default (props) => {
 5 |   let style = {
 6 |     wrapper: {}
 7 |   }
 8 |   style.wrapper.borderRadius = props.square ? 0 : 4
 9 |   return (
10 |     <button style={{ ...style.wrapper, ...props.style }} className={props.className} onClick={props.onClick}>
11 |       { props.iconClass ? <i style={{ marginRight: '.5rem' }} className={props.iconClass} /> : null }
12 |       { props.children }
13 |     </button>
14 |   )
15 | }
16 | 


--------------------------------------------------------------------------------
/interview--incomplete/src/components/Form.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import '../css.scss'
 3 | 
 4 | export default (props) => {
 5 |   return (
 6 |     <div style={props.style} className='form'>
 7 |       { props.heading ? <div className='form__heading'>{ props.heading }</div> : null }
 8 |       { props.children }
 9 |     </div>
10 |   )
11 | }
12 | 


--------------------------------------------------------------------------------
/interview--incomplete/src/components/Input.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import '../css.scss'
 3 | 
 4 | export default (props) => {
 5 |   function handleChange (e) {
 6 |     let placeholder = e.target.parentNode.getElementsByClassName('input__placeholder')[0]
 7 |     if (e.target.value !== '') {
 8 |       if (!(placeholder.classList.contains('input__placeholder--datain'))) { placeholder.classList.add('input__placeholder--datain') }
 9 |     } else {
10 |       placeholder.classList.remove('input__placeholder--datain')
11 |     }
12 |     props.onChange(e.target.name, e.target.value)
13 |   }
14 | 
15 |   const style = {
16 |     wrapper: {
17 |       width: (props.width * 100) + '%'
18 |     }
19 |   }
20 |   let Input
21 |   switch (props.type) {
22 |     case 'select':
23 |       Input = <select name={props.name} onChange={(e) => handleChange(e)} className='input'>
24 |         { props.options ? props.options.map((option, i) => <option name={option} key={i}>{ option }</option>) : null }
25 |       </select>
26 |       break
27 |     case 'multiple':
28 |       Input = <select name={props.name} onChange={(e) => handleChange(e)} multiple className='inputLG'>
29 |         { props.options ? props.options.map((option, i) => <option name={option} key={i}>{ option }</option>) : null }
30 |       </select>
31 |       break
32 |     case 'area':
33 |       Input = <textarea name={props.name} onChange={(e) => handleChange(e)} className='inputLG' />
34 |       break
35 |     case 'file':
36 |       Input = <input name={props.name} type='file' className='input__file' />
37 |       break
38 |     default:
39 |       Input = <input name={props.name} onLoad={(e) => handleChange(e)}
40 |         onChange={(e) => handleChange(e)}
41 |         className='input' />
42 |   }
43 | 
44 |   let largeElement = props.type === 'multiple' || props.type === 'select' || props.type === 'file' || props.type === 'area'
45 | 
46 |   return (
47 |     <div style={{ ...style.wrapper, ...props.style }} className={largeElement ? 'inputLG__wrapper' : 'input__wrapper'}>
48 |       { Input }
49 |       { props.children }
50 |       <div className={largeElement ? 'input__placeholder input__placeholder--datain' : 'input__placeholder'}>
51 |         { props.placeholder }
52 |       </div>
53 |     </div>
54 |   )
55 | }
56 | 


--------------------------------------------------------------------------------
/interview--incomplete/src/components/PropertyLI.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import '../css.scss'
 3 | 
 4 | export default (props) => {
 5 |   return (
 6 |     <div className='propertyListItem__wrapper'>
 7 |       <div className='propertyListItem__address'>{ props.property.address }</div>
 8 |       <div className='propertyListItem__state'>{ props.property.state }</div>
 9 |       <div className='propertyListItem__zip'>{ props.property.zip }</div>
10 |     </div>
11 |   )
12 | }
13 | 


--------------------------------------------------------------------------------
/interview--incomplete/src/components/States.js:
--------------------------------------------------------------------------------
1 | const stateOptions = ['Alabama', 'Alaska', 'American Samoa', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'District of Columbia', 'Federated States of Micronesia', 'Florida', 'Georgia', 'Guam', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Marshall Islands', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Northern Mariana Islands', 'Ohio', 'Oklahoma', 'Oregon', 'Palau', 'Pennsylvania', 'Puerto Rico', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virgin Island', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming']
2 | 
3 | export default stateOptions
4 | 


--------------------------------------------------------------------------------
/interview--incomplete/src/containers/AddProperty.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Form from '../components/Form'
 3 | import Input from '../components/Input'
 4 | import Button from '../components/Button'
 5 | import states from '../components/States'
 6 | 
 7 | import '../css.scss'
 8 | 
 9 | export default class AddProperty extends React.Component {
10 |   constructor (props) {
11 |     super(props)
12 |     this.state = {
13 |       data: {
14 |         address: '',
15 |         state: '',
16 |         zip: ''
17 |       }
18 |     }
19 |   }
20 | 
21 |     // Save Form Input Changes into State
22 |   handleChange (name, value) {
23 |     let data = this.state.data
24 |     data[name] = value
25 |     this.setState({ data })
26 |   }
27 | 
28 |   render () {
29 |     return (
30 |       <Form className={this.props.className} style={this.props.style} heading='Add New Property'>
31 |         <Input onChange={(name, value) => this.handleChange(name, value)} width='1' name='address' placeholder='Address' />
32 |         <Input onChange={(name, value) => this.handleChange(name, value)} type='select' options={states}
33 |           width='.5' name='state' placeholder='State' />
34 |         <Input onChange={(name, value) => this.handleChange(name, value)} width='.5' name='zip' placeholder='Zip' />
35 |         <Button onClick={() => this.props.handleAdd(this.state.data)} iconClass='fa fa-plus' className='button__primary'>ADD</Button>
36 |       </Form>
37 |     )
38 |   }
39 | };
40 | 
41 | AddProperty.propTypes = {
42 |   handleAdd: React.PropTypes.func
43 | }
44 | 
45 | AddProperty.defaultProps = {
46 |   handleAdd: () => {}
47 | }
48 | 


--------------------------------------------------------------------------------
/interview--incomplete/src/containers/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import axios from 'axios'
 3 | import Promise from 'bluebird'
 4 | 
 5 | import PropertyList from './PropertyList'
 6 | import AddProperty from './AddProperty'
 7 | 
 8 | import '../css.scss'
 9 | 
10 | export default class App extends React.Component {
11 |   constructor (props) {
12 |     super(props)
13 | 
14 |     this.state = {
15 |       properties: []
16 |     }
17 |   }
18 | 
19 |   // make an http get request to '/api/properties'
20 |   // set the return data as the property state
21 |   // an initial property is shown for you
22 |   componentWillMount () {
23 |     let properties = [{ address: '4561 Kingly Dr', state: 'AK - Alaska', zip: '89425' }]
24 |     this.setState({ properties })
25 |   }
26 | 
27 |   // onClick of the <Button /> in <AddProperty />
28 |   // Make a Post Request to '/api/properties' using passed data saved in state
29 |   // Respond to the Request with the Updated Data via /api/properties.js file
30 |   handleAdd () {
31 |     console.log('You have entered handleAdd!!')
32 |   }
33 | 
34 |   render () {
35 |     return (
36 |       <section className='app__wrapper'>
37 |         <PropertyList properties={this.state.properties}
38 |           style={{ width: '42%', margin: '0px 4%' }} />
39 |         <AddProperty handleAdd={() => console.log('button clicked!')}
40 |           style={{ width: '42%', margin: '0px 4%' }} />
41 |       </section>
42 |     )
43 |   }
44 | };
45 | 


--------------------------------------------------------------------------------
/interview--incomplete/src/containers/PropertyList.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Form from '../components/Form'
 3 | 
 4 | import '../css.scss'
 5 | import PropertyLI from '../components/PropertyLI'
 6 | 
 7 | export default class PropertyList extends React.Component {
 8 |   constructor (props) {
 9 |     super(props)
10 |     this.state = {
11 |       properties: []
12 |     }
13 |   }
14 | 
15 |   render () {
16 |     return (
17 |       <Form className={this.props.className} style={this.props.style} heading='Properties' >
18 |         { this.props.properties.map((property, i) =>
19 |           <PropertyLI key={i} property={property} />
20 |         )}
21 |       </Form>
22 |     )
23 |   }
24 | };
25 | 
26 | PropertyList.propTypes = {
27 |   properties: React.PropTypes.array,
28 |   className: React.PropTypes.string
29 | }
30 | 
31 | PropertyList.defaultProps = {
32 |   properties: [],
33 |   className: ''
34 | }
35 | 


--------------------------------------------------------------------------------
/interview--incomplete/src/css.scss:
--------------------------------------------------------------------------------
  1 | body {
  2 |   margin: 0;
  3 | }
  4 | 
  5 | // SASS
  6 | $primary: #2c80b8;
  7 | $secondary: #5cb85c;
  8 | 
  9 | // App.js
 10 | .app__wrapper {
 11 |   display: block;
 12 |   margin: auto;
 13 |   padding: 1rem;
 14 | }
 15 | 
 16 | // PropertyLI.js
 17 | .propertyListItem__wrapper {
 18 |   width: 100%;
 19 |   height: 4rem;
 20 |   line-height: 4rem;
 21 |   font-size: 1rem;
 22 |   display: flex;
 23 |   flex-wrap: nowrap;
 24 |   flex-direction: row;
 25 |   justify-content: flex-start;
 26 |   text-align: center;
 27 |   cursor: pointer;
 28 |   font-weight: 700;
 29 |   margin-top: 9px;
 30 |   background-color: #EEE;
 31 |   &:hover {
 32 |     background-color: #CCC;
 33 |   }
 34 | }
 35 | .propertyListItem__address {
 36 |   width: 45%;
 37 |   white-space: nowrap;
 38 |   text-overflow: ellipsis;
 39 |   overflow: hidden;
 40 |   height: 100%;
 41 | }
 42 | .propertyListItem__state {
 43 |   @extend .propertyListItem__address;
 44 |   width: 35%;
 45 | }
 46 | .propertyListItem__zip {
 47 |   @extend .propertyListItem__address;
 48 |   width: 20%;
 49 | }
 50 | // Button.js
 51 | .button {
 52 | 	cursor: pointer;
 53 | 	width: 9.06rem;
 54 | 	height: 3.6rem;
 55 | 	font-weight: 900;
 56 | 	line-height: 3.6rem;
 57 | 	font-size: 1.15rem;
 58 | 	text-align: center;
 59 | 	position: relative;
 60 | 	border-bottom: 3px;
 61 | 	border-right: 2px;
 62 | 	border-top: 1px;
 63 | 	border-left: 1px;
 64 | 	border-style: solid;
 65 | 	background-color: #DDD;
 66 | 	border-color: #CCC;
 67 | }
 68 | .button__primary {
 69 | 	@extend .button;
 70 | 	color: white;
 71 | 	background-color: $primary;
 72 | 	border-color: #1976D2;
 73 | }
 74 | .button__success {
 75 | 	@extend .button;
 76 | 	color: white;
 77 | 	background-color: $secondary;
 78 | 	border-color: #2bbe69;
 79 | }
 80 | .button__warning {
 81 | 	@extend .button;
 82 | 	color: white;
 83 | 	background-color: #e74c3c;
 84 | 	border-color: #E43825;
 85 | }
 86 | .button__flatPrimary {
 87 | 	@extend .button;
 88 | 	background-color: transparent;
 89 | 	color: $primary;
 90 | 	border: none;
 91 | 	&:hover {
 92 | 		background-color: #DDD;
 93 | 	}
 94 | }
 95 | .button__flatSuccess {
 96 | 	@extend .button;
 97 | 	background-color: transparent;
 98 | 	color: $secondary;
 99 | 	border: none;
100 | 	&:hover {
101 | 		background-color: #DDD;
102 | 	}
103 | }
104 | .button__flatWarning {
105 | 	@extend .button;
106 | 	background-color: transparent;
107 | 	color: #e74c3c;
108 | 	border: none;
109 | 	&:hover {
110 | 		background-color: #DDD;
111 | 	}
112 | }
113 | .button__file {
114 | 	@extend .button;
115 | 	background-color: #f39c12;
116 | 	border: none;
117 | }
118 | 
119 | // Input.js
120 | .input__wrapper {
121 | 	height: 6.6rem;
122 | 	padding: 0px 1rem;
123 | 	position: relative;
124 | 	display: inline-block;
125 | }
126 | .inputLG__wrapper {
127 | 	@extend .input__wrapper;
128 | 	height: auto;
129 | }
130 | .input {
131 | 	width: 100%;
132 | 	border: 2px solid #b3b3b3;
133 | 	border-radius: 4px;
134 | 	height: 3.73rem;
135 | 	margin-top: 1.73rem;
136 | 	outline: 0;
137 | 	transition: all 200ms ease-out;
138 | 	position: relative;
139 | 	font-size: 1.2rem;
140 | 	font-weight: 500;
141 | 	padding: 2px 9px;
142 | 	box-shadow: inset 0px 0px 2px 1px #dddddd;
143 | 	&:focus {
144 | 		border: 3px solid $primary;
145 | 	}
146 | 	&:focus + .input__placeholder {
147 | 		top: 0px;
148 | 		color: $primary;
149 | 	}
150 | 	&LG {
151 | 		@extend .input;
152 | 		height: 7.46rem;
153 | 	}
154 | }
155 | .input__file {
156 | 	@extend .input;
157 | 	border: none;
158 | 	padding: 1rem;
159 | 	box-shadow: none;
160 | 	&:hover {
161 | 		border: none;
162 | 	}
163 | }
164 | .input__placeholder {
165 | 	position: absolute;
166 | 	transition: all 200ms linear;
167 | 	font-weight: 700;
168 | 	font-size: 1.2rem;
169 | 	pointer-events: none;
170 | 	left: 1.8rem;
171 | 	top: 2.75rem;
172 | 	color: #707070;
173 | }
174 | .input__placeholder--datain {
175 | 	top: 0;
176 | }
177 | 
178 | //Form.js
179 | .form {
180 | 	width: 100%;
181 | 	padding: 9px;
182 | 	background-color: white;
183 | 	border-radius: 4px;
184 | 	box-shadow: 0px 1px 4px 1px rgba(0,0,0,0.3);
185 | 	display: inline-flex;
186 | 	flex-direction: row;
187 | 	justify-content: center;
188 | 	flex-wrap: wrap;
189 |   	height: auto;
190 | }
191 | .form__heading {
192 | 	width: 100%;
193 | 	height: 1.9rem;
194 | 	font-size: 1.8rem;
195 | 	position: relative;
196 | 	color: $secondary;
197 | 	font-weight: 800;
198 | 	margin-bottom: 1rem;
199 | 	text-align: center;
200 | }
201 | 
202 | .break {
203 | 	margin-bottom: 0;
204 | 	margin-top: 5px;
205 | 	height: 2px;
206 | 	width: 100%;
207 | 	border: 0;
208 | 	background-image: linear-gradient(to right, rgba(200, 200, 200, .1), rgba(200, 200, 200, 0.75), rgba(200, 200, 200, .1));
209 | }
210 | 
211 | html {
212 | 	font-family: 'Open Sans', sans-serif;
213 | }
214 | 
215 | * {
216 |   -moz-box-sizing: border-box;
217 |   -webkit-box-sizing: border-box;
218 |   box-sizing: border-box;
219 | }
220 | 
221 | @media screen and (max-width: 500px){
222 |   html{
223 |     font-size: 8px;
224 |   }
225 | }
226 | 
227 | @media screen and (min-width: 500px){
228 |   html{
229 |     font-size: 9px;
230 |   }
231 | }
232 | @media screen and (min-width: 570px){
233 |   html{
234 |     font-size: 10px;
235 |   }
236 | }
237 | @media screen and (min-width: 620px){
238 |   html{
239 |     font-size: 11px;
240 |   }
241 | }
242 | @media screen and (min-width: 680px){
243 |   html{
244 |     font-size: 12px;
245 |   }
246 | }
247 | @media screen and (min-width: 720px){
248 |   html{
249 |     font-size: 13px;
250 |   }
251 | }
252 | @media screen and (min-width: 800px){
253 |   html{
254 |     font-size: 14px;
255 |   }
256 | }
257 | @media screen and (min-width: 860px){
258 |   html{
259 |     font-size: 15px;
260 |   }
261 | }
262 | @media screen and (min-width: 920px){
263 |   html{
264 |     font-size: 16px;
265 |   }
266 | }
267 | @media screen and (min-width: 992px){
268 |   html{
269 |     font-size: 11px;
270 |   }
271 | }
272 | @media screen and (min-width: 1140px){
273 |   html{
274 |     font-size: 13px;
275 |   }
276 | }
277 | @media screen and (min-width: 1280px){
278 |   html{
279 |     font-size: 15px;
280 |   }
281 | }
282 | @media screen and (min-width: 1420px){
283 |   html{
284 |     font-size: 17px;
285 |   }
286 | }


--------------------------------------------------------------------------------
/interview--incomplete/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { render } from 'react-dom'
 3 | 
 4 | import App from './containers/App'
 5 | 
 6 | render(
 7 |   <App />,
 8 |   document.getElementById('root')
 9 | )
10 | 


--------------------------------------------------------------------------------
/interview--incomplete/webpack.config.babel.js:
--------------------------------------------------------------------------------
 1 | import webpack from 'webpack'
 2 | import path from 'path'
 3 | 
 4 | module.exports = {
 5 |   entry: ['./src/index.js'],
 6 |   output: {
 7 |     publicPath: '/assets/',
 8 |     path: path.resolve(__dirname, 'assets/build'),
 9 |     filename: 'app.js'
10 |   },
11 |   devtool: '#source-map',
12 |   plugins: [
13 |     new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false })
14 |   ],
15 |   module: {
16 |     rules: [
17 |       {
18 |         test: /\.js?$/, // if js file then use this loader
19 |         exclude: /(node_modules|bower_components)/,
20 |         loaders: ['babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-2']
21 |       },
22 |       {
23 |         test: /\.scss$/,
24 |         use: ['style-loader', 'css-loader', 'sass-loader']
25 |       }
26 |     ]
27 |   },
28 |   devServer: {
29 |     historyApiFallback: true,
30 |     contentBase: path.join(__dirname, 'assets'),
31 |     inline: true
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------