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

Responsive React Hooks API using styled-components

Magda Kokot 1,425

@magdakok

Desktop design screenshot for the Job listings with filtering coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello! :) Any feedback will be more than welcome. Working with styled-components framework gave me a lot of fun! :)

Community feedback

Mahesh Yadav 1,220

@Mahesh-yadav

Posted

Hi

Overall its great work. I get to know about Array.every() function by looking at your code.

There is a small bug in your filtering jobs functionality. There are total 10 posts in the data set with job.role values as follows. **6 - Frontend, 2 - Fullstack, 1 - FullStack and 1 - Backend **. Pay attention to letter case - Fullstack vs FullStack. So when I select Fullstack, your app correctly shows 2 jobs and when I select FullStack, it correctly shows 1 job.

Currently, your search is case sensitive. But, search functionality is generally case-insensitive. In your code, convert filter item and technologies to either lowercase or uppercase before comparing in the following part of your code.

let technologies = [i.role, i.level, ...i.languages, ...i.tools];
          if (filter.every((item) => technologies.includes(item))) {
            return <JobBox info={i} addTags={addTags} key={i.id} />;
          }
          return null;
2

Magda Kokot 1,425

@magdakok

Posted

Hello! So kind of you to even have a look at the code, thank you! I've just solved the problem :) I like how simple and clean the every() function is :)

Thank you for the help :)

0
P
Matt Studdert 13,611

@mattstuddert

Posted

Awesome work on this challenge, Magda. Your solution matches up to the design really well and functions perfectly. How did you like working with Styled Components? Personally, I love them and use them on Frontend Mentor itself!

Keep up the great work! 👍

1

Magda Kokot 1,425

@magdakok

Posted

@mattstuddert I literally loved working with Styled Components. They are so easy to manipulate with props and you can still nest classes as you do with Sass. I just have to give a thought of whether should I keep them in a separate file or just try to break components themselves into smaller ones.

Thank you a lot for the feedback! :)

0
P
Matt Studdert 13,611

@mattstuddert

Posted

@magdakok no problem! I tend to break them out into small components so that you can easily import them for repeatable styles. I also typically have the styled component code and the JSX component in separate files too. It's a fine balance between separating out the code nicely and creating an architectural mess with files everywhere in larger projects though! 😅

1
Magda Kokot 1,425

@magdakok

Posted

@mattstuddert this sounds reasonable :) I'm looking forward to my first big project's headache. By the way, thank you a lot for featuring my solution in the newsletter! If I knew before I'd have added some nice transitions and cool stuff. It really cheered me up during the real struggle with paper, scissors, rock challenge. You DID know what you were doing while designing the annoying gradient behind the winning symbol, didn't you? ;)

1
P
Matt Studdert 13,611

@mattstuddert

Posted

@magdakok haha, yep I thought it would be an "interesting" addition to the challenge. Designers will often throw these little curveballs in the real world, so it's good practice 😅

You're welcome re: having your solution featured in the newsletter. You did an awesome job and it deserved to be featured! It will help a lot of people to be able to see your solution and learn from it.

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