Job listings with filtering (React, hooks, Context API)

Table of contents

• Job listings with filtering (React, hooks, Context API)
  • Table of contents
  • Overview
    • Goal
    • Screenshot
    • Links
  • My process
    • Built with
    • Solution approach
      • Custom hooks
    • Useful resources
    • Continued development
  • Author

Overview

Goal

What I wanted to achieve from this

• practice some CSS skills and make an optimal layout for site which works on different screen sizes (with mobile first workflow)
• design hover states for all interactive elements on the page
• Filter job listings based on the categories or tech-skills
• apply React Context API for managing jobs data & filtering state

Screenshot

Links

• Live Site URL: https://deep-jobs.surge.sh

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• React - JS library
• utilized Context API & created custom hooks.
• SCSS

Solution approach

• Created custom Provider component (JobsProvider) which holds job related data
• JobsProvider saves us from prop-drilling & allows to share data across different parts of application component tree.

// wrap your App inside JobsProvider
<JobsProvider>
  <App />
</JobsProvider>

Custom hooks

• I created a few custom hooks to keep state/actions logic separated & reusable in different components
• useJobs() - fetches jobs data & returns filtered jobs array

const {jobs, isLoading} = useJobs()

• useFilters() - returns currently applied filters & functions to add/remove/clearAll filter

const {filters, isFilterApplied, addFilter, removeFilter, clearFilters} = useFilters()

• addFilter(skill), removeFilter(skill) - are just helper functions which dispatch appropriate action(s) under the hood

Useful resources

• Context API
• Using React Context effectively - This helped me structuring <JobsProvider> & designing custom-hooks. I really liked this pattern and will use it going forward.
• NOTE: I still feel Redux Toolkit is much better for global state management in mid-size or big applications.

Continued development

• I would like to use styled-components library for writing CSS-in-JS approach, would definitely try it.

Author

• Profile - Deepak Chandani