DevVault

DevVault is a developer resource search app built as part of a team project during a Chingu Voyage. It helps developers quickly find curated tutorials, blogs, and videos shared in the Chingu Discord.
Live versionRepo

DevVault app demo

Project Goal

Build a developer resource hub with intelligent search that actually finds what you are looking for. The search needed to handle typos, understand related terms (searching "js" should find"javascript"), and work even when the API goes down.

Tech Stack

  • React, Vite, TypeScript, Tailwind CSS
  • Context API with a custom usePersistedState hook for localStorage persistence
  • Fuse.js for typo-tolerant search
  • Material UI for select dropdowns
  • Framer Motion for animated placeholder UX

Teamwork & My Contributions

This was my fourth Chingu Voyage, so by this point I had a solid understanding of working in a team using Scrum and Agile methodologies. It was also the first Voyage where we had no major merge conflicts something I believe was thanks to better planning, communication, and GitFlow practices. It was easy to collaborate because the other developers also had experience working in Chingu teams and understood the value of clean pull requests and frequent updates.

  • Fuse.js fuzzy matching with 0.1 threshold for typo tolerance, searching across name, author, and resource type
  • Keyword expansion system that maps "js" to"javascript", "frontend" to [HTML, CSS, JavaScript, React]
  • Stopword removal using NLP library to filter out "the", "and", etc. for cleaner search results
  • Set-based deduplication to prevent duplicate results when multiple keywords match
  • localStorage caching with daily invalidation and fallback data when API fails
  • Wrote and shared a GitFlow guide to support team collaboration
Team collaboration in DevVault project

Challenges & Thought Process

The original Chingu API was unreliable and often went down. To keep the app functional, I:

  • Fetched data once per day and stored it in localStorage
  • Provided fallback resources using FALLBACK_DATA
  • Filtered broken URLs and removed duplicates from the API response

Building a smart, typo-tolerant search bar pushed me to deeply explore Fuse.js and carefully design the app’s state structure. I also added additional educational resources for new Chingu users, like a Git team workflow guide, GitFlow documentation, and helpful videos from the Chingu YouTube channel about how Voyages work.

What I Learned

  • How fuzzy search algorithms work and how to tune thresholds for the right balance of strictness vs flexibility
  • How to implement keyword expansion and synonym mapping for intelligent search
  • NLP concepts like stopword removal and why they matter for search quality
  • How to use Sets for O(1) deduplication instead of O(n) array methods
  • How to design caching strategies with time-based invalidation