Start

.babelrc

@@ -1,14 +1,15 @@
 {
   "presets": [
     "react",
-    ["es2015", {modules: false, loose: true}]
+    ["env", {
+      "targets": {
+        "browsers": "last 2 versions"
+      },
+      "loose": true,
+      "modules": false
+    }]
   ],
-  "env": {
-    "server": {
-      "plugins": ["transform-es2015-modules-commonjs"]
-    },
-    "test": {
-      "plugins": ["transform-es2015-modules-commonjs"]
-    }
-  }
-}
+  "plugins": [
+  "babel-plugin-transform-class-properties"
+  ]
+}

.eslintignore

@@ -0,0 +1,2 @@
+node_modules/
+public/

.eslintrc.json

@@ -1,3 +1,17 @@
 {
-  "extends": ["standard", "standard-react"]
-}
+  "extends": ["airbnb", "prettier", "prettier/react"],
+  "plugins": ["prettier"],
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 2016,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true
+  }
+}

data.json

@@ -0,0 +1,124 @@
+{
+    "shows": [
+        {
+            "title": "Atlanta",
+            "year": "2008–2013",
+            "description": "Two cousins, with different views on art versus commerce, on their way up through the Atlanta rap scene; \"Earnest 'Earn' Marks,\" an ambitious college drop-out and his estranged cousin, who suddenly becomes a star.",
+            "poster": "a.jpg",
+            "imdbID": "tt4288182",
+            "trailer": "MpEdJ-mmTlY"
+        },
+        {
+            "title": "Billions",
+            "year": "2016–",
+            "description": "U.S. Attorney Chuck Rhoades goes after hedge fund king, Bobby \"Axe\" Axelrod in a battle between two powerful New York figures.",
+            "poster": "b.jpg",
+            "imdbID": "tt4270492",
+            "trailer": "_raEUMLL-ZI"
+        },
+        {
+            "title": "Black Mirror",
+            "year": "2011–",
+            "description": "A television anthology series that shows the dark side of life and technology.",
+            "poster": "bm.jpg",
+            "imdbID": "tt2085059",
+            "trailer": "jDiYGjp5iFg"
+        },
+        {
+            "title": "Breaking Bad",
+            "year": "2008–2013",
+            "description": "A high school chemistry teacher diagnosed with inoperable lung cancer turns to manufacturing and selling methamphetamine in order to secure his family's future.",
+            "poster": "bb.jpg",
+            "imdbID": "tt0903747",
+            "trailer": "XZ8daibM3AE"
+        },
+        {
+            "title": "Game of Thrones",
+            "year": "2011–",
+            "description": "Nine noble families fight for control over the mythical lands of Westeros, while a forgotten race returns after being dormant for thousands of years.",
+            "poster": "got.jpg",
+            "imdbID": "tt0944947",
+            "trailer": "giYeaKsXnsI"
+        },
+        {
+            "title": "Homeland",
+            "year": "2011–",
+            "description": "A bipolar CIA operative becomes convinced a prisoner of war has been turned by al-Qaeda and is planning to carry out a terrorist attack on American soil.",
+            "poster": "h.jpg",
+            "imdbID": "tt1796960",
+            "trailer": "KyFmS3wRPCQ"
+        },
+        {
+            "title": "House of Cards",
+            "year": "2013–",
+            "description": "A Congressman works with his equally conniving wife to exact revenge on the people who betrayed him.",
+            "poster": "hoc.jpg",
+            "imdbID": "tt1856010",
+            "trailer": "NTzycsqxYJ0"
+        },
+        {
+            "title": "Master of None",
+            "year": "2015–",
+            "description": "The personal and professional life of Dev, a 30-year-old actor in New York.",
+            "poster": "mon.jpg",
+            "imdbID": "tt4635276",
+            "trailer": "6bFvb3WKISk"
+        },
+        {
+            "title": "Narcos",
+            "year": "2015–",
+            "description": "A chronicled look at the criminal exploits of Colombian drug lord Pablo Escobar.",
+            "poster": "n.jpg",
+            "imdbID": "tt2707408",
+            "trailer": "U7elNhHwgBU"
+        },
+        {
+            "title": "Orange Is the New Black",
+            "year": "2013–",
+            "description": "The story of Piper Chapman, a woman in her thirties who is sentenced to fifteen months in prison after being convicted of a decade-old crime of transporting money for her drug-dealing girlfriend.",
+            "poster": "oitnb.jpg",
+            "imdbID": "tt2372162",
+            "trailer": "th8WT_pxGqg"
+        },
+        {
+            "title": "Silicon Valley",
+            "year": "2014–",
+            "description": "Follows the struggle of Richard Hendricks, a silicon valley engineer trying to build his own company called Pied Piper.",
+            "poster": "sv.jpg",
+            "imdbID": "tt2575988",
+            "trailer": "69V__a49xtw"
+        },
+        {
+            "title": "Stranger Things",
+            "year": "2016–",
+            "description": "When a young boy disappears, his mother, a police chief, and his friends must confront terrifying forces in order to get him back.",
+            "poster": "st.jpg",
+            "imdbID": "tt4574334",
+            "trailer": "9Egf5U8xLo8"
+        },
+        {
+            "title": "The Americans",
+            "year": "2013–",
+            "description": "Two Soviet intelligence agents pose as a married couple to spy on the American government.",
+            "poster": "ta.jpg",
+            "imdbID": "tt2149175",
+            "trailer": "HjuUkbhsI24"
+        },
+        {
+            "title": "Veep",
+            "year": "2012–",
+            "description": "Former Senator Selina Meyer finds that being Vice President of the United States is nothing like she hoped and everything that everyone ever warned her about.",
+            "poster": "v.jpg",
+            "imdbID": "tt1759761",
+            "trailer": "I2HoCG_iyhU"
+        },
+        {
+            "title": "Westworld",
+            "year": "2016–",
+            "description": "Set at the intersection of the near future and the reimagined past, explore a world in which every human appetite, no matter how noble or depraved, can be indulged without consequence.",
+            "poster": "ww.jpg",
+            "imdbID": "tt0475784",
+            "trailer": "eX3u0IlBBO4"
+        }
+    ]
+}

