[Feature Request]: Add full-text search across notes — users cannot find topics without manually browsing the navigation tree

[prince-pokharna]

Summary

openCSE is a structured collection of CSE notes built with Next.js. While the navigation organizes content by subject and topic, there is no search functionality. A student who wants to find notes on "binary search trees" or "deadlock detection" must manually navigate through the subject hierarchy, which defeats the purpose of a revision-friendly platform.

Problem

• There is no search input anywhere in the current UI (confirmed by the Next.js app/ directory structure with no search route or component visible).
• Students studying for exams need to locate specific topics instantly — navigation-only access requires knowing exactly where content lives in the tree.
• The platform currently has notes for DSA arrays, OS, DBMS, CN, and others — as content grows, navigation-only access becomes increasingly inefficient.

Proposed Solution

Implement client-side full-text search using Flexsearch (lightweight, no external API) or Fuse.js:

1 — Build a search index at build time:

// lib/searchIndex.ts
import Fuse from 'fuse.js';
import { getAllNotes } from './notes';

export function buildSearchIndex() {
  const notes = getAllNotes(); // reads from /notes/ directory
  return new Fuse(notes, {
    keys: ['title', 'content', 'subject', 'tags'],
    threshold: 0.3,
    includeMatches: true,
  });
}

2 — Add a search bar component in the header:

// components/SearchBar.tsx
'use client';
import { useState } from 'react';
import { buildSearchIndex } from '@/lib/searchIndex';

const fuse = buildSearchIndex();

export function SearchBar() {
  const [query, setQuery] = useState('');
  const results = query.length > 2 ? fuse.search(query).slice(0, 10) : [];
  return (
    <div className="relative">
      <input
        placeholder="Search notes..."
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        className="w-full rounded border px-3 py-2"
      />
      {results.length > 0 && (
        <ul className="absolute bg-white shadow-lg rounded mt-1 w-full z-10">
          {results.map(({ item }) => (
            <li key={item.slug}>
              <a href={`/notes/${item.slug}`} className="block px-4 py-2 hover:bg-gray-100">
                <span className="font-medium">{item.title}</span>
                <span className="text-sm text-gray-500 ml-2">{item.subject}</span>
              </a>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

3 — Add a keyboard shortcut Ctrl+K / Cmd+K to focus the search bar, consistent with documentation site conventions.

Additional Notes

• Fuse.js adds ~25KB to the bundle and runs entirely client-side — no server cost.
• I will also add a /search?q= route for direct URL-based search linking.

I am happy to implement this. Could you assign this issue to me?

Labels: feature, enhancement, ux, GSSoC 2026

[prince-pokharna]

Hey @pushkarscripts ,
Please assign it to me under GSSoC 2026.
/assign /claim /claim-assignment