[Feature] Implement Fuzzy Search for the Projects Directory

[Aditya948351]

Description

Currently, the search bar in the Projects Hub requires exact keyword matches. If a user has a typo (e.g., "reaact" instead of "react"), they get zero results.

Proposed Solution

1. Integrate a lightweight fuzzy search library like fuse.js.
2. When searching the array of projects, configure fuse.js to look at project titles, descriptions, and tags with a threshold of ~0.3 for typos.
3. Update the UI to render the fuzzy-matched results.

Expected Outcome

A highly forgiving and robust search experience.

[nishupr]

Hey @Aditya948351 !

I'd love to work on this feature! Fuzzy search with fuse.js is a great call - I've already mapped out the full implementation plan.

Current Problem

The existing search in Projects.tsx likely does a simple .filter() with .includes() or .toLowerCase() string match, which fails on any typo or partial mismatch.

Implementation Plan

• Install fuse.js - npm install fuse.js (tiny ~8KB library, zero dependencies)
• Initialize Fuse instance with the projects array and configure keys to search across title, description, and tags
• Set threshold to 0.3 as proposed - forgiving enough for typos, strict enough to avoid irrelevant results
• Replace existing filter logic with Fuse search results
• Handle empty query - return all projects when search bar is empty (Fuse returns nothing on empty string by default)
• No UI changes needed - just plug fuzzy results into the existing render logic

Code Change (Rough Idea)

import Fuse from 'fuse.js';

const fuse = new Fuse(projects, {
  keys: ['title', 'description', 'tags'],
  threshold: 0.3,
});

const results = query
  ? fuse.search(query).map(r => r.item)
  : projects;

Why fuse.js?

• Extremely lightweight (~8KB)
• No backend changes needed - purely client-side
• Well maintained, 18k+ GitHub stars
• Simple API, easy to tune threshold later

Could you please assign this issue to me?