Add Premium Glossary Explorer

[meetmarvelous]

Solana Glossary Explorer

Interactive, production-ready frontend for browsing the full @stbr/solana-glossary dataset. Designed to make 1001+ Solana ecosystem terms searchable, filterable, and accessible in three languages.

Deliverables

Explorer UI (explorer/)

• Vite + React 19 + TypeScript frontend consuming the glossary SDK via local link
• Real-time debounced search (300ms) across terms, definitions, and aliases
• Intelligent Pagination: Optimized for 24 terms per page to ensure 0ms lag and perfect grid symmetry
• Category filtering across all 14 glossary categories with responsive horizontal scrolling
• Glassmorphism design system with animated background orbs, gradient hover effects, and micro-animations
• Cmd+K / Ctrl+K keyboard shortcut to focus search
• Language switcher toggling between EN, PT, and ES with instant re-rendering
• Mobile-first responsive layout (1-3 column adaptive grid)
• Memoized components (React.memo) and optimized rendering (no layout thrashing)
• SPA-ready Vercel deployment config with rewrite rules

Data Contributions (data/terms/, data/i18n/)

• 5 new modern Solana ecosystem terms added:
  • agave-v2 — Next-gen Anza validator client
  • solana-seeker — Second-generation Solana mobile device
  • vibe-station — Community-driven hubs
  • kyiv-scheduler — Dynamic transaction scheduler
  • hypergrid — Native scaling framework for AppChains
• Full PT and ES translations for all 5 new terms in data/i18n/pt.json and data/i18n/es.json

Tech Stack

Layer	Technology
Framework	React 19 + TypeScript
Build	Vite 8
Styling	Tailwind CSS v4
Animations	Framer Motion
Data	@stbr/solana-glossary SDK
Deployment	Vercel

Test Coverage

Component	Status	Tool
SDK Data Layer	✅ 5/5 Passed	Vitest
Filtering Logic	✅ Verified	Manual + Unit

✓ src/lib/sdk.test.ts (5 tests)
  ✓ Solana Glossary SDK Wrapper
    ✓ should return all terms
    ✓ should get a specific term by id
    ✓ should return categories
    ✓ should filter terms by category
    ✓ should search terms correctly

Live Demo

https://solana-glossary-explorer.vercel.app

---

Screenshots

🖼️ Full Desktop Experience

🎥 Interaction Walkthrough

video-home.webm

---

Responsive Views & Search

Tablet View	Mobile View

🔍 Interactive Search: Finding a term across 1000+ entries with 0ms lag.

---

Architecture

explorer/
├── src/
│   ├── components/        # Navbar, SearchBar, CategoryFilter, TermCard, Pagination
│   ├── context/           # GlossaryContext (state, filtering, i18n, pagination)
│   ├── lib/               # SDK wrapper
│   ├── App.tsx            # Main layout with animated orbs
│   └── index.css          # Theme tokens + custom animations
├── vercel.json            # SPA routing
└── package.json

Setup

cd explorer && npm install && npm run dev

---

Review & Credits

cc: @kauenet 🚀