Filtering Job Board
A job board with the ability to apply and remove cumulative filters. A challenge project from Frontend Mentors. Implemented from a Figma design file.
Technology Used
Overview
This project is a fictional job-board. The project consists of one page, listing all of the 10 provided jobs in the data-set. The job listings can be filtered by their "tags" (role, level, languages, and/or tools). Upon selecting a filter, a filter summary/manangement panel appears at the top of the list. Multiple filters can be applied and filters can be removed from the management panel. Duplicate filters are excluded and the filters appear in the order they are selected.
State Management with useReducer
In order to manage a shared state across two branches of the component tree, I made use of an orchestrating parent component and the useReducer hook provided by React. In the context, I decided to provide appropriate dispatch functions to each of my component brances via props rather than relying on context (which I felt would have been overboard). I designed my component tree to minimize the amount of "prop-drilling" that would be required to accomplish this.
Continuous Deployment with Vercel
This project employs a continuous deployment strategy using Vercel's Next-tailored deploy workflow. NextJS offers a productive solution to using React for static websitesUsing this workflow, preview deploys are generated from pull requests and rebuilds are triggered upon merging pull requests into the master/main branch on GitHub.