index.html

@@ -1,13 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <title>Vidflix</title>
-  <link rel="stylesheet" href="/public/normalize.css" />
-  <link rel="stylesheet" href="/public/style.css" />
+    <meta charset="UTF-8">
+    <title>svideo</title>
+    <link rel="stylesheet" href="/public/style.css">
 </head>
 <body>
-  <div id="app"><%= body %></div>
-  <script src="/public/bundle.js"></script>
+    <div id="app"></div>
+    <script src="/public/bundle.js"></script>
 </body>
-</html>
+</html>

js/ClientApp.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { render } from 'react-dom';
+import { BrowserRouter, Route } from 'react-router-dom';
+import Landing from './Landing';
+import Search from './Search';
+
+const App = () =>
+	<BrowserRouter>
+		<div className="app">
+			<Route exact path="/" component={Landing} />
+			<Route path="/search" component={Search} />
+		</div>
+	</BrowserRouter>;
+render(<App />, document.getElementById('app'));
+
+//  check out <Switch> interesting
+
+// first version
+// const ce = React.createElement;
+
+// const MyTitle = function(props) {
+// 	return ce('div', null, ce('h1', { style: { color: props.color } }, props.title));
+// };
+
+// const MyFirstComponent = function() {
+// 	return ce(
+// 		'div',
+// 		{ id: 'my-first-component' },
+// 		ce(MyTitle, { color: 'rebeccapurple', title: 'House of Cards' }),
+// 		ce(MyTitle, { color: 'peru', title: 'Orange is the New Black' }),
+// 		ce(MyTitle, { color: 'burlywood', title: 'Stranger Things' }),
+// 		ce(MyTitle, { color: 'lime', title: 'Silicon Valleys' })
+// 	);
+// };
+
+// same lake bevor but other code
+
+// const MyTitle = function(props) {
+// 	return (
+// 		<div>
+// 			<h1 style={{ color: props.color }}>
+// 				{props.title}
+// 			</h1>
+// 		</div>
+// 	);
+// };
+
+// const MyFirstComponent = function() {
+// 	return (
+// 		<div id="my-first-component">
+// 			<MyTitle title="House of Cards" color="rebeccapurple" />
+// 			<MyTitle title="Orange is the New Black" color="peru" />
+// 			<MyTitle title="Stranger Things" color="burlywood" />
+// 			<MyTitle title="Silicon Valley" color="lime" />
+// 		</div>
+// 	);
+// };
+
+// render(ce(MyFirstComponent), document.getElementById('app'));
+// render(<MyFirstComponent />, document.getElementById('app'));