Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 3 years ago

Interactive Comment Section (Full Stack CRUD)

express, postgres, react, sass/scss
Sahand Masoleh•1,210
@sahand-masoleh
A solution to the Interactive comments section challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


I went a bit overboard with this one. :D

I took me almost a month, but here it is, a full stack, fully featured CRUD app resembling Reddit's comment section.

You can read more about it in the sample post in the app itself and also in the description on the repo.

Please tell me what you think, and also, If you're interested in what I did and what the journey was, I am more than willing to talk about it ;)

Code
Couldn’t fetch repository

Please log in to post a comment

Log in with GitHub

Community feedback

  • Elaine•11,360
    @elaineleung
    Posted almost 3 years ago

    Wow Sahand, yesss, you did go way overboard with this one, but it's so well done! Anyway, I didn't get to check out the code, but in just looking at the UI and how everything works, I like how well everything got put together and how much thought you gave to each aspect. I just got two quick UX comments as I'm playing around with this:

    1. At first I didn't realize there's a "go to top" button until I saw the arrow much later. It's actually a great addition, but I'm wondering whether there's a way to make that a bit more apparent, such as adding some more box shadow, and maybe even its placement?

    2. After writing out a comment, I didn't see anything change aside from my comment disappearing from the text box, so I was wondering at first whether it got through, and then I saw it posted after I scrolled down. I haven't posted on Reddit for a while, but is that also how Reddit does it, as in, there's no confirmation message that the comment went through and that you'd have to look for it yourself? In any case, it would be nice to have some sort of message or toast that shows the user the comment got posted, or that something went wrong (maybe you have that already but of course I had no connection issues today so...)

    Anyway, that's all the thoughts I have for now; I wasn't really planning to write this much, as my main goal was just to say how much I liked this solution, and also, awesome work! 😊

    Marked as helpful
  • bunee•2,020
    @buneeIsSlo
    Posted almost 3 years ago

    Hey! @sahand-masoleh, Your solution is fantastic! going a bit overboard is something I love to do as well, and since you're open to questions...

    1. How did you plan out this project? By this I mean, were you already familiar with the concepts and technologies that were needed for this project, or did you learn them as you were coding the project?

    2. I haven't built a project this huge(currently working on one) yet, Is there something you didn't pay enough attention to in the early stages of the project and then later found out the hard way?

    3. I imagine you must have come across some great resources while working on this project, could you please share them?

    Thank you.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit 1st-party linked stylesheets, and styles within <style> tags.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub