diff --git a/.gitignore b/.gitignore
index daeba5f9..61248aef 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 *~
 node_modules
 .DS_Store
+.idea
diff --git a/comments.json b/comments.json
index 61f5ef60..7759cde0 100644
--- a/comments.json
+++ b/comments.json
@@ -6,5 +6,21 @@
     {
         "author": "Paul O’Shannessy",
         "text": "React is *great*!"
+    },
+    {
+        "author": "Steve",
+        "text": "hello"
+    },
+    {
+        "author": "James",
+        "text": "test"
+    },
+    {
+        "author": "Fred",
+        "text": "test"
+    },
+    {
+        "author": "James",
+        "text": "Another Test"
     }
-]
+]
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index c6220169..487a589c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,16 +1,147 @@
 <!DOCTYPE html>
 <html>
-  <head>
+<head>
     <title>Hello React</title>
     <!-- Not present in the tutorial. Just for basic styling. -->
-    <link rel="stylesheet" href="css/base.css" />
+    <link rel="stylesheet" href="css/base.css"/>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
-  </head>
-  <body>
-    <div id="content"></div>
-    <script type="text/jsx;harmony=true" src="scripts/example.js"></script>
-  </body>
+</head>
+<body>
+<div id="content"></div>
+<script type="text/jsx">
+
+
+    var data = [
+        {author: "Pete Hunt", text: "This is one comment"},
+        {author: "Jordan Walke", text: "This is *another* comment"}
+    ];
+
+    var Comment = React.createClass({
+
+        render: function() {
+            var rawMarkup = marked(this.props.children.toString(), {sanitize:true});
+            return (
+                <div class="comment">
+                    <h2 class="commentAuthor">
+                        {this.props.author}
+                    </h2>
+                   <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
+                </div>
+            );
+        }
+    });
+
+    var CommentList = React.createClass({
+        render: function(){
+
+            var commentNodes = this.props.data.map(function(comment) {
+                return (
+                    <Comment author={comment.author}>
+                        {comment.text}
+                    </Comment>
+                );
+            });
+
+            return (
+                <div className="commentList">
+                    {commentNodes}
+                </div>
+            );
+        }
+    });
+
+    var CommentForm = React.createClass({
+
+        handleSubmit: function(event) {
+            event.preventDefault();
+            var author = React.findDOMNode(this.refs.author).value.trim();
+            var text = React.findDOMNode(this.refs.text).value.trim();
+            if(!text|!author) {
+                return;
+            }
+            this.props.onCommentSubmit({author: author, text: text});
+            React.findDOMNode(this.refs.author).value = '';
+            React.findDOMNode(this.refs.text).value = '';
+            return;
+        },
+
+        render: function(){
+            return (
+                <form class="commentForm" onSubmit={this.handleSubmit}>
+                    <input type="text" placeholder="Your Name" ref="author" />
+                    <input type="text" placeholder="Your comment..." ref="text" />
+                    <input type="submit" value="Post" />
+                </form>
+            );
+        }
+    });
+
+    var CommentBox = React.createClass({
+
+        loadCommentsFromServer: function() {
+            $.ajax({
+                url: this.props.url,
+                dataType: 'json',
+                cache: false,
+                success: function(data) {
+                    this.setState({data: data});
+                }.bind(this),
+                error: function(xhr, status, error) {
+                    console.log(this.props.url, status, error.toString());
+                }.bind(this)
+            });
+        },
+
+        handleCommentSubmit: function(comment) {
+
+            var comments = this.state.data;
+            var newComments = comments.concat([comment]);
+
+            this.setState({data: newComments});
+
+            $.ajax({
+                url: this.props.url,
+                dataType: 'json',
+                type: 'POST',
+                data: comment,
+                success: function(data) {
+                    this.setState({data: data});
+                }.bind(this),
+                error: function(xhr, status, err) {
+                    console.log(this.props.url, status, err.toString());
+                }.bind(this)
+            });
+        },
+
+        getInitialState: function() {
+            return {data: []};
+        },
+
+        componentDidMount: function() {
+            this.loadCommentsFromServer();
+            setInterval(this.loadCommentsFromServer, this.props.pollInterval);
+
+        },
+
+        render: function(){
+            return (
+                <div class="commentBox">
+                    <h1>Comments</h1>
+                    <CommentList data={this.state.data} />
+                    <CommentForm onCommentSubmit={this.handleCommentSubmit}/>
+                </div>
+            );
+        }
+    });
+
+    React.render(
+        <CommentBox url='comments.json' pollInterval={2000}/>,
+        document.getElementById('content')
+    );
+
+</script>
+</body>
 </html>
