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.
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
You can check Live Site URL here
- React
- Redux
- CSS modules
- Mobile-first workflow
To make this project more realistic, I decided to fetch jobs data from server. For this I created my own API using Vercel serverless function.
This is my first time with Redux, obviously I could have used Context API and hooks like in some projects before, but I wanted to get familiar with this library and lingo associated with it.
The most challenging part was filtering based on multiple criteria. I achieved this with Array.filter() and Array.every() in the JobList method and I think it's concise and elegant.
const filteredJobs = jobs.filter((job) => {
return filters.every((item) => job.filterCategories.includes(item))
})- Build and deploy API with Vercel - This article helped me set up a serverless function with Vercel CLI
To run this project, install it locally using npm:
npm install && npm start
- Frontend Mentor - @mbart13