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

NextJS +Typescript Solution to Filterable Static Job List

Abhikβ€’ 4,740

@abhik-b

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

Report

0

Accessibility Issues

6

HTML Issues

View Report

Abhik’s questions for the community

Hello Frontend Mentors πŸ‘‹

I tried my best on this challenge to make it perfect, I have used nextjs with typescript and this was a kind of practice project for me using useReducers and useContext hook !

So please provide any feedback , tips, suggestions related to my code or solution πŸ™, I'll highly appreciate your help

I actually recorded a youtube video while solving this , so if you are stuck with this challenge , you can use it as a reference🀞

Community Feedback

Renszo Camachoβ€’ 1,615

@RenszCamacho

Posted

My man. That's sleek. Can't say anymore. I do like it. πŸ‘πŸ‘πŸ‘. I'm gonna check your Youtube channel right now.

Greetings.

Marked as helpful

2


Abhikβ€’ 4,740

@abhik-b

Posted

Thanks a lot @RenszCamacho for the compliments and thanks for checking out my channel ❀, it motivates a lot πŸ’―

1

Szymon Rojekβ€’ 4,540

@SzymonRojek

Posted

Hi @abhik-b,

What can I say. Great job!!!

Amazing the left border - I love it.

What do you think about the validator using by frontendmentor.io - when I check my projects through the W3C Markup Validation Service => always get a great result but in here as a result sometimes I receive a few bugs. What do you think about it?

Cheers:D

Marked as helpful

1


Abhikβ€’ 4,740

@abhik-b

Posted

Hi @SzymonRojek thanks for the compliments , it really motivates me a lot πŸ’―

**This is just my opinion and observation - ** I have observed that whenever I use nextjs instead of plain html , I get a ton of issues (maybe because I don't get full control over html markup) , since with every project here I try to focus on some specific skills or topics, I ignore those issues whom I cannot fix (in most cases those issues does not matter)

1

P
ApplePieGiraffeβ€’ 29,085

@ApplePieGiraffe

Posted

Hi there, Abhik! πŸ‘‹

I just noticed you completed another challenge! πŸ˜€ Fantastic work on this one! πŸ™Œ

I love the subtle transitions you added to the various elements of the page and the transition of the content when changing the filters is SOOO smooth! 🀩 Also, the attribution you added at the bottom of the page is very cool! 😎 Of course, everything else looks great and responds nicely! πŸ˜‰

A super tiny suggestion I might make is to add a little more space around the sides of the job cards in the mobile layout so that there's some more room between them and the edges of the page. πŸ™‚

As always, keep coding (and happy coding, too)! 😁

Marked as helpful

2


Abhikβ€’ 4,740

@abhik-b

Posted

@ApplePieGiraffe I'm glad you liked my solution , your feedback really motivates me a lot πŸ™ , I'll definitely try to make the job cards have some space around the sides for mobile devices

Happy coding πŸ˜‡

1

Please focus on giving high-quality, helpful feedback and answering any questions abhik-b might have. Here are some key points to consider:

  • Does the solution include semantic HTML?
  • Is it accessible, and what improvements could be made?
  • Does the layout look good on a range of screen sizes?
  • Is the code well-structured, readable, and reusable?

You can read our community guidelines if you're unsure what to post.

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!