Frontend Mentor - Job listings with filtering solution

This is a solution to the Job listings with filtering challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Filter job listings based on the categories

Here is what it looks like

Links

• Solution URL: github.com/SyedZawwarAhmed/static-job-listings
• Live Site URL: staticjoblistings.netlify.app

My process

Built with

• React - JS library
• CSS custom properties
• Flexbox
• CSS Grid

What I learned

The most important thing I learned while making this that when the state of a functional component is changed, its value can't be immediately accessed on the same render. You have to call the setState function which the useState hook returns to access the recently updated state.

Here is the code snippet of what I am talking about:

const applyFilter = (newFilter) => {
  setIsFilterApplied(true);
  if (!filter.map((item) => item[1]).includes(newFilter[1])) {
    setFilter((filter) => [...filter, newFilter]);
  }
  setFilter((filter) => {
    for (let i = 0; i < data.length; i++) {
      const item = data[i];
      let filterPassed = true;

      for (let j = 0; j < filter.length; j++) {
        const filterItem = filter[j];
        if (filterItem[0] === "languages") {
          filterPassed = item[filterItem[0]].includes(filterItem[1]);
        } else {
          filterPassed = filterItem[1] === item[filterItem[0]];
        }

        if (!filterPassed) break;
      }
      item.filterApplied = filterPassed;
    }
    return filter;
  });
};

Continued development

The most important thing I want to focus on in the future is the useEffect hook. I know when it's used but the how part is to be worked on.

Useful resources

• stackoverflow - As always, when I got stuck, stackoverflow helped me get through.
• React - This is an amazing article which helped me get a know how of the useEffect Hook. I'd recommend it to anyone still learning this concept.

Author

• Website - Syed Zawwar Ahmed
• Frontend Mentor - @SyedZawwarAhmed
• Github - @SyedZawwarAhmed
• LinkedIn - @SyedZawwarAhmed