Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Notification feed built in React, using Tailwind

@oroszlanolo

Desktop design screenshot for the Notifications page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


The most difficult part for me was creating a wrapping line, that contains styled links, and a dot at the end. I am sure how good my solution is on this part.

Also, I am unsure what HTML tags I should use in some places.

And of course, I am relatively new to React, and I have little experience with building websites, so I am unsure of many things. I don't know the best practices, and what I should improve on.

Community feedback

P
visualdennis 8,375

@visualdenniss

Posted

Hey there,

good job with the challenge and React!

Some further improvement suggestions:

  • You can make it so that when clicked on individual notifications, it should mark them as read. You can use ids for that.

  • Count is hardcoded at the moment, you can make it dynamic, e.g. it can read the length of array of unread ones etc. No need to create a new state for that as it should be avoided to create unnecessary states.

  • You can add a main tag instead of a non-semantic div, as the highest wrapper of your app.

  • I think it is not needed to split it to too many tiny components with single line of return like User, Club etc. as they are not really a component but just a simple element. However its different for buttons, they are often used as components cuz they are reused across a website with different functionalities etc.

  • I strongly recommend you to read this article https://react.dev/learn/thinking-in-react

  • I've tried to apply the exact steps in my solution for this challenge, so you can also check that out to get some more ideas about how to breakdown into components etc. Also you can check my graph: https://github.com/visualdenniss/fm-notification-component/blob/master/Workflow.md

Hope you find this feedback helpful!

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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