WellDone

Well Done is an online publishing platform inspired by Medium.

Well done was built with React, Redux, MongoDB, Express.js, Axios, Webpack, Node.js and Google Firebase.

FEATURES

Featured Stories

The Featured Stories Component fetches the most relevant stories by showing the most popular stories based on likes received.

      
topStories() {
  return this.props.stories.sort((a, b) =>
    a.likerIds.length > b.likerIds.length ? -1 : 1
  );
}

Comments

Users can comment on their favorite stories. Each new comment appears instantly by triggering the component to re-render by modifying the Redux comments slice of state.

     componentDidMount() {
        this.props
          .fetchAllUsers()
          .then(() => this.props.fetchStoryComments(this.props.story._id))
          .then(() => {
            this.setState({ commentsLoaded: true });
            this.scrollTo();
          });
      }

User Profile

Users can view their created stories, edit their bio, and upload an avatar photo. Avatar photos are uploaded using react-firebase-file-uploader. A return URL is then stored in the MongoDB for later reference of the photo.

     firebase
      .storage()
      .ref("avatarimage")
      .child(filename)
      .getDownloadURL()
      .then(url =>
        this.setState({
          avatarURL: url,
          firstName: this.props.author.firstName,
          lastName: this.props.author.lastName,
          email: this.props.author.email,
          id: this.props.author._id
        })
      )
      .then(() => {
        this.props.createUserAvatar(this.state);
      });
  };

Create a Story

Users can create a story using the React Quill rich text editor dependency.

render() {
    return (
      <div className="story-form-container">
        <form className="story-form" onSubmit={this.handleSubmit}>
          <input
            type="text"
            value={this.state.title}
            onChange={this.update("title")}
            placeholder="Title"
            className="story-form-input story-form-title"
          />

          <ReactQuill
            value={this.state.model}
            onChange={this.handleModelChange}
            modules={NewStory.modules}
            formats={NewStory.formats}
          />

          <NewStoryImageContainer />

          <button className="publish-button">Publish</button>
        </form>
      </div>
    );
  }
}