OpenHub

A lightweight, vanilla JS discovery directory for 217+ open-source tools with real-time search, category filtering, and local favorites built with zero build steps or external dependencies.

Comment

Inspiration

The open-source ecosystem is packed with incredible tools across AI, developer productivity, data, and design. However, discovering and comparing them often requires wading through massive "Awesome" lists, bloated directories with heavy tracking, or ad-filled aggregator sites. We wanted to build OpenHub to return to the web's roots: a blazing-fast, privacy-first, zero-bloat discovery layer where developers can quickly search, filter, and launch directly into open-source projects without waiting on heavy frameworks or external servers.

What it does

OpenHub is a curated directory of 217 open-source tools across 6 core categories (AI, Developer Tools, Design, Productivity, Security, and Data) and 27 subcategories. Key capabilities include:

Instant Multi-Field Search: Real-time query matching across project names, descriptions, categories, subcategories, and tags.

Smart Filtering & Sorting: Dynamic category/subcategory breakdown with live result counts, sortable by star count, project name (A–Z / Z–A), or category.

Adaptive Layouts & Theming: Switchable Grid and List views with an OS-aware dark/light theme switch.

Client-Side Persistence: A favorites system and view preferences saved entirely in localStorage—requiring no user account, login, or tracking.

Rich Inspection: Detailed tool modals displaying licenses, primary languages, star counts, tags, and generated feature highlights.

How we built it

We deliberately built OpenHub using only vanilla web standards—HTML5, CSS3, and modern ES6 JavaScript—with zero external runtime libraries, frameworks, bundlers, or databases:

Semantic HTML5: Built an accessible structure spanning the hero, dynamic category rail, responsive card directory, and modal overlays.

CSS3 Design System: Powered by CSS custom properties (variables) for instant dark/light mode toggling, combined with CSS Grid and Flexbox for fully responsive layouts across mobile, tablet, and desktop screens.

Vanilla ES6 JavaScript: Implemented modular, pure helper functions for search indexing, multi-criteria filtering, sorting, pagination slicing, and localStorage state management.

Flat JSON Dataset: Stored the curated catalog locally in tools.json and loaded it via the native Fetch API.

Challenges we ran into Data Rendering & Performance: Rendering 200+ rich interactive cards simultaneously can degrade DOM performance and scrolling fluidity. We resolved this by building a clean pagination and "Load more" slicing system.

Image Fragility & Mixed-Content: Hotlinking 200+ third-party logos frequently causes broken images, CORS issues, and slow page loads. We engineered a fallback monogram generator (getInitials()) using SVG and inline styling that works offline and switches automatically to real images only when provided.

Pure Client-Side State Management: Synchronizing multiple filters, search text, active view modes, and pagination counters without a reactive framework like React or Vue required clean state orchestration in vanilla JS.

Challenges we ran into

We deliberately built OpenHub using only vanilla web standards—HTML5, CSS3, and modern ES6 JavaScript—with zero external runtime libraries, frameworks, bundlers, or databases:

Semantic HTML5: Built an accessible structure spanning the hero, dynamic category rail, responsive card directory, and modal overlays.

CSS3 Design System: Powered by CSS custom properties (variables) for instant dark/light mode toggling, combined with CSS Grid and Flexbox for fully responsive layouts across mobile, tablet, and desktop screens.

Vanilla ES6 JavaScript: Implemented modular, pure helper functions for search indexing, multi-criteria filtering, sorting, pagination slicing, and localStorage state management.

Flat JSON Dataset: Stored the curated catalog locally in tools.json and loaded it via the native Fetch API.

Accomplishments that we're proud of

Data Rendering & Performance: Rendering 200+ rich interactive cards simultaneously can degrade DOM performance and scrolling fluidity. We resolved this by building a clean pagination and "Load more" slicing system.

Image Fragility & Mixed-Content: Hotlinking 200+ third-party logos frequently causes broken images, CORS issues, and slow page loads. We engineered a fallback monogram generator (getInitials()) using SVG and inline styling that works offline and switches automatically to real images only when provided.

Pure Client-Side State Management: Synchronizing multiple filters, search text, active view modes, and pagination counters without a reactive framework like React or Vue required clean state orchestration in vanilla JS.

What we learned

How much modern browser APIs (ES6 Array methods, fetch, CSS custom properties, and localStorage) can accomplish without the overhead of heavy single-page application (SPA) frameworks.

Best practices for designing modular, pure JavaScript functions to handle complex client-side search, sorting, and UI synchronization.

What's next for OpenHub

Automated Metadata Syncing: Integrate GitHub API build scripts or Actions to keep repository star counts and licenses up to date automatically.

Community Submissions: Create a lightweight PR template and JSON schema validation pipeline for seamless community contributions.

Export & Share Collections: Allow users to export or share their favorited tools list via shareable URL hash parameters.

Built With

Share this project:

Updates

Submission history