btholt · ZMcClung88 · Aug 3, 2017
diff --git a/index.html b/index.html
@@ -2,10 +2,11 @@
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
-	<title>svideo</title>
+	<title>zvideo</title>
+  <link rel="stylesheet" href="/public/style.css">
 </head>
 <body>
 	<div id="app"></div>
-	<script src="public/bundle.js"></script>
+	<script src="/public/bundle.js"></script>
 </body>
 </html>
diff --git a/js/ClientApp.jsx b/js/ClientApp.jsx
@@ -1,21 +1,21 @@
 import React from 'react';
 import { render } from 'react-dom';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import Landing from './Landing';
+import Search from './Search';
 
-const ce = React.createElement;
+const FourOhFour = () => <h1>404</h1>;
 
-const MyTitle = function(props) {
-  return ce('div', null, ce('h1', { style: { color: props.color } }, props.title));
-};
+const App = () => (
+  <BrowserRouter>
+    <div className="app">
+      <Switch>
+        <Route exact path="/" component={Landing} />
+        <Route path="/search" component={Search} />
+        <Route component={FourOhFour} />
+      </Switch>
+    </div>
+  </BrowserRouter>
+);
 
-const MyFirstComponent = function() {
-  return ce(
-    'div',
-    { id: 'my-first-component' },
-    ce(MyTitle, { title: 'Game of Thrones', color: 'YellowGreen' }),
-    ce(MyTitle, { title: 'Stranger Things', color: 'GreenYellow' }),
-    ce(MyTitle, { title: 'Rick and Morty', color: 'LimeGreen' }),
-    ce(MyTitle, { title: 'House of Cards', color: 'peru' })
-  );
-};
-
-render(ce(MyFirstComponent), document.getElementById('app'));
+render(<App />, document.getElementById('app'));
diff --git a/js/Landing.jsx b/js/Landing.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Landing = () => (
+  <div className='landing'>
+    <h1>zvideo</h1>
+    <input type='text' placeholder='Search' />
+    <Link to="/search">or Browse All</Link>
+  </div>
+);
+
+export default Landing;
diff --git a/js/Search.jsx b/js/Search.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import ShowCard from './ShowCard';
+import preload from '../data.json';
+
+
+const Search = () => (
+  <div className="search">
+    {preload.shows.map(show => <ShowCard show={show} />) }
+  </div>
+);
+
+export default Search;
diff --git a/js/ShowCard.jsx b/js/ShowCard.jsx
@@ -0,0 +1,14 @@
+import React from 'react'
+
+const ShowCard = props => (
+  <div className="show-card">
+    <img alt={`${props.show.title} Show Poster`} src={`/public/img/posters/${props.show.poster}`} />
+    <div>
+      <h3>{props.show.title}</h3>
+      <h4>({props.show.year})</h4>
+      <p>{props.show.description}</p>
+    </div>
+  </div>
+);
+
+export default ShowCard;
diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
   "scripts": {
     "api": "node ratingsAPI.js",
     "build": "webpack",
+    "dev": "webpack-dev-server",
     "format": "prettier --write --single-quote --print-width=120 --parser=flow --tab-width=2 \"js/**/*.{js,jsx}\"",
     "lint": "eslint **/*.{js,jsx} --quiet",
     "watch": "webpack --watch"

diff --git a/webpack.config.js b/webpack.config.js
@@ -6,22 +6,32 @@ module.exports = {
   devtool: 'cheap-eval-source-map',
   output: {
     path: path.join(__dirname, 'public'),
-    filename: 'bundle.js'
+    filename: 'bundle.js',
+  },
+  devServer: {
+    publicPath: '/public/',
+    historyApiFallback: true,
   },
   resolve: {
-    extensions: ['.js', '.jsx', '.json']
+    extensions: ['.js', '.jsx', '.json'],
   },
   stats: {
     colors: true,
     reasons: true,
-    chunks: true
+    chunks: true,
   },
   module: {
     rules: [
+      {
+        enforce: 'pre',
+        test: /\.jsx?$/,
+        loader: 'eslint-loader',
+        exclude: /node_modules/,
+      },
       {
         test: /\.jsx?$/,
-        loader: 'babel-loader'
-      }
-    ]
-  }
+        loader: 'babel-loader',
+      },
+    ],
+  },
 };