Code Snippet Manager Web App with Syntax Highlighting and Tag Search

Every developer accumulates reusable code — a debounce function, a tricky SQL query, a thread-safe singleton, a data-fetching hook. In practice these fragments scatter across gists, chat histories, old projects and desktop files, and retrieving the right one often takes longer than rewriting it from memory. Generic note apps store code as plain text with no language awareness, while cloud snippet services demand accounts and connectivity for what is fundamentally a personal reference library. This project builds a dedicated code snippet manager as a web application: a dark, editor-style interface with a language sidebar, tag cloud and live search across titles, descriptions, tags and the code itself. Syntax highlighting is implemented from scratch in JavaScript with per-language tokenizers — no highlighting library, no CDN dependency — and the entire library persists in the browser's localStorage, so it works fully offline from a single HTML file. The result is both a genuinely useful developer tool and a complete, viva-ready demonstration of frontend engineering: tokenizing highlighters, client-side search and filtering, CRUD state management and browser storage.

1. On first load the app seeds seven realistic snippets (Python quicksort and binary search, JS debounce, SQL window function, C++ fast I/O, Java singleton, React useFetch) and stores the library in localStorage.
2. The state layer tracks the search query, language filter, tag filter and selected snippet; every change re-renders the sidebar counts, the filtered list and the detail view.
3. The detail view passes the snippet's code through its language's tokenizer, which emits color-coded, HTML-escaped tokens in a single regex pass; the result renders with line numbers in the code panel.
4. Search matches substrings across title, description, tags and code body, and wraps matches in highlight marks in the snippet list.
5. The add/edit modal writes through the same store: new snippets are prepended and selected, edits update in place, and every write persists to localStorage immediately.
6. Copy uses the Clipboard API with a fallback for non-secure contexts; favorites toggle a persisted star flag on the snippet.

Tech stack:

• HTML5 · CSS3 (custom dark editor theme)
• Vanilla JavaScript (ES6+, no framework)
• Hand-written regex tokenizer (no highlighting library)
• Browser localStorage (offline persistence)
• Clipboard API (copy-to-clipboard)
• Single-file build (no build step, no dependencies)

• [Hand-built syntax highlighter] A tokenizer written from scratch in JavaScript covers Python, JavaScript, React/JSX, SQL, C++ and Java — comments and strings are matched first so keywords inside them are never miscolored, with zero external library or CDN dependency.
• [Instant full-text search] One search box matches across titles, descriptions, tags and the code body itself, with matched terms highlighted in the result list and a "/" keyboard shortcut to focus it.
• [Language & tag filtering] A sidebar groups snippets by language with counts, and a tag cloud filters the library to any tag; filters combine with search and clear in one click.
• [Snippet CRUD with modal editor] Create, edit and delete snippets through a clean modal form (title, language, comma-separated tags, description, code); filenames and line counts update automatically.
• [Copy-to-clipboard] One click copies any snippet's code via the Clipboard API with a textarea fallback, with a toast confirming the copy.
• [Favorites] Star frequently used snippets; they sort visually to the top of the list with a gold star marker.
• [Offline localStorage persistence] The whole library is saved in the browser on every change — no server, no account, no internet needed after download.
• [Deep-link views] URL parameters open the app straight into a search, a tag filter, or the new-snippet form, which also makes each view easy to demo.

• Complete single-file source code (HTML/CSS/JS) with the hand-written highlighter
• 7 realistic seeded snippets demonstrating the library immediately
• Setup & customization guide (adding a language, changing the theme, seed data)
• Project report PDF (tokenizer design, search/filter architecture, storage model)
• PPT presentation for final review
• Viva Q&A preparation document (regex tokenizing, XSS-safe rendering, localStorage limits, Clipboard API)