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
Oops! You need to be logged in to do that
Not Found
Oops! You need to be logged in to do that
Not Found

Submitted

Responsive Job Listing Search with NextJS, Tailwind and Typescript

#next#react#typescript#tailwind-css
P
Francisldn 100

@francisldn

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

2

Accessibility Issues

5

HTML Issues

View Report

Francisldn’s questions for the community

What I have learnt

NextJS framework

  • This is my first time using NextJS so I spent some time initially to learn about the details of the framework. One useful thing I learnt was how to create the Layout component for NavBar and nest the pageProps within the Layout component.
  • The main challenge in NextJS for me is how to use various data fetching components such as getStaticProps, getServerSideProps and getStaticPaths which I don't get to use in this project but hopefully I will for the next project.
  • I find that <Image> which is the native NextJS img component is not very easy nor flexible to use, so I have resorted to using <img> which offers more flexibility in terms of CSS styling.

Tailwind CSS

  • This is my first time using Tailwind CSS and I really love it - for the ease of use, flexibility and responsiveness. As this is my first time using Tailwind, I also spent some time to familiarize myself with the various utilities offered by Tailwind. There was an initial learning curve in knowing the various class names that are available but it is relatively easy to pick up.
  • It is also convenient to create re-usable CSS classes in Tailwind in the normal CSS file
  • To define custom colors, fonts or other settings, it is possible to do so in tailwind.config.js
  • Specifying the layout and styling for various screen-sizes is really easy with Tailwind without having to write media queries, which saves a lot of time

Typescript

  • I find that using Typescript instead of JS has slowed down my development time significantly due to the need to resolve Typescript errors. However I hope this will pay off in the longer term for practicing type-safe secure coding practices.
  • To resolve MouseEvent type error, one can cast the event.target as an Element or HTMLElement.

Search function

  • To implement the incremental search function, I discovered Array.includes function which makes it really easy to filter with multiple strings. Example of the code as below:
for(let i=0; i<newList.length; i++) {
      newFilterData = newFilterData.filter(({tags}) => tags.includes(newList[i]))
    }

I seem to have problems with the HTML tags in Next but I'm still yet to figure out how to resolve them. Any help would be much appreciated.

Any comments/suggestions welcome!

Community Feedback

Please focus on giving high-quality, helpful feedback and answering any questions francisldn 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!