Skip to content
OverviewSolutions
1
Comments
1
Conan Crawford
@cjcrawford

All comments

  • Mehmet Akif AKKUŞ•170
    @mehmetakifakkusSubmitted over 1 year ago

    Hey, I would be glad if I hear your comments.

    Visually, I tried to create the best visual results and try to make very similar to design as much as possible. Can I do much better? What is your advice or any comment?

    • First-level comments are ordered by their score, whereas nested replies are ordered by time added. Upvoting and downvoting scores on the first level comments changes the order.
    • Replying to a comment adds the new reply to the bottom of the nested replies within that comment.
    • A confirmation modal pops up before a comment or reply is deleted.
    • You can only edit or delete your own comments and replies.
    • Bonus1: System stores all the comments and replies on the localStore so the data persists when the browser refreshed.
    • Bonus2: System uses a timestamp and dynamically track the time since the comment or reply created. At first, there was a static createdAt string on data.json file.

    Besides completing all the items in the challenge, I have stored comments and replies so that modified data persists when browser refreshed. For details, please visit my github:

    Here are the tech stack:

    • React: A JavaScript library for building user interfaces.
    • Nextjs: A javascript framework works top on the React and uses all the benefits of
    • React. It helps for SSG, SSR and routing.
    • Tailwind CSS: A utility-first CSS framework that enables rapid UI development with pre-defined styles and components. Flexbox and CSS Grid have been used for the css layout. Typescript: Type safe version of Javascript.

    Interactive Comments

    2
    Conan Crawford•30
    @cjcrawfordPosted over 1 year ago

    The guidelines were definitely unclear around the up/down votes. The idea to flag a comment as able to be voted or not is definitely the right idea. Once you think about it from the context of the unique user on the page (again, a rather unspecified clarification), you might begin to see a few possible solutions.

    I personally opted to track the user's comment votes by commentId: undefined | oneOf [-1, 1] meaning for each comment, the user could only have not voted, down voted, or upvoted. The only criteria in which the user can place a successful vote would be when commentVotes[commentId] is falsy.

    Knowing the capability of the user's ability to vote also gives the benefit of disabling/enabling the arrows from a visual indicator too.

    The CSS and html and UX works great though on first pass on my phone. Nice work!

    1