diff --git a/README.md b/README.md
index ca60fdfd69..c758075ac6 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,9 @@
 
 Interested in learning [Redux](https://www.udemy.com/react-redux/)?
 
+### OutPut
+(https://github.com/vinay72/ReduxSimpleStarter/blob/master/v2.png)
+
 ### Getting Started
 
 There are two methods for getting started with this repo.
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..411777e979
--- /dev/null
+++ b/src/components/search_bar.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+
+class SearchBar extends Component {
+   
+   constructor(props) {
+   	super(props);
+
+   	this.state = { term : ''};
+   }
+render(){
+		return(
+			<div className="search-bar">
+			 <input
+			  value = {this.state.term}
+		      onChange={event => this.onInputChange(event.target.value) }/>
+		    </div>
+		);
+	}
+
+
+	onInputChange(term){
+      this.setState({term});
+      this.props.onSearchTermChange(term);
+	}
+
+}	
+export default SearchBar;
diff --git a/src/components/video_detail.js b/src/components/video_detail.js
new file mode 100644
index 0000000000..6ec25aa474
--- /dev/null
+++ b/src/components/video_detail.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+const VideoDetail = ({video}) => {
+  if(!video){
+		return <div>Loading...</div>;
+	}
+
+  const videoId = video.id.videoId;
+  const url = `https://www.youtube.com/embed/${videoId}`;
+
+   return(
+   	<div className = "video-detail col-md-8">
+   	    <div className = "embed-responsive embed-responsive-16by9">
+   	     <iframe className = "embed-responsive-item" src={url}></iframe>
+   	    </div>
+   	 <div className = "details">
+   	    <div>{video.snippet.title}</div>
+   	    <div>{video.snippet.description}</div>
+   	  </div>
+   	</div>
+   	)
+};
+
+export default VideoDetail;
diff --git a/src/components/video_list.js b/src/components/video_list.js
new file mode 100644
index 0000000000..91d99e9d9f
--- /dev/null
+++ b/src/components/video_list.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import VideoListItem from './video_list_item'; 
+
+const VideoList = (props) => {
+   const videoItems = props.videos.map((video) => {
+   	return (
+   	<VideoListItem 
+   	onVideoSelect={props.onVideoSelect}
+   	key={video.etag} 
+   	video={video} />
+   	):
+   });
+   });
+
+   return(
+     <ul className="col-md-4 list-group">
+       {videoItems}
+     </ul>
+   	);
+};
+
+export default VideoList; 
diff --git a/src/components/video_list_item.js b/src/components/video_list_item.js
new file mode 100644
index 0000000000..e9135c061c
--- /dev/null
+++ b/src/components/video_list_item.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const VideoListItem = ({video}) => {
+	const imageUrl = video.snippet.thumbnails.default.url;
+	return(
+	<li onClick={() => onVideoSelect(video)} className="list-group-item">
+	   <div className="video-list media">
+	   <div className="media-left">
+	   <img className="media-object" src={imageUrl}/>
+	   </div>
+       <div className="meida-body">
+	    <div className="media-heading">
+	    {video.snippet.title}
+	    </div>
+	   </div>
+	   </div>
+	 </li>
+	);
+};
+
+export default VideoListItem;
diff --git a/src/index.js b/src/index.js
index 69d577acd1..3bc6da294a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,15 +1,53 @@
-import React from 'react';
+import _ from 'lodash';
+import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import { Provider } from 'react-redux';
-import { createStore, applyMiddleware } from 'redux';
+import SearchBar from './components/search_bar';
+import YTSearch from 'youtube-api-search';
+import VideoList from './components/video_list';
+import VideoDetail from './components/video_detail';
+const API_KEY = 'AIzaSyBZO62YgvAL3d0JIJnT5VQssG_jWV-94sg';
 
-import App from './components/app';
-import reducers from './reducers';
+// Create a new Component. This component should produce 
+// some HTML
 
-const createStoreWithMiddleware = applyMiddleware()(createStore);
+class App extends Component {
 
-ReactDOM.render(
-  <Provider store={createStoreWithMiddleware(reducers)}>
-    <App />
-  </Provider>
-  , document.querySelector('.container'));
+    constructor(props){
+     super(props);
+
+     this.state = { 
+     	videos:[],
+     	selectedVideo: null
+      };
+
+        this.videoSearch('steve jobs');
+    }
+
+    videoSearch(term) {
+
+     YTSearch({key: API_KEY, term: term}, (videos) => {
+          this.setState({ 
+          	videos: videos,
+          	selectedVideo: videos[0]
+          });
+          //this.setState({ videos: videos});
+        });
+    }
+
+
+	render() {
+		const videoSearch = _.debounce((term) => {this.videoSearch(term), 300 } )
+	 return (
+	    <div>
+	      <SearchBar onSearchTermChange={videoSearch}/>
+	      <VideoDetail video={this.state.selectedVideo}  />
+	      <VideoList 
+          onVideoSelect={selectedVideo => this.setState({selectedVideo})}
+	      videos={this.state.videos} />
+	    </div>
+     );	
+    }
+}
+
+
+ReactDOM.render(<App />, document.querySelector('.container'));
diff --git a/style/style.css b/style/style.css
index e69de29bb2..77ebf619a6 100644
--- a/style/style.css
+++ b/style/style.css
@@ -0,0 +1,22 @@
+.search-bar{
+	margin: 20px;
+	text-align: center;
+}
+.search-bar input{
+	width: 75%;
+}
+.video-itm img{
+   max-width: 64px;
+}
+.video-detail .details{
+	margin-top: 10px;
+	padding: 10px;
+	border: 1px solid #ddd;
+	border-radius: 4px;
+}
+.list-group-item{
+	cursor:pointer;
+}
+.list-group-item:hover{
+	background-color: #eee;
+}
diff --git a/v1.png b/v1.png
new file mode 100644
index 0000000000..af1556578f
Binary files /dev/null and b/v1.png differ
diff --git a/v2.png b/v2.png
new file mode 100644
index 0000000000..04715096f4
Binary files /dev/null and b/v2.png differ