diff --git a/Gruntfile.js b/Gruntfile.js
index 5c03155..b9dc668 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -1,7 +1,7 @@
 module.exports = function(grunt) {
 
     var options = {
-        port: 8080
+        port: 8888
     };
 
     grunt.initConfig({
diff --git a/index.html b/index.html
index a730828..28d9fb5 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>ReactJS + RefluxJS • TodoMVC</title>
-    <link rel="stylesheet" href="bower_components/todomvc-app-css/index.css">
+    <link rel="stylesheet" href="app/bower_components/todomvc-app-css/index.css">
     <!-- CSS overrides - remove if you don't need it -->
     <link rel="stylesheet" href="css/app.css">
 </head>
@@ -22,13 +22,17 @@
     </footer>
     <!-- Scripts here. Don't remove this ↓ -->
     <!-- <script src="bower_components/todomvc-common/base.js"></script> -->
-    <script src="bower_components/react/react-with-addons.js"></script>
-    <script src="bower_components/react-router/dist/react-router.js"></script>
-    <script src="bower_components/react/JSXTransformer.js"></script>
-    <script src="bower_components/lodash/lodash.js"></script>
-    <script src="bower_components/reflux/dist/reflux.js"></script>
+    <script src="app/bower_components/react/react-with-addons.js"></script>
+    <script src="app/bower_components/react-router/dist/react-router.js"></script>
+    <script src="app/bower_components/react/JSXTransformer.js"></script>
+    <script src="app/bower_components/lodash/lodash.js"></script>
+    <script src="app/bower_components/reflux/dist/reflux.js"></script>
     <script src="js/actions.js"></script>
     <script src="js/store.js"></script>
-    <script type="text/jsx" src="js/components.jsx.js"></script>
-</body>
+    <script type="text/jsx" src="js/TodoHeader.jsx.js"></script>
+    <script type="text/jsx" src="js/TodoFooter.jsx.js"></script>
+    <script type="text/jsx" src="js/TodoItem.jsx.js"></script>
+    <script type="text/jsx" src="js/TodoList.jsx.js"></script>
+    <script type="text/jsx" src="js/TodoApp.jsx.js"></script></body>
+    <script type="text/jsx" src="js/router.js"></script>
 </html>
diff --git a/js/TodoApp.jsx.js b/js/TodoApp.jsx.js
new file mode 100644
index 0000000..49e0eb8
--- /dev/null
+++ b/js/TodoApp.jsx.js
@@ -0,0 +1,19 @@
+(function(React, ReactRouter, Reflux, TodoHeader, TodoFooter, todoListStore, global) {
+    // Renders the full application
+    // RouteHandler will always be TodoList, but with different 'showing' prop (all/completed/active)
+    global.TodoApp = React.createClass({
+        // this will cause setState({list:updatedlist}) whenever the store does trigger(updatedlist)
+        mixins: [Reflux.connect(todoListStore,"list")],
+
+        render: function() {
+            return (
+                <div>
+                    <TodoHeader />
+                    <ReactRouter.RouteHandler list={this.state.list} />
+                    <TodoFooter list={this.state.list} />
+                </div>
+            );
+        }
+    });
+
+})(window.React, window.ReactRouter, window.Reflux,window.TodoHeader, window.TodoFooter, window.todoListStore, window);
\ No newline at end of file
diff --git a/js/TodoFooter.jsx.js b/js/TodoFooter.jsx.js
new file mode 100644
index 0000000..5e0286e
--- /dev/null
+++ b/js/TodoFooter.jsx.js
@@ -0,0 +1,35 @@
+(function(React, ReactRouter, TodoActions, global) {
+    // Renders the bottom item count, navigation bar and clearallcompleted button
+    // Used in TodoApp
+    global.TodoFooter = React.createClass({
+        propTypes: {
+            list: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+        },
+        render: function() {
+            var nbrcompleted = _.filter(this.props.list, "isComplete").length,
+                nbrtotal = this.props.list.length,
+                nbrincomplete = nbrtotal-nbrcompleted,
+                clearButtonClass = React.addons.classSet({hidden: nbrcompleted < 1}),
+                footerClass = React.addons.classSet({hidden: !nbrtotal }),
+                completedLabel = "Clear completed (" + nbrcompleted + ")",
+                itemsLeftLabel = nbrincomplete === 1 ? " item left" : " items left";
+            return (
+                <footer id="footer" className={footerClass}>
+                    <span id="todo-count"><strong>{nbrincomplete}</strong>{itemsLeftLabel}</span>
+                    <ul id="filters">
+                        <li>
+                            <ReactRouter.Link activeClassName="selected" to="All">All</ReactRouter.Link>
+                        </li>
+                        <li>
+                            <ReactRouter.Link activeClassName="selected" to="Active">Active</ReactRouter.Link>
+                        </li>
+                        <li>
+                            <ReactRouter.Link activeClassName="selected" to="Completed">Completed</ReactRouter.Link>
+                        </li>
+                    </ul>
+                    <button id="clear-completed" className={clearButtonClass} onClick={TodoActions.clearCompleted}>{completedLabel}</button>
+                </footer>
+            );
+        }
+    });
+})(window.React, window.ReactRouter, window.TodoActions, window);
\ No newline at end of file
diff --git a/js/TodoHeader.jsx.js b/js/TodoHeader.jsx.js
new file mode 100644
index 0000000..c42177e
--- /dev/null
+++ b/js/TodoHeader.jsx.js
@@ -0,0 +1,24 @@
+(function(React, ReactRouter, Reflux, TodoActions, todoListStore, global) {    
+    // Renders the headline and the form for creating new todos.
+    // Used in TodoApp
+    // Observe that the toogleall button is NOT rendered here, but in TodoMain (it is then moved up to the header with CSS)
+    global.TodoHeader = React.createClass({
+        handleValueChange: function(evt) {
+            var text = evt.target.value;
+            if (evt.which === 13 && text) { // hit enter, create new item if field isn't empty
+                TodoActions.addItem(text);
+                evt.target.value = '';
+            } else if (evt.which === 27) { // hit escape, clear without creating
+                evt.target.value = '';
+            }
+        },
+        render: function() {
+            return (
+                <header id="header">
+                    <h1>todos</h1>
+                    <input id="new-todo" placeholder="What needs to be done?" autoFocus onKeyUp={this.handleValueChange}/>
+                </header>
+            );
+        }
+    });
+})(window.React, window.ReactRouter, window.Reflux, window.TodoActions, window.todoListStore, window);
diff --git a/js/TodoItem.jsx.js b/js/TodoItem.jsx.js
new file mode 100644
index 0000000..3997c52
--- /dev/null
+++ b/js/TodoItem.jsx.js
@@ -0,0 +1,79 @@
+(function(React, TodoActions, global) {
+    // Renders a single Todo item in the list
+    // Used in TodoMain
+    global.TodoItem = React.createClass({
+        propTypes: {
+            label: React.PropTypes.string.isRequired,
+            isComplete: React.PropTypes.bool.isRequired,
+            id: React.PropTypes.number
+        },
+        mixins: [React.addons.LinkedStateMixin], // exposes this.linkState used in render
+        getInitialState: function() {
+            return {};
+        },
+        handleToggle: function(evt) {
+            TodoActions.toggleItem(this.props.id);
+        },
+        handleEditStart: function(evt) {
+            evt.preventDefault();
+            // because of linkState call in render, field will get value from this.state.editValue
+            this.setState({
+                isEditing: true,
+                editValue: this.props.label
+            }, function() {
+                this.refs.editInput.getDOMNode().focus();
+            });
+        },
+        handleCompleted: function(evt){
+            evt.preventDefault();
+            // because of linkState call in render, field will get value from this.state.editValue
+            setTimeout(function () {
+                if(!this.state.isEditing){
+                    this.refs.toggleCompleted.getDOMNode().click();
+                }
+            }.bind(this), 200);
+        },
+        handleValueChange: function(evt) {
+            var text = this.state.editValue; // because of the linkState call in render, this is the contents of the field
+            // we pressed enter, if text isn't empty we blur the field which will cause a save
+            if (evt.which === 13 && text) {
+                this.refs.editInput.getDOMNode().blur();
+            }
+            // pressed escape. set editing to false before blurring so we won't save
+            else if (evt.which === 27) {
+                this.setState({ isEditing: false },function(){
+                    this.refs.editInput.getDOMNode().blur();
+                });
+            }
+        },
+        handleBlur: function() {
+            var text = this.state.editValue; // because of the linkState call in render, this is the contents of the field
+            // unless we're not editing (escape was pressed) or text is empty, save!
+            if (this.state.isEditing && text) {
+                TodoActions.editItem(this.props.id, text);
+            }
+            // whatever the outcome, if we left the field we're not editing anymore
+            this.setState({isEditing:false});
+        },
+        handleDestroy: function() {
+            TodoActions.removeItem(this.props.id);
+        },
+        render: function() {
+            var classes = React.addons.classSet({
+                'completed': this.props.isComplete,
+                'editing': this.state.isEditing
+            });
+            return (
+                <li className={classes}>
+                    <div className="view">
+                        <input ref="toggleCompleted" className="toggle" type="checkbox" checked={!!this.props.isComplete} onChange={this.handleToggle} />
+                        <label onDoubleClick={this.handleEditStart} onClick={this.handleCompleted}>{this.props.label}</label>
+                        <button className="destroy" onClick={this.handleDestroy}></button>
+                    </div>
+                    <input ref="editInput" className="edit" valueLink={this.linkState('editValue')} onKeyUp={this.handleValueChange} onBlur={this.handleBlur} />
+                </li>
+            );
+        }
+    });
+})(window.React, window.TodoActions, window);
+
diff --git a/js/TodoList.jsx.js b/js/TodoList.jsx.js
new file mode 100644
index 0000000..6649e08
--- /dev/null
+++ b/js/TodoList.jsx.js
@@ -0,0 +1,44 @@
+/** @jsx React.DOM */
+
+(function(React, ReactRouter, TodoItem, TodoActions, global) {
+
+    // Renders the todo list as well as the toggle all button
+    // Used in TodoApp
+    global.TodoList = React.createClass({
+        mixins: [ ReactRouter.State ],
+        propTypes: {
+            list: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+        },
+        toggleAll: function(evt) {
+            TodoActions.toggleAllItems(evt.target.checked);
+        },
+        render: function() {
+            var filteredList;
+            switch(this.getPath()){
+                case '/completed':
+                    filteredList = _.filter(this.props.list,function(item){ return item.isComplete; });
+                    break;
+                case '/active':
+                    filteredList = _.filter(this.props.list,function(item){ return !item.isComplete; });
+                    break;
+                default:
+                    filteredList = this.props.list;
+            }
+            var classes = React.addons.classSet({
+                "hidden": this.props.list.length < 1
+            });
+            return (
+                <section id="main" className={classes}>
+                    <input id="toggle-all" type="checkbox" onChange={this.toggleAll} />
+                    <label htmlFor="toggle-all">Mark all as complete</label>
+                    <ul id="todo-list">
+                        { filteredList.map(function(item){
+                            return <TodoItem label={item.label} isComplete={item.isComplete} id={item.key} key={item.key}/>;
+                        })}
+                    </ul>
+                </section>
+            );
+        }
+    });
+
+})(window.React, window.ReactRouter, window.TodoItem, window.TodoActions, window);
diff --git a/js/components.jsx.js b/js/components.jsx.js
deleted file mode 100644
index ca0d4b0..0000000
--- a/js/components.jsx.js
+++ /dev/null
@@ -1,198 +0,0 @@
-/** @jsx React.DOM */
-
-(function(React, ReactRouter, Reflux, TodoActions, todoListStore, global) {
-
-    // Renders a single Todo item in the list
-    // Used in TodoMain
-    var TodoItem = React.createClass({
-        propTypes: {
-            label: React.PropTypes.string.isRequired,
-            isComplete: React.PropTypes.bool.isRequired,
-            id: React.PropTypes.number
-        },
-        mixins: [React.addons.LinkedStateMixin], // exposes this.linkState used in render
-        getInitialState: function() {
-            return {};
-        },
-        handleToggle: function(evt) {
-            TodoActions.toggleItem(this.props.id);
-        },
-        handleEditStart: function(evt) {
-            evt.preventDefault();
-            // because of linkState call in render, field will get value from this.state.editValue
-            this.setState({
-                isEditing: true,
-                editValue: this.props.label
-            }, function() {
-                this.refs.editInput.getDOMNode().focus();
-            });
-        },
-        handleValueChange: function(evt) {
-            var text = this.state.editValue; // because of the linkState call in render, this is the contents of the field
-            // we pressed enter, if text isn't empty we blur the field which will cause a save
-            if (evt.which === 13 && text) {
-                this.refs.editInput.getDOMNode().blur();
-            }
-            // pressed escape. set editing to false before blurring so we won't save
-            else if (evt.which === 27) {
-                this.setState({ isEditing: false },function(){
-                    this.refs.editInput.getDOMNode().blur();
-                });
-            }
-        },
-        handleBlur: function() {
-            var text = this.state.editValue; // because of the linkState call in render, this is the contents of the field
-            // unless we're not editing (escape was pressed) or text is empty, save!
-            if (this.state.isEditing && text) {
-                TodoActions.editItem(this.props.id, text);
-            }
-            // whatever the outcome, if we left the field we're not editing anymore
-            this.setState({isEditing:false});
-        },
-        handleDestroy: function() {
-            TodoActions.removeItem(this.props.id);
-        },
-        render: function() {
-            var classes = React.addons.classSet({
-                'completed': this.props.isComplete,
-                'editing': this.state.isEditing
-            });
-            return (
-                <li className={classes}>
-                    <div className="view">
-                        <input className="toggle" type="checkbox" checked={!!this.props.isComplete} onChange={this.handleToggle} />
-                        <label onDoubleClick={this.handleEditStart}>{this.props.label}</label>
-                        <button className="destroy" onClick={this.handleDestroy}></button>
-                    </div>
-                    <input ref="editInput" className="edit" valueLink={this.linkState('editValue')} onKeyUp={this.handleValueChange} onBlur={this.handleBlur} />
-                </li>
-            );
-        }
-    });
-
-    // Renders the todo list as well as the toggle all button
-    // Used in TodoApp
-    var TodoMain = React.createClass({
-        mixins: [ ReactRouter.State ],
-        propTypes: {
-            list: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
-        },
-        toggleAll: function(evt) {
-            TodoActions.toggleAllItems(evt.target.checked);
-        },
-        render: function() {
-            var filteredList;
-            switch(this.getPath()){
-                case '/completed':
-                    filteredList = _.filter(this.props.list,function(item){ return item.isComplete; });
-                    break;
-                case '/active':
-                    filteredList = _.filter(this.props.list,function(item){ return !item.isComplete; });
-                    break;
-                default:
-                    filteredList = this.props.list;
-            }
-            var classes = React.addons.classSet({
-                "hidden": this.props.list.length < 1
-            });
-            return (
-                <section id="main" className={classes}>
-                    <input id="toggle-all" type="checkbox" onChange={this.toggleAll} />
-                    <label htmlFor="toggle-all">Mark all as complete</label>
-                    <ul id="todo-list">
-                        { filteredList.map(function(item){
-                            return <TodoItem label={item.label} isComplete={item.isComplete} id={item.key} key={item.key}/>;
-                        })}
-                    </ul>
-                </section>
-            );
-        }
-    });
-
-    // Renders the headline and the form for creating new todos.
-    // Used in TodoApp
-    // Observe that the toogleall button is NOT rendered here, but in TodoMain (it is then moved up to the header with CSS)
-    var TodoHeader = React.createClass({
-        handleValueChange: function(evt) {
-            var text = evt.target.value;
-            if (evt.which === 13 && text) { // hit enter, create new item if field isn't empty
-                TodoActions.addItem(text);
-                evt.target.value = '';
-            } else if (evt.which === 27) { // hit escape, clear without creating
-                evt.target.value = '';
-            }
-        },
-        render: function() {
-            return (
-                <header id="header">
-                    <h1>todos</h1>
-                    <input id="new-todo" placeholder="What needs to be done?" autoFocus onKeyUp={this.handleValueChange}/>
-                </header>
-            );
-        }
-    });
-
-    // Renders the bottom item count, navigation bar and clearallcompleted button
-    // Used in TodoApp
-    var TodoFooter = React.createClass({
-        propTypes: {
-            list: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
-        },
-        render: function() {
-            var nbrcompleted = _.filter(this.props.list, "isComplete").length,
-                nbrtotal = this.props.list.length,
-                nbrincomplete = nbrtotal-nbrcompleted,
-                clearButtonClass = React.addons.classSet({hidden: nbrcompleted < 1}),
-                footerClass = React.addons.classSet({hidden: !nbrtotal }),
-                completedLabel = "Clear completed (" + nbrcompleted + ")",
-                itemsLeftLabel = nbrincomplete === 1 ? " item left" : " items left";
-            return (
-                <footer id="footer" className={footerClass}>
-                    <span id="todo-count"><strong>{nbrincomplete}</strong>{itemsLeftLabel}</span>
-                    <ul id="filters">
-                        <li>
-                            <ReactRouter.Link activeClassName="selected" to="All">All</ReactRouter.Link>
-                        </li>
-                        <li>
-                            <ReactRouter.Link activeClassName="selected" to="Active">Active</ReactRouter.Link>
-                        </li>
-                        <li>
-                            <ReactRouter.Link activeClassName="selected" to="Completed">Completed</ReactRouter.Link>
-                        </li>
-                    </ul>
-                    <button id="clear-completed" className={clearButtonClass} onClick={TodoActions.clearCompleted}>{completedLabel}</button>
-                </footer>
-            );
-        }
-    });
-
-    // Renders the full application
-    // RouteHandler will always be TodoMain, but with different 'showing' prop (all/completed/active)
-    var TodoApp = React.createClass({
-        // this will cause setState({list:updatedlist}) whenever the store does trigger(updatedlist)
-        mixins: [Reflux.connect(todoListStore,"list")],
-
-        render: function() {
-            return (
-                <div>
-                    <TodoHeader />
-                    <ReactRouter.RouteHandler list={this.state.list} />
-                    <TodoFooter list={this.state.list} />
-                </div>
-            );
-        }
-    });
-
-    var routes = (
-        <ReactRouter.Route handler={TodoApp}>
-            <ReactRouter.Route name="All" path="/" handler={TodoMain} />
-            <ReactRouter.Route name="Completed" path="/completed" handler={TodoMain} />
-            <ReactRouter.Route name="Active" path="/active" handler={TodoMain} />
-        </ReactRouter.Route>
-    );
-
-    ReactRouter.run(routes, function(Handler) {
-        React.render(<Handler/>, document.getElementById('todoapp'));
-    });
-
-})(window.React, window.ReactRouter, window.Reflux, window.TodoActions, window.todoListStore, window);
diff --git a/js/router.js b/js/router.js
new file mode 100644
index 0000000..a83b0a9
--- /dev/null
+++ b/js/router.js
@@ -0,0 +1,12 @@
+(function(React, ReactRouter, TodoApp,TodoList, global) {
+	var routes = (
+	    <ReactRouter.Route handler={TodoApp}>
+	        <ReactRouter.Route name="All" path="/" handler={TodoList} />
+	        <ReactRouter.Route name="Completed" path="/completed" handler={TodoList} />
+	        <ReactRouter.Route name="Active" path="/active" handler={TodoList} />
+	    </ReactRouter.Route>
+	);
+	ReactRouter.run(routes, function(Handler) {
+	    React.render(<Handler/>, document.getElementById('todoapp'));
+	});
+})(window.React, window.ReactRouter,window.TodoApp, window.TodoList, window);
\ No newline at end of file
diff --git a/testMixin.html b/testMixin.html
new file mode 100644
index 0000000..49653f6
--- /dev/null
+++ b/testMixin.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Mixins Example</title>
+    <link rel="stylesheet" href="app/bower_components/todomvc-app-css/index.css">
+    <!-- CSS overrides - remove if you don't need it -->
+    <link rel="stylesheet" href="css/app.css">
+</head>
+<body>
+    <section id="example">
+        <!-- Bootstrap code will add components here, see js/components.jsx.js -->
+    </section>
+    <!-- Scripts here. Don't remove this ↓ -->
+    <!-- <script src="bower_components/todomvc-common/base.js"></script> -->
+    <script src="app/bower_components/react/react-with-addons.js"></script>
+    <script src="app/bower_components/react-router/dist/react-router.js"></script>
+    <script src="app/bower_components/react/JSXTransformer.js"></script>
+    <script src="app/bower_components/lodash/lodash.js"></script>
+    <script src="app/bower_components/reflux/dist/reflux.js"></script>
+    <script type="text/jsx">
+        var SetIntervalMixin = {
+            componentWillMount: function() {
+                this.intervals = [];
+            },
+            setInterval: function() {
+                console.log(arguments);
+                this.intervals.push(setInterval.apply(null, arguments));
+            },
+            componentWillUnmount: function() {
+                this.intervals.map(clearInterval);
+            }
+        };
+
+        var TickTock = React.createClass({
+            mixins: [SetIntervalMixin], // Use the mixin
+            getInitialState: function() {
+                return {seconds: 0};
+            },
+            componentDidMount: function() {
+                this.setInterval(this.tick, 1000); // Call a method on the mixin
+            },
+            tick: function() {
+                this.setState({seconds: this.state.seconds + 1});
+            },
+            render: function() {
+                return (
+                    <p>
+                        React has been running for {this.state.seconds} seconds.
+                    </p>
+                );
+            }
+        });
+
+        React.render(
+            <TickTock />,
+            document.getElementById('example')
+        );
+    </script>
+</html>
+