Feat: Better Search

[7sg56]

Description

The Search functionality on homepage is too basic, I have enhanced it with fuzzy search matching, better result sorting, and more tags to filter for, also has the capacity to filter names from the socials. The search now provides more relevant results even after typos.

Related Issues

N/A - This is a direct enhancement to improve user experience.

Changes Proposed

3 Character minimum requirement

// Require minimum 3 characters for search
if (value.trim().length < 3) {
  setProfiles([]);
  setSearching(true);
  return;
}

Fuzzy Search using fuse.js

// Name-specific fuzzy search only
if (criteria === 'name' && fuse) {
  const fuseResults = fuse.search(value);
  filteredResults = fuseResults
    .filter(result => result.score < 0.5) // Only good matches
    .map(result => result.item);
}

Character Match Sorting

// Simple character match count for name only
const getCharacterMatchCount = (user, searchTerm) => {
  const searchValue = normalizeString(searchTerm);
  const userName = normalizeString(user.name);
  let matchCount = 0;
  
  for (let i = 0; i <= userName.length - searchValue.length; i++) {
    let currentMatch = 0;
    for (let j = 0; j < searchValue.length; j++) {
      if (userName[i + j] === searchValue[j]) {
        currentMatch++;
      }
    }
    matchCount = Math.max(matchCount, currentMatch);
  }
  return matchCount;
};

Strict Result Filtering

// Only show results with good similarity (score < 0.5 means better match)
const goodMatches = fuseResults
  .filter(result => result.score < 0.5) // Only good matches
  .map(result => result.item);

Enhanced Fallback Search

// Basic fallback search - only exact matches to avoid random results, also in case fuse.js is unavailable 
const fallbackResults = combinedData.filter((user) => {
  const nameMatch = normalizeString(user.name).includes(searchValue);
  const locationMatch = normalizeString(user.location).includes(searchValue);
  return nameMatch || locationMatch;
});

Files Modified

• src/Homepage.jsx - Complete search logic rewritten
• src/components/Search/Search.jsx - UI improvements

Checklist

• I have read and followed the Contribution Guidelines.
• All new and existing tests passed.
• I have updated the documentation to reflect the changes I've made.
• My code follows the code style of this project.
• The title of my pull request is a short description of the requested changes.

Screenshots

Before:

After:

Note to reviewers

All the changes are backward compatible and don't affect existing functionality.

If you are reading this, please also merge my profile PR #1183

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[vercel]

@7sg56 is attempting to deploy a commit to the icecream's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

🎉 Incredible work, @7sg56! 🚀

🔥 Welcome to DevDisplay — A space where developers and all the tech enthusiasts can connect, collaborate, code, create, and conquer in the tech ecosystem.

At DevDisplay, we don't just welcome contributors—we celebrate them! 🎊 Because here, your ideas matter. Your code matters. You matter. 🚀

💡 This isn't just about adding your profile. It's about making an impact, showcasing your skills, and standing out in the developer ecosystem.

Think of DevDisplay as your own project, not just another open-source contribution. We're not just a platform—we're a global movement redefining the tech space. Our vision is to be the go-to platform for developers and tech enthusiasts worldwide.

🚀 Innovation has no limits!
We encourage you to think beyond the ordinary. Got a revolutionary idea? Spot a gap in the tech world? DevDisplay can be the solution! We want contributors like you to dream big, build bold, and bring game-changing features to life.

🌍 DevDisplay is more than an open-source project. It's a global tech hub, a thriving community, and a platform where you can connect, collaborate, code, create, and conquer.

🔥 Keep pushing boundaries—we're just getting started!
If you put your 💯 into creating something exceptional, you could even join our Global Core Team and also you can lead DevDisplay as a Community Leader in your area, college, or university.

---

💡 Your issue is now in review!

• Our maintainers will soon review your PR and provide feedback/suggestions. 🚀 Stay tuned, stay engaged, and get ready to bring your ideas to life! 💡

---

📢 Have ideas to improve DevDisplay? Let us know! We're always looking for innovative minds to shape the future of tech.

💬 Join the conversation. Grow with the community. You belong here. 🙌

• 🚀 Join DevDisplay GitHub DevDisplay Discussions: DevDisplay Discussions

---

📢 Join Our Global Developer Communities & Connect with Innovators:

• 🚀 Join DevDisplay Discord Community: Discord Community

📩 Need Help? Reach Out to the Team:

• 📧 Organization Email: team@devdisplay.org

💻 Follow DevDisplay on Social Media & Stay Updated:

• GitHub Organization: DevDisplay GitHub
• LinkedIn: DevDisplay LinkedIn
• Twitter (X): DevDisplay Twitter
• Instagram: DevDisplay Instagram

🔥 🌟 Thank You for Being Here!