Responsive Job Listing with Filtering Options

Community feedback

• 

  Amélie•330

  @aweliego

  Posted almost 2 years ago

  Hi! Well done on completing the challenge, it looks good!

  I took a look at your code too and had some tips in case you're interested in refactoring your code!

  • To avoid using a useEffect to set the correct background for desktop or mobile, since you're using TailwindCSS, you could handle this via the tailwind.config.cjs file:

  module.exports = {
    content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
    theme: {
      extend: {
        backgroundImage: {
          'header-desktop': "url('/public/assets/images/bg-header-desktop.svg')",
          'header-mobile': "url('/public/assets/images/bg-header-mobile.svg')",
        },
  

  And then apply the classes bg-header-mobile sm:bg-header-desktop to your div. That way your code is 'cheaper' and drier :)

  • In your JobListItem component you repeat 4 times the same button for each filter type. You could refactor this by putting all the filters in an array and mapping over this array to return the button. Something like that:

  {[job.role, job.level, ...job.languages, ...job.tools].map((filter, idx) =>
  <button key={idx} onClick={() => handleFilterClick(filter)}>{filter}</button>)}
  

  Hope that's useful. Happy coding!

  11

  Marked as helpful