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

Screenshot of DevVault app homepage

Project Goal

Build an app to help developers discover useful learning resources. It supports phrase-based search, tag filtering, persistent state, and fallback handling for API downtime.

Tech Stack

Tech icon 1Tech icon 2Tech icon 3Tech icon 4
  • 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.

  • Built the full-phrase and fuzzy search using Fuse.js
  • Implemented persistent state using a custom hook
  • Added fallback static data in case of API failures
  • Implemented tag filtering and sorting functionality
  • Created a custom API endpoint with handpicked Chingu resources
  • 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 to handle unreliable APIs by implementing fallback strategies and persistent caching
  • How to clean up and validate API data, including removing duplicates and broken links
  • How to build a smart, typo-tolerant search bar that supports full phrases using Fuse.js
  • How to separate state logic cleanly using custom hooks for a resilient UX