Job Listing using Svelte, TS, and Tailwind

How amazing and simple Svelte's Store is to use for state management. With the use of the dollar prefix $ for auto subscription and cleanup.

import { writable } from 'svelte/store'
import type { JobStore } from '../types/Job.type'

let store = createFilterStore([])

function createFilterStore(initial: string[]): JobStore {
  const { subscribe, set } = writable(initial)

  return {
    subscribe,
    set: (value: string[]) => {
      set(value)
    },
  }
}
export default store

Another challenge that I faced was on how to make sure that all the Filter Tags would return the exact Job Listing. There are lots of ways to use like with the ES6 Object Entries, but I just went with the Object Destructuring since it was more of a simple head-on approach and used Svelte's Reactivity to trigger when value changes.

//svelte reactivity, so whenever filterStore value changes, the function would execute
$: applyFilter(), $filterStore

function applyFilter(): void {
    if ($filterStore.length === 0) {
      jobs = [...data]
      return
    }

    jobs = data.filter((post) => {
      const { role, level, languages, tools } = post
      const keys = [role, level, ...languages, ...tools]

      const hasAllElements = $filterStore.every((item) => keys.includes(item))
      if (hasAllElements) return post
    })
  }