diff --git a/comments.json b/comments.json
index 7bef77ad..b99a5891 100644
--- a/comments.json
+++ b/comments.json
@@ -1,12 +1,22 @@
 [
     {
         "id": 1388534400000,
-        "author": "Pete Hunt",
-        "text": "Hey there!"
+        "author": "Greg",
+        "text": "I'm trying to learn React"
     },
     {
         "id": 1420070400000,
-        "author": "Paul O’Shannessy",
-        "text": "React is *great*!"
+        "author": "Gregbot",
+        "text": "here to serve, master."
+    },
+    {
+        "id": 1470456700000,
+        "author": "Gregbot",
+        "text": "new comment for you, master."
+    },
+    {
+        "id": 1462288513665,
+        "author": "Gregbot",
+        "text": "psoting something"
     }
-]
+]
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 34ebddf4..4255d3e6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,10 +13,7 @@
   </head>
   <body>
     <div id="content"></div>
-    <script type="text/babel" src="scripts/example.js"></script>
-    <script type="text/babel">
-      // To get started with this tutorial running your own code, simply remove
-      // the script tag loading scripts/example.js and start writing code here.
-    </script>
+    <script type="text/babel" src="scripts/myexample.js"></script>
+
   </body>
 </html>
diff --git a/public/scripts/myexample.js b/public/scripts/myexample.js
new file mode 100644
index 00000000..1e9d8906
--- /dev/null
+++ b/public/scripts/myexample.js
@@ -0,0 +1,130 @@
+var CommentBox = React.createClass({
+    getInitialState: function () {
+      return {data: []};  
+    },
+    loadCommentsFromServer: function () {
+        $.ajax({
+            url: this.props.url,
+            dataType: 'json',
+            cache: false,
+            success: function(data) {
+                this.setState({data: data});
+            }.bind(this),
+            error: function(xhr, status, err) {
+                console.error(this.props.url, status, err.toString());
+            }.bind(this)
+        });
+    },
+    componentDidMount: function () {
+        this.loadCommentsFromServer();
+        setInterval(this.loadCommentsFromServer, this.props.pollInterval);  
+    },
+    handleCommentSubmit: function(comment) {
+        var comments = this.state.data;
+        comment.id = Date.now();
+        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) {
+                this.setState({data: comments});
+                console.error(this.props.url, status, err.toString());
+            }.bind(this)
+       });
+    },
+    render: function() {
+        return (
+          <div className="commentBox">
+            <h1>Comments</h1>
+            <CommentList data={this.state.data} />
+            <CommentForm onCommentSubmit={this.handleCommentSubmit} />
+          </div>  
+        );
+    }
+});
+
+var CommentList = React.createClass({
+   render: function () {
+       var commentNodes = this.props.data.map( function (comment) {
+           return (
+                <Comment author={comment.author} key={comment.id}>
+                    {comment.text}
+                </Comment>
+            );
+       });
+       return (
+           <div className="commentList">
+                {commentNodes}
+           </div>
+       );
+   } 
+});
+
+var CommentForm = React.createClass({
+    getInitialState: function() {
+        return {author: '', text: ''};
+    },
+    handleAuthorChange: function(e) {
+        this.setState({author: e.target.value});
+    },
+    handleTextChange: function(e) {
+        this.setState({text: e.target.value});
+    },
+    handleSubmit: function(e) {
+        e.preventDefault();
+        var author = this.state.author.trim();
+        var text = this.state.text.trim();
+        if (!text || !author) {
+            return;
+        }
+        this.props.onCommentSubmit({author: author, text: text});
+        this.setState({author: '', text: ''});
+    },
+    render: function () {
+        return (
+            <form className="commentForm" onSubmit={this.handleSubmit}>
+                <input type="text"
+                placeholder="Your name"
+                value={this.state.author}
+                onChange={this.handleAuthorChange}
+                />
+                <input
+                type="text"
+                placeholder="Say something..."
+                value={this.state.text}
+                onChange={this.handleTextChange}
+                />
+                <input type="submit" value="Post" />
+            </form>
+        );
+    }
+});
+
+var Comment = React.createClass({
+    render: function () {
+        return (
+            <div className="comment">
+                <h2 className="commentAuthor">
+                    {this.props.author}
+                </h2>
+                {this.props.children}
+            </div>
+        );
+    }
+});
+
+var mockData = [
+    {id: 1, author: "Greg Ostrowski", text: "I'm trying to learn React"},
+    {id: 2, author: "Greg Bot", text: "I'm a bot"}
+]
+
+ReactDOM.render(
+    <CommentBox url="/api/comments" pollInterval={2000} />,
+    document.getElementById('content')  
+);
\ No newline at end of file
