diff --git a/package.json b/package.json
index f6c26e7b66..72bc3fc176 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "react": "16.3.2",
     "react-dom": "16.3.2",
     "react-redux": "5.0.7",
-    "redux": "4.0.0"
+    "redux": "4.0.0",
+    "youtube-api-search": "0.0.5"
   }
 }
diff --git a/src/components/app.js b/src/components/app.js
deleted file mode 100644
index 58614b02cf..0000000000
--- a/src/components/app.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React, { Component } from 'react';
-
-export default class App extends Component {
-  render() {
-    return (
-      <div>React simple starter</div>
-    );
-  }
-}
diff --git a/src/components/search_bar.js b/src/components/search_bar.js
new file mode 100644
index 0000000000..4bdef30796
--- /dev/null
+++ b/src/components/search_bar.js
@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+
+class SearchBar extends Component{
+  constructor(props){
+    super(props);
+
+    this.state = {term: ' '};
+  }
+  render(){
+    return <input onChange ={event => console.log(event.target.value)}/>;
+  }
+}
+
+export default SearchBar;
diff --git a/src/actions/index.js b/src/components/video_detail.js
similarity index 100%
rename from src/actions/index.js
rename to src/components/video_detail.js
diff --git a/src/components/video_list.js b/src/components/video_list.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/components/video_list_item.js b/src/components/video_list_item.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/index.js b/src/index.js
index 69d577acd1..b53cf14416 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,15 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Provider } from 'react-redux';
-import { createStore, applyMiddleware } from 'redux';
+import SearchBar from './components/search_bar';
+const API_KEY = 'AIzaSyA2kDKEdWA-jIcAbxi9S8Ugt6-yryKWWy4';
 
-import App from './components/app';
-import reducers from './reducers';
+// Create a new component. This component should produce
+// some HTML
+const App = () => {
+  return (
+    <div>
+      <SearchBar />
+    </div>
+  );
+}
 
-const createStoreWithMiddleware = applyMiddleware()(createStore);
-
-ReactDOM.render(
-  <Provider store={createStoreWithMiddleware(reducers)}>
-    <App />
-  </Provider>
-  , document.querySelector('.container'));
+// Take this component's generated HTML and
+// put is on the page(in DOM)
+ReactDOM.render(<App />, document.querySelector('.container'));
diff --git a/src/reducers/index.js b/src/reducers/index.js
deleted file mode 100644
index d12506f382..0000000000
--- a/src/reducers/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { combineReducers } from 'redux';
-
-const rootReducer = combineReducers({
-  state: (state = {}) => state
-});
-
-export default rootReducer;