var store = new JSData.DS();
  var firebaseAdapter = new DSFirebaseAdapter({
    basePath: 'https://js-data-firebase.firebaseio.com'
  });

  store.registerAdapter('firebase', firebaseAdapter, { default: true });

  // Flux pattern
  var UserStore = store.defineResource({
    name: 'user',
    afterInject: function () {
      UserStore.emit('change');
    },
    afterEject: function () {
      UserStore.emit('change');
    }
  });

  // Activate a mostly auto-sync with Firebase
  // The only thing missing is auto-sync TO Firebase
  // This will be easier with js-data 2.x, but right
  // now you still have to do store.update('user', 1, { foo: 'bar' }), etc.
  for (var resourceName in store.definitions) {
    var Resource = store.definitions[resourceName];
    var ref = firebaseAdapter.ref.child(Resource.endpoint);
    // Inject items into the store when they're added to Firebase
    // Update items in the store when they're modified in Firebase
    ref.on('child_changed', function (dataSnapshot) {
      var data = dataSnapshot.val();
      if (data[Resource.idAttribute]) {
        Resource.inject(data);
      }
    });
    // Eject items from the store when they're removed from Firebase
    ref.on('child_removed', function (dataSnapshot) {
      var data = dataSnapshot.val();
      if (data[Resource.idAttribute]) {
        Resource.eject(data[Resource.idAttribute]);
      }
    });
  });

  var UserItem = React.createClass({
    remove: function () {
      UserStore.destroy(this.props.user.id);
    },
    render: function () {
      var user = this.props.user;
      return <div className="list-group-item" key={user.id}>
        <div className="pull-right">
          <button className="btn btn-xs btn-danger" onClick={this.remove}>
            Delete
          </button>
        </div>
        {user.name}
      </div>;
    }
  });

  var UserApp = React.createClass({
    getInitialState: function () {
    // Pull the initial list of users
    // from Firebase
    UserStore.findAll();

      return { users: UserStore.getAll(), name: '' };
    },
    onChange: function () {
      this.setState({ users: UserStore.getAll(), name: this.props.name || '' });
    },
    onInput: function (event) {
      this.setState({ users: this.state.users, name: event.target.value });
    },
    componentDidMount: function () {
      UserStore.on('change', this.onChange);
    },
    componentWillUnmount: function () {
      UserStore.off('change', this.onChange);
    },
    createUser: function (e) {
      var _this = this;
      e.preventDefault();
      UserStore.create({
        name: _this.state.name
      }).then(function () {
        _this.setState({ name: '' });
      });
    },
    render: function () {
      var users = this.state.users;
      var _userItems = [];

      users.forEach(function (user, i) {
        _userItems.push(<UserItem key={i} user={users[i]} />);
      });

      return (
        <div className="panel panel-primary">
          <div className="panel-heading">
            <h3 className="panel-title">Users</h3>
          </div>
          <div className="list-group">
            {_userItems}
            <div className="list-group-item">
              <form id="user-form" name="user-form" className="list-group-item" onSubmit={this.createUser}>
                <input className="form-control" type="text" id="name" name="name" value={this.state.name} onChange={this.onInput} placeholder="Enter a name and press enter" />
                <input type="submit" className="hidden"/>
              </form>
            </div>
          </div>
        </div>
      );
    }
  });

  React.render(, document.getElementById('example'));