Midgreen

Midgreen is a sustainability journalism website mimics Medium functionalities built with Ruby on Rails, React, Redux.

Table of Contents

• Technologies
• Key Features
  • Midgreen Categories
  • Midgreen Journals
  • Midgreen Comments
• Code Snippets
• License
• Design Documents

Technology

Following technologies were used on this fullstack project: Ruby on Rails, Redux, React, PostgreSQL, AWS S3, and Heroku.

Features

Midgreen consists of following highlighted features:

1. Midgreen Categories
2. Midgreen Journals
3. Midgreen Comments

Additional functionalities have also been implemented: splash page, user authentication and error handling, user profile.

Categories

Each category has its own journals

• User could browse through categories as they wish to explore the topic that they interest in:

• Journals are under different categories

Journals

• Users could check their published journals

• User could write new journals and upload new pictures to AWS storage.

• Users could edit their own journals,change photo, title, content, and category as they like.

Comments

• Users can publish comments:

• Users could publish comments on other people's comments to create a interactive experience.

Code Snippets

To find all child comments and display them properly, initial approach was to iterate through all comments to find parent comment first, then iterate through all comments again to find children comments. The time complexity of this approach is O(n^2)algorithm.

After fetching all comments from the journal, I used hash look up where the keys are parent comment ids, and the values are children comments. In this way, the time complexity of the whole process is O(n) + O(1).

    def comments_by_parent
        comments_by_parent = Hash.new { |hash, key| hash[key] = [] }

        self.comments.includes(:parent_comment).each do |comment|
            comments_by_parent[comment.parent_comment_id] << comment
        end

        comments_by_parent
    end

When displaying the nested comments, because the lookup speed is significantly increased, I just need to iterate through all the parent comments then loop through all the children comments.

    const nestedComments = (allComments[comment.id] || []).map((comment) => {
      return (
        <CommentList
          key={comment.id}
          journalId={journalId}
          comment={comment}
          allComments={allComments}
          comment_authors={comment_authors}
        />
      );
    });

I also gave children comments default style so difference them between parent comments.

<div
          className="child-comments"
          style={{
            marginLeft: "25px",
            marginTop: "10px",
            borderTop: "1px solid rgba(0, 0, 0, 0.3)",
          }}
        >
          {nestedComments}
        </div>

Design Documents

Design Documents

License

© 2020 Ivan Wang