That is the problem Context Hub is trying to solve.

Context Hub (chub) gives coding agents curated, versioned documentation and skills that they can search and fetch through a CLI. It also gives them two learning loops: local annotations for agent memory and feedback for maintainers.

In this tutorial, you'll learn how the official chub workflow works, how Context Hub organizes docs and skills, how annotations and feedback create a memory loop, and how to build a companion relevance engine that improves retrieval without breaking the upstream content model.

This tutorial uses two public repositories side by side:

• the official upstream project: andrewyng/context-hub

• the companion implementation for this article: natarajsundar/context-hub-relevance-engine

I've also opened a corresponding upstream pull request from my fork to the main project. If you want to track that work from the article, use the upstream pull request list filtered by author: andrewyng/context-hub pull requests by natarajsundar.

What We'll Build

By the end of this tutorial, you'll have:

• a clear mental model for how Context Hub works

• a working local install of the official chub CLI

• a repeatable workflow for search, fetch, annotations, and feedback

• a companion repo that adds an additive reranking layer on top of a Context-Hub-style content tree

• a small benchmark and local comparison UI you can run end to end

• a clear bridge between the companion repo and the smaller upstream PR

Prerequisites

Before you start, make sure you have:

• Node.js 18 or newer

• npm

• comfort with the terminal

• basic familiarity with Markdown

Table of Contents

1. How to Understand Context Hub

2. How to Understand the Official Repo, the Companion Repo, and the Upstream PR

3. How to Install and Use the Official CLI

4. How to Understand Docs, Skills, and the Content Layout

5. How to Use Incremental Fetch and Layered Sources

6. How to Use Annotations and Feedback to Create a Memory Loop

7. How to See Where Relevance Still Misses

8. How the Companion Relevance Engine Improves Retrieval

9. How to Run the Companion Repo End to End

10. How to Read the Benchmark Honestly

11. How to Connect the Companion Repo to the Upstream PR

12. Conclusion

13. Sources

How to Understand Context Hub

Context Hub is easiest to understand as a workflow for turning fast-moving documentation into a reliable input for coding agents.

Instead of asking an agent to rely on whatever it remembers from training data, you give it a predictable contract:

1. search for the right entry

2. fetch the right doc or skill

3. write code against that curated content

4. save local lessons as annotations

5. send doc-quality feedback back to maintainers

That system boundary matters.

It makes the agent easier to audit, easier to improve, and easier to extend. It also keeps the interface small enough that you can reason about where the failures happen. If the agent still misses the answer, you can ask whether the problem happened during search, fetch, context selection, or generation.

How to Understand the Official Repo, the Companion repo, and the Upstream PR

This tutorial is intentionally split across two codebases and one contribution path.

The official upstream project, andrewyng/context-hub, is the source of truth for the real CLI, the content model, and the documented workflows. That's the codebase you should use to learn how chub works today.

The companion repository, natarajsundar/context-hub-relevance-engine, is where the relevant ideas in this article are made concrete. It's a companion implementation, not a replacement product. Its job is to make retrieval tradeoffs visible, measurable, and easy to run locally.

The upstream PR is the bridge between those two worlds. The companion repo is where you can iterate faster on benchmarks, reranking, and the comparison UI. The upstream PR is where the smallest reviewable slices can be proposed back to the main project. You can track that thread here: upstream PR search filtered by author.

That three-part framing keeps the article honest:

• use the upstream repo to understand the current system

• use the companion repo to explore relevant improvements end to end

• use the upstream PR to show how a larger idea can be broken into reviewable pieces

How to Install and Use the Official CLI

The official quick start is intentionally small.

npm install -g @aisuite/chub

Once the CLI is installed, you can search for what is available and fetch a specific entry:

chub search openai
chub get openai/chat --lang py

That's the happy path, but it helps to think through the request flow.

In practice, the most useful detail is that the CLI is designed for the agent to use, not just for the human to use by hand.

That's why the upstream CLI also ships a get-api-docs skill. For example, if you use Claude Code, you can copy the skill into your local project like this:

mkdir -p .claude/skills
cp $(npm root -g)/@aisuite/chub/skills/get-api-docs/SKILL.md \
  .claude/skills/get-api-docs.md

That step teaches the agent a retrieval habit:

Before you write code against a third-party SDK or API, use chub instead of guessing.

That behavioral rule is often as important as the docs themselves.

How to Understand Docs, Skills, and the Content Layout

Context Hub separates content into two categories:

• docs, which answer “what should the agent know?”

• skills, which answer “how should the agent behave?”

That distinction makes the content model easier to scale. Docs can be versioned and language-specific. Skills can stay short and operational.

The directory structure is also predictable. The content guide organizes entries by author, then by docs or skills, then by entry name.

A small example looks like this:

author/docs/payments/python/DOC.md
author/docs/payments/python/references/errors.md
author/skills/login-flows/SKILL.md

This is one of the reasons Context Hub is easy to work with.

The shape of the content is plain Markdown, the main entry file is predictable, and the build output is inspectable. You don't have to reverse engineer a hidden prompt layer to figure out what the agent is reading.

How to Use Incremental Fetch and Layered Sources

One of the best design choices in Context Hub is that it doesn't force you to inject every file into the model on every request.

Instead, the entry file gives you the overview, and the reference files hold the deeper material.

That lets you fetch content in progressively larger slices.

chub get stripe/webhooks --lang py
chub get stripe/webhooks --lang py --file references/raw-body.md
chub get stripe/webhooks --lang py --full

This is a token-budget feature as much as it is a documentation feature. A good agent should first load the overview, decide what part of the task matters, and only then fetch the specific supporting file.

Context Hub also supports layered sources. You can merge public content with your own local build output through ~/.chub/config.yaml.

A minimal configuration looks like this:

sources:
  - name: community
    url: https://cdn.aichub.org/v1
  - name: my-team
    path: /opt/team-docs/dist

That means you can keep public docs in one lane and team-specific runbooks in another lane while still giving the agent one search surface.

How to Use Annotations and Feedback to Create a Memory Loop

Context Hub has two different improvement channels.

Annotations are local. They help your agent remember what worked last time. Feedback is shared. It helps maintainers improve the docs for everyone.

That distinction matters because not every lesson belongs in the shared registry. Some lessons are environment-specific. Others point to content quality issues that should be fixed centrally.

Here is what local memory looks like in practice:

chub annotate stripe/webhooks \
  "Remember: Flask request.data must stay raw for Stripe signature verification."

And here's the feedback path:

chub feedback stripe/webhooks up

That loop is simple, but it's one of the most important ideas in the project. It turns a one-off debugging lesson into either persistent local memory or a signal that the shared docs need to improve.

How to See Where Relevance Still Misses

The upstream project already has a real ranking story. It uses BM25 and lexical rescue so that package-like identifiers, exact tokens, and fuzzy matches still have a chance to surface.

That is a strong baseline.

But developer queries are often much messier than package names.

People search for:

• rrf

• signin

• pg vector

• hnsw

• raw body stripe

Those aren't “bad” queries. They're realistic shorthand.

And they expose an opportunity in the content model itself: many of the exact answers live in reference files such as references/rrf.md, references/raw-body.md, and references/hnsw.md.

So the question is not whether the current search works at all. It clearly does. The better question is this:

How can you improve retrieval without breaking the content contract that already makes Context Hub useful?

The answer in the companion repo is to keep the current model and add a reranking layer on top of it.

How the Companion Relevance Engine Improves Retrieval

The companion repository in this article is context-hub-relevance-engine.

It keeps the same broad ideas that make Context Hub attractive:

• plain Markdown content

• DOC.md and SKILL.md entry points

• build artifacts you can inspect

• local annotations and feedback

• progressive fetch behavior

Then it adds one new build artifact: signals.json.

At build time, the engine extracts extra signals such as:

• headings from the main file

• titles and tokens from reference files

• language and version metadata

• source metadata and freshness

• annotation overlap

• feedback priors

The first pass stays cheap and transparent. The reranker only runs after the baseline has done its work.

That approach matters for two reasons.

First, it's additive. You don't have to redesign the content tree.

Second, it's measurable. You can define concrete failure modes, fix them one by one, and run the same benchmark every time you change the scorer.

How to Run the Companion Repo End to End

Open the repository on GitHub, clone it using GitHub’s normal clone flow, and then run the commands below from the project root.

cd context-hub-relevance-engine
npm install
npm run build
npm test

The repository has no third-party runtime dependencies, so npm install is mostly there to keep the workflow familiar. The main commands are all plain Node scripts.

How to Reproduce a Baseline Miss

Start with the query rrf.

node bin/chub-lab.mjs search rrf --mode baseline --lang python

Expected output:

No results.

Now run the improved mode.

node bin/chub-lab.mjs search rrf --mode improved --lang python

Expected top result:

langchain/retrievers [doc] score=320.24
  Composable retrieval patterns for hybrid search, parent documents, query expansion, and reranking.

That win happens because the improved mode looks beyond the top-level entry description. It also sees the reference file title rrf, the related terms from query expansion, and the broader token overlap in the extracted signals.

How to Reproduce a Workflow-intent Win

Try a sign-in query.

node bin/chub-lab.mjs search signin --mode baseline
node bin/chub-lab.mjs search signin --mode improved

The baseline misses. The improved mode returns playwright-community/login-flows because the reranker treats signin, sign in, login, and authentication as related intent.

How to Test the Memory Loop

Write a local note:

node bin/chub-lab.mjs annotate stripe/webhooks \
  "Remember: Flask request.data must stay raw for Stripe signature verification."

Then fetch the doc:

node bin/chub-lab.mjs get stripe/webhooks --lang python

You will see the main doc content, the list of available reference files, and the appended annotation.

That's the behavior you want from an agent memory loop: learn once, reuse many times.

How to Run the Benchmark

Start from an empty store:

npm run reset-store
node bin/chub-lab.mjs evaluate

The included synthetic stress set reports the following summary with an empty store:

You can also seed the store and rerun the evaluation:

npm run seed-demo
node bin/chub-lab.mjs evaluate

That demonstrates how annotations and feedback can push relevant entries even higher when the query overlaps with the agent’s own history.

How to Launch the Local Comparison UI

npm run serve

Then open http://localhost:8787 in your browser.

The UI lets you compare baseline and improved retrieval, inspect stored annotations and feedback, rebuild the local artifacts, and rerun the benchmark from one place.

How to Read the Benchmark Honestly

The benchmark in this repo is intentionally small.

That is a feature, not a flaw.

The point is not to claim universal search quality. The point is to make a handful of realistic failure modes easy to reproduce:

• acronym queries

• shorthand workflow queries

• reference-file topic queries

• memory-aware reranking

That keeps the evaluation honest.

If a future scoring change breaks rrf, signin, or raw body stripe, you'll know immediately. And if you add a stronger dataset later, you can keep these tests as regression guards.

The benchmark files included in the repo are:

• demo/benchmark.json

• docs/benchmark-empty-store.json

• docs/benchmark-seeded-store.json

• docs/relevance-improvement-plan.md

How to Connect the Companion Repo to the Upstream PR

A good companion repo is broad enough to explore ideas quickly. A good upstream PR is narrow enough to review.

That's why the two shouldn't be identical.

The companion repository is where you can keep the full relevance story together:

• the local comparison UI

• the synthetic benchmark

• the richer reranking signals

• the debug and explain surfaces

• the documentation that walks through tradeoffs end to end

The upstream PR should be smaller and more surgical. In practice, that usually means proposing the most reviewable slices first, such as:

1. reference-file signal extraction

2. explainable score output for debugging

3. a lightweight benchmark fixture format

4. one additive reranking hook behind a flag

That keeps the main repository maintainable while still letting the article and companion repo tell the full engineering story. The upstream thread for this work lives here: andrewyng/context-hub pull requests by natarajsundar.

Conclusion

What makes Context Hub interesting is not just that it stores documentation. It gives you a clear system boundary for improving coding agents.

You can inspect what the agent reads. You can decide when it should retrieve. You can layer public and private sources. You can persist local lessons. And you can improve ranking without tearing the whole model apart.

The companion relevance engine shows how to keep what already works, make one part of the system measurably better, and package the result in a way other developers can run, inspect, and extend. The upstream PR, in turn, shows how to turn a broad idea into smaller pieces that are realistic to review in the main project.

Diagram Attribution

All diagrams used in this article were created by the author specifically for this tutorial and its companion repository.

Sources

• Context Hub repository

• Context Hub README

• Context Hub CLI README

• Context Hub CLI reference

• Context Hub content guide

• Context Hub bring-your-own-docs guide

• Context Hub feedback and annotations guide

• Companion repository: context-hub-relevance-engine

• Upstream pull request search filtered by author

Most traditional search systems struggle to deliver this experience without complex and heavy infrastructure.

Meilisearch is an open-source search engine that changes this by offering a fast and developer-friendly engine that is easy to set up and extend.

When you combine Meilisearch with AI models for natural language understanding and semantic relevance, you can build a powerful and intuitive search experience that feels modern and intelligent.

This article explains how Meilisearch works, how to set it up, and how to integrate AI models to deliver better relevance and better ranking. You will also see how hybrid search and semantic embeddings work, and how to deploy Melisearch to the cloud using Sevalla.

What We’ll Cover

• Understanding Meilisearch

• Setting Up Meilisearch

• Using Hybrid Search and AI Together

• Using AI To Rewrite Queries

• Deploying Meilisearch to the Cloud using Sevalla

• Conclusion

Understanding Meilisearch

Meilisearch is a lightning-fast search engine that fits easily into any application.

It’s built in Rust and designed to deliver results in less than fifty milliseconds. It supports semantic search, hybrid search, typo tolerance, sorting, geosearch, and many different languages.

Melisearch also provides a clean RESTful API and a wide range of SDKs that make integration easy with JavaScript, Python, Go, PHP, Ruby, Rust, and various other languages.

You can try Meilisearch by exploring the official demos. These demos show how Meilisearch is not limited to one specific use case but can fit many types of workflows.

Meilisearch supports two editions. The Community Edition is fully open source under the MIT license and can be used freely even for commercial products.

The Enterprise Edition introduces features like sharding and is governed by a commercial license. You can deploy Meilisearch yourself or choose Meilisearch Cloud, which handles hosting, updates, monitoring and analytics without requiring server maintenance.

Setting Up Meilisearch

Starting Meilisearch is simple. You can download the binary and run it directly or you can start it through Docker. Running through Docker is the fastest way to test it on your machine.

docker run -it --rm -p 7700:7700 getmeili/meilisearch:latest

Once the server is running, you can communicate with it using HTTP. The simplest use case is indexing documents into an index and querying them. Here is an example using Python:

import requests

docs = [
    {"id": 1, "title": "AI in Finance", "text": "How AI is changing banks"},
    {"id": 2, "title": "AI in Law", "text": "How AI helps legal teams"},
]
requests.put(
    "http://localhost:7700/indexes/articles/documents",
    json=docs
)

Searching is just as easy.

import requests

query = "ai banks"
res = requests.post(
    "http://localhost:7700/indexes/articles/search",
    json={"q": query}
)
print(res.json())

The engine returns results in milliseconds. Typo tolerance, word proximity and relevance ranking work out of the box.

Meilisearch automatically handles synonyms if you configure them and allows custom sorting rules for attributes like price or date. It also supports faceting, filters, and geosearch, which makes it suitable for e-commerce, travel apps, real estate listings, and data-heavy dashboards.

Using Hybrid Search and AI Together

Hybrid search combines full-text search with semantic vector search.

Meilisearch supports semantic search through vector fields and enables the combination of both approaches. This helps you serve users who type vague queries or natural language questions.

The AI model provides embeddings that capture meaning, while Meilisearch handles the fast retrieval and ranking.

To add semantic search, you first generate embeddings for your documents using an AI model. Here is a simple example using OpenAI embeddings:

from openai import OpenAI
import requests

client = OpenAI()
def embed(text):
    out = client.embeddings.create(
        model="text-embedding-3-small",
        input=text
    )
    return out.data[0].embedding
doc = {
    "id": 3,
    "title": "AI in Insurance",
    "text": "How AI powers underwriting",
    "vector": embed("How AI powers underwriting")
}
requests.put(
    "http://localhost:7700/indexes/articles/documents",
    json=[doc]
)

When the user searches, you embed the query and compute similarity. You can mix this with keyword search results returned from Meilisearch. The combined ranking creates a better experience than either approach alone.

Using AI to Rewrite Queries

Users often type incomplete or unstructured queries. They might type “How does AI help banks?” instead of keywords.

You can use an AI model to rewrite this into something more search-friendly. The rewritten query produces better results in Meilisearch while still respecting the user’s original intent.

from openai import OpenAI
import requests

client = OpenAI()
def rewrite_query(user_query):
    prompt = f"Rewrite this for search: {user_query}"
    out = client.chat.completions.create(
        model="gpt-4o-mini",
        messages=[{"role": "user", "content": prompt}]
    )
    return out.choices[0].message.content
user_query = "how does ai help banks"
rewritten = rewrite_query(user_query)
res = requests.post(
    "http://localhost:7700/indexes/articles/search",
    json={"q": rewritten}
)
print(res.json())

This pattern improves accuracy for question-based searches across blogs, documentation platforms, and knowledge bases. You can also use the model to normalise queries, remove ambiguous text, expand synonyms, and fix spelling mistakes before they reach Meilisearch.

Deploying Meilisearch to the Cloud using Sevalla

You can deploy Meilisearch anywhere. It runs on a small server, a local machine, or inside containers.

Self-hosting gives you full control and is usually preferred by technical teams who want to keep sensitive data in-house. You can choose any cloud provider, like AWS, DigitalOcean, or others to set up Melisearch. But I will be using Sevalla.

Sevalla is a PaaS provider designed for developers and dev teams shipping features and updates constantly in the most efficient way. It offers application hosting, database, object storage, and static site hosting for your projects.

I am using Sevalla for two reasons:

• Every platform will charge you for creating a cloud resource. Sevalla comes with a $50 credit for us to use, so we won’t incur any costs for this example.

• Sevalla has a template for Melisearch, so it simplifies the manual installation and setup for each resource you will need for installation.

Log in to Sevalla and click on Templates. You can see Melisearch as one of the templates. Click Deploy.

You will see the resources being provisioned for the application.

Once the deployment is complete, click on “Visit app”.

You now have a production-grade Melisearch server running on the cloud. You can use this to set up indexes for your database and use the JavaScript or other SDKs to interact with Melisearch.

Here is the full list of APIs provided by Melisearch.

Conclusion

Meilisearch gives you a fast and elegant base for search. AI models add understanding and personalisation. When these two work together, you get a search experience that feels instant, adaptive, and intelligent.

You can start small with keyword search and then add query rewriting, embeddings, hybrid search, and reranking. You can also use suggestions, synonyms, and filters to improve the user journey.

With its simple API, wide language support, and strong ecosystem, Meilisearch makes it easy to build a search that feels right at home in any modern app.

Hope you enjoyed this article. Find me on Linkedin or visit my website.

They can write code, summarize books, and explain complex topics, but they struggle with real-time facts.

Their knowledge ends at their training cutoff, which means they can’t tell you what happened last week or even last year.

That’s where web search comes in.

By connecting a model to a search API like Tavily, you can give your LLM access to current, factual information from the internet. This makes your AI assistant, chatbot, or RAG pipeline much more accurate and context-aware.

This guide will show you how to enable real-time web search in your LLM workflow using Tavily and LangChain.

Please note that Tavily is a paid tool (with a generous free tier) and is popular among the Langchain community. I’m not affiliated with the product – it’s just used in a course on AI Agents that I’m taking and seemed like a useful example.

What We’ll Cover:

• Why Add Web Search to an LLM?

• How Tavily Works

• Setting Up Tavily

• Creating an LLM Agent with Tavily Search

• How Tavily Search Works

• Using Tavily Without LangChain

• Improving Search Quality

• Building a Search-Aware Chatbot

• Real-World Applications

• Why Tavily Is a Good Fit

• Conclusion

Why Add Web Search to an LLM?

When you ask a model a question like “What are the best AI frameworks in 2025?” it tries to predict an answer from its training data. If that data stops in 2023, it might list outdated tools.

By integrating web search, you give the model a way to look things up before answering.

This process is called retrieval-augmented generation (RAG). It combines two steps: retrieving relevant data and generating a response based on it.

Tavily handles the retrieval part. It searches the web for the most relevant content and sends it back as clean, structured summaries that LLMs can easily use. The result is an AI that sounds intelligent and stays accurate.

How Tavily Works

Tavily is a purpose-built web search API designed for AI applications.

Unlike traditional search engines that return links, Tavily returns short, relevant summaries with context. It focuses on delivering concise information that models can understand without complex parsing.

The Tavily API is simple and fast. You can use it directly with Python, Node.js, or through LangChain integrations.

It also supports advanced filtering, topic targeting, and maximum result control to help you fine-tune the amount and quality of retrieved data.

Setting Up Tavily

First, sign up on tavily.com and get an API key. Tavily is not a free tool but comes with 1000 free credits for us to play with.

Then install the required packages:

pip install -qU langchain langchain-openai langchain-tavily

Once installed, export your API key so Tavily can authenticate your requests.

export TAVILY_API_KEY="your_api_key"

Now you’re ready to connect Tavily to a language model through LangChain.

Creating an LLM Agent with Tavily Search

LangChain makes it easy to combine multiple tools with your model. In this example, we’ll create an agent that uses Tavily as its search backend.

from langchain.agents import create_agent
from langchain_openai import ChatOpenAI
from langchain_tavily import TavilySearch

# Initialize the Tavily Search tool
tavily_search = TavilySearch(max_results=5, topic="general")

# Initialize the agent with the search tool
agent = create_agent(
    model=ChatOpenAI(model="gpt-5"),
    tools=[tavily_search],
    system_prompt="You are a helpful research assistant. Use web search to find accurate, up-to-date information."
)
# Use the agent
response = agent.invoke({
    "messages": [{"role": "user", "content": "What is the most popular sport in the world? Include only Wikipedia sources."}]
})
print(response)

This example creates a conversational agent powered by OpenAI’s GPT model and the Tavily Search tool. The agent reads the user’s query, uses Tavily to fetch relevant web data, and returns an up-to-date answer.

The system_prompt gives the model clear instructions to rely on web results for factual accuracy. You can customise it to limit or expand how much the agent depends on search.

How Tavily Search Works

1. The user sends a question. The agent receives the message and determines that it needs external information.

2. Tavily performs a search. It queries the web for relevant results, summarizing content into readable snippets with source links.

3. The LLM reads the summaries. The model uses these snippets as context and generates a final answer that includes real-world facts.

This pattern transforms your LLM from a static knowledge base into a dynamic assistant that stays current with live data.

Using Tavily Without LangChain

You can also use Tavily directly with Python if you want more control over the flow.

from tavily import TavilyClient
from openai import OpenAI

tavily = TavilyClient(api_key="your_api_key")
client = OpenAI()

def answer_with_tavily(question):
    search_results = tavily.search(question)
    snippets = "\n".join([r["content"] for r in search_results["results"]])
    prompt = f"Use the following search results to answer the question:\n\n{snippets}\n\nQuestion: {question}"
    response = client.responses.create(model="gpt-4o-mini", input=prompt)
    return response.output_text
print(answer_with_tavily("What are the biggest AI startups of 2025?"))

This example sends the Tavily search summaries directly into an LLM prompt. It’s simple, flexible, and works even without LangChain.

Improving Search Quality

You can make Tavily results more relevant by adjusting a few parameters.

• max_results: controls how many snippets to return. Lower values make answers faster and more focused.

• topic: helps narrow down the type of content you want (like “technology”, “science”, or “finance”).

• filters: used to restrict results to certain domains or exclude unwanted ones.

For example:

tavily_search = TavilySearch(max_results=3, topic="technology")

This setup tells Tavily to return only the top three tech-related results, ideal for focused queries.

Building a Search-Aware Chatbot

Once you have Tavily connected, you can create a chatbot that automatically uses search when needed.

For example, if a query contains words like “latest”, “today”, or “news”, the agent can trigger a Tavily search.

def smart_chatbot(question):
    if any(word in question.lower() for word in ["today", "latest", "recent", "news"]):
        return answer_with_tavily(question)
    else:
        return client.responses.create(model="gpt-4o-mini", input=question).output_text

This makes your chatbot dynamic, using real-time data when necessary, but keeping simple responses fast.

Real-World Applications

Search-augmented LLMs are used everywhere.

Research assistants use them to pull recent papers, marketing teams use them to track trends, and analysts use them to gather competitive insights. Developers build knowledge agents that can explore documentation or regulations automatically.

By combining Tavily’s structured search results with an LLM’s reasoning power, you can build tools that stay both accurate and conversational.

Why Tavily Is a Good Fit

Traditional search APIs return unstructured HTML or raw snippets that models struggle to read.

Tavily is optimized for AI. It cleans, summarizes, and filters data before returning it. The output is concise, readable, and safe to use directly in your prompts or RAG pipelines.

It also reduces hallucinations because the model has factual, grounded context to work with. This makes it ideal for production AI systems that need reliability as much as creativity.

Tavily is not the only option for web search. There are other options like RAG web browser, Exa, etc. Here is a full list with their pros and cons.

Conclusion

Large language models are powerful, but they don’t live on the internet. Without search, they guess. With Tavily, they know.

By integrating Tavily into your LLM workflow, you bridge the gap between static intelligence and real-time knowledge. Whether you’re building a chatbot, research tool, or AI assistant, adding Tavily Search gives your model access to the world’s most current information.

The combination of LangChain, OpenAI, and Tavily turns any LLM into a connected, informed, and reliable AI researcher, one that can finally answer questions about today, not just yesterday.

Hope you enjoyed this article. Signup for my free newsletter TuringTalks.ai for more hands-on tutorials on AI. You can also visit my website.

MongoDB is a non-relational, no-SQL database that differs from relational SQL-based databases such as PostgresSQL, MySQL.

These SQL-based databases use conventional rows and columns to display data, whereas MongoDB uses collections. Because of this primary distinction, it's important for you to understand certain special terminologies specific to MongoDB.

The inspiration for this tutorial came from working on a personal project. I had to implement a feature which required a complex MongoDB query operation. Scrolling through the MongoDB docs regarding the issue, I got more confused and I couldn’t figure it out.

After consulting several websites and books, I was finally able to get it done. So in this tutorial, my aim is to simplify MongoDB complex search operations for you as a newer MongoDB user.

I hope this article answers your burning questions and helps you navigate through MongoDB query operations.

Before we begin, here are some important prerequisites for this tutorial:

• Basic knowledge of Node.js
• Basic knowledge of MongoDB
• Knowledge of MongoDB commands
• Knowledge of Postman

What Are MongoDB Queries?

Queries are commands that you use to obtain data from a MongoDB database. They work similarly to the SQL query system, but they operate differently syntax-wise.

A conventional SQL query looks like this:

“SELECT * FROM db.Users”(SQL) vs  “db.collection.find(MONGO DB)”

This command lets you get all data stored in the Users database.

Many query operators can be used on a MongoDB database collection to obtain relevant information. But I'll be shedding more light on a few relevant ones in this tutorial.

MongoDB Query Examples

Now I'll explain some of the query operators available to you in MongoDB. You can run the code samples provided below in the MongoDB command line interface to see how they work.

Find(): This operator returns all the documents in a collection. You can test this out by running;

Db.collection.find()

In this case, replace collection with the actual name of the collection you intend to search.

findOne(): this query operator returns the first document in a collection that matches the filter attached to the operator.

Db.collection.findOne()

Aggregate(): This operator collates results from various document in a given collection. You can combine it with other query operators to organize the results and group various data efficiently.

You'll see an example of how to use this operator alongside the limit and sort query operators.

limit(): This operator limits the total expected search results to the number specified.

db.collection.aggregate([{ $limit: 6 }]);

This code above limits the total aggregated data to just 6.

Sort(): This operator sorts out the findings from the search query in either ascending or descending order.

db.collection.aggregate([
  { $sort: { fieldName: 1 } } // Replace 'fieldName' with the actual field name and use 1 for ascending or -1 for descending order
]);

You can test these query operators in a standard web application. There are quite a lot of programming tools available to develop applications, but in this tutorial, we'll be using Node.js because it is less complex to use and easily compatible with the MongoDB database application.

How to Implement Search Queries in MongoDB using Node.js

Node.js is a JavaScript-based backend language, and it'll be our go to language for MongoDB usage in this tutorial.

Right now, we'll be writing some code to search documents using the Node.js Express backend framework.

Mongoose will serve as the connection between MongoDB and Node. But before we delve in, what is Mongoose?

What is Mongoose?

Mongoose is a popular object relational mapping (ORM) tool which helps establish an efficient connection between the database (MongoDB) and the object oriented programming language (Node.js/JavaScript).

It provides extensive features such as data modeling, schema development, model authentication, and data management which simplifies web API and database interactions.

You can also use it to interact with other databases such as Redis, MySQL and Postgres.

Now, let's set up Mongoose.

Npm install mongoose

To connect it to MongoDB in a Node.js application, use the following code:

const mongoose = require("mongoose");

mongoose.connect('mongodb://localhost/location', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  autoIndex: true
})
  .then(() => {
    console.log("Connected to MongoDB");
  })
  .catch((err) => {
    console.error(err);
  });

This code initiates a connection with the MongoDB database and maintains the connection to allow for data exchange with the backend application.

How to Search Through Documents in MongoDB

In this section, we'll further improve our search query by applying some of the MongoDB operations we learned in the previous sections. We'll get books in a database based on the findOne parameter we briefly mentioned earlier.

First, let's use the Find() operator like this:

router.get("/", async (req, res) => {
  try {
    const books = await Book.find();
    res.status(200).json(books);
  } catch (err) {
    res.status(500).json(err);
  }
});

The code above requests all the books in the database. If successfully executed, it returns a status code of 200 with all the books in the collection in JSON format. If unsuccessful, it returns an error code.

How we can apply the Limit() operator like this:

router.get("/", async (req, res) => {
  try {
    let limitedBooks = await Book.find().limit(6);
    res.status(200).json(limitedBooks);
  } catch (err) {
    res.status(500).json(err);
  }
});

This code is quite similar to the code above. But it has an additional limit operator attached which limits the response expected to the first 6 books from the database.

And finally, we'll apply the FindOne() operator:

router.get("/", async (req, res) => {
  try {
    let myBook = await Book.findOne({ Author: "Man" });
    res.status(200).json(myBook);
  } catch (err) {
    res.status(500).json(err);
  }
});

In the code above, we tried finding the first book written by someone called “Man”. If it successfully finds that document it will return a success code 200 and the JSON format of that book collection in the database, else it will return an error code.

How to Search Between Texts in MongoDB

Searching between texts entails a more complex approach to searching a MongoDB database.

It involves searching texts and phrases in the entire database and then displaying the info of objects containing these texts searched.

It is commonly used in complex search operations in order to include only information which is grouped based on price, authors, address, age or any other relevant common variable.

So now, let's implement a special MongoDB search query operator. We'll use this operator to search between texts and return the results as appropriate.

The code for this is displayed below:

let myBook = await Book.find({
  "$or": [
    { Author: { $regex: req.params.key } },
    { Title: { $regex: req.params.key } },
  ]
});

This code above utilizes the regex format to help locate phrases in the database and returns it. Regex works on the principle by matching a set of strings with similar patterns. This helps provide a faster response to our search queries and only returns documents that are similar to our search.

Conclusion

With this, we have come to the end of the tutorial. We hope you’ve learnt essentially about MongoDB search queries and how to harness various search operators to obtain the best possible outcomes from your database.

Feel free to drop comments and questions and also check out my other articles here. Until next time, keep on coding.

Among various content management systems, WordPress is a popular choice due to its user-friendly interface and flexibility.

But having a WordPress site is just the beginning. Optimizing it for search engine visibility is a crucial step toward ensuring your content reaches the right audience.

In this comprehensive guide, we will delve into the key strategies and plugins that can significantly enhance your WordPress website's SEO, enabling it to rank higher on search engine results pages and attract more organic traffic.

1. On-Page SEO Optimization

On-Page SEO Optimization holds paramount importance for WordPress sites as it lays the foundation for higher search engine rankings, improved user experience, and increased organic traffic.

By meticulously crafting high-quality content, targeting relevant keywords, and optimizing meta tags, WordPress websites become more discoverable by search engines, ensuring that the right audience finds and engages with the content.

Using the proper heading tags, multimedia elements, and logical site structure not only enhances readability for users but also provides search engines with valuable information about the content's relevance and context.

On-Page SEO is the fundamental step that sets the stage for successful online visibility, enabling WordPress sites to establish their authority, credibility, and competitiveness in an ever-expanding digital landscape.

Keyword Research and Analysis

Effective SEO begins with thorough keyword research and Google competitors analysis. Identify the relevant keywords that resonate with your content and target audience.

Utilize SEO tools such as Google Keyword Planner, SEMrush, or Ahrefs to uncover high-volume and low-competition keywords. These keywords will serve as the foundation for your content creation and optimization efforts.

High-Quality Content Creation

Compelling, informative, and unique content is the cornerstone of SEO success. Craft articles, blog posts, and other content that addresses your audience's needs and interests. Utilize proper heading tags (H1, H2, H3, etc.) to structure your content logically. Engage your readers with multimedia elements like images, videos, and infographics.

At Camp Media, we use an SEO playbook, which involves all of these factors and allows us to be consistent with the process and outsource our best practices to new members of the team.

Optimizing Meta Tags

Meta tags are the first interaction users have with your content in search results.

Write enticing title tags that encapsulate the essence of your content while incorporating target keywords. Craft concise and relevant meta descriptions that encourage users to click through to your website. Also, use meta robots tags to control how search engines crawl and index your pages.

2. Technical SEO Enhancement

Technical SEO is a vital aspect for WordPress sites, serving as the backbone that supports optimal performance and user experience while ensuring search engines can effectively crawl, index, and rank the website's content.

A fast-loading website, facilitated by caching plugins and image optimization, not only keeps users engaged but also aligns with search engines' preference for responsive and swift sites, leading to higher rankings.

Mobile responsiveness is no longer an option but a requirement, as search engines prioritize mobile-friendly websites.

Implementing SSL certificates for HTTPS encryption not only enhances user trust but is also recognized as a ranking factor by search algorithms.

Overall, Technical SEO Enhancement guarantees that the technical infrastructure of a WordPress site is robust, efficient, and aligned with search engine guidelines. This ultimately contributes to improved visibility, higher search rankings, and a seamless user experience.

To make your website error-free, you can opt for a professional SEO services so that experts with technical SEO knowledge can quickly set your site up for success.

Website Speed and Performance

Website loading speed is a critical factor for both user experience and SEO. Use caching plugins such as WP Super Cache or W3 Total Cache to reduce loading times. Optimize images by compressing them without sacrificing quality. Minimize server response time by choosing a reliable hosting provider.

Mobile Responsiveness

Mobile-friendliness is no longer optional – it's a necessity. Ensure your WordPress theme is responsive, adapting seamlessly to various screen sizes.

Responsive themes provide an optimal user experience on both desktop and mobile devices. Test your site's mobile usability to identify and fix any issues.

SSL and Website Security

Website security is not only important for user trust but also for SEO. Implementing an SSL certificate to enable HTTPS on your site not only encrypts data transmission but is also considered a ranking factor by search engines.

Regularly audit your website's security measures and apply updates to prevent vulnerabilities.

3. User Experience and Accessibility

User Experience (UX) and Accessibility are of paramount importance for WordPress sites as they directly impact how visitors interact with and perceive the content.

A well-designed and intuitive site structure ensures that users can easily navigate through the website, finding the information they need without frustration.

By implementing breadcrumb trails, clear navigation menus, and logical URLs, WordPress sites create a user-friendly environment that encourages longer visits and reduces bounce rates. Also, optimizing for accessibility through features like descriptive alt text for images and semantic HTML ensures that all users, including those with disabilities, can access and understand the content.

Not only does this demonstrate inclusivity and social responsibility, but it also aligns with search engines' emphasis on providing valuable and accessible content to a wide range of users.

Ultimately, prioritizing User Experience and Accessibility within a WordPress site contributes to improved engagement, better search engine rankings, and a positive online reputation.

Intuitive Site Structure

A clear and intuitive site structure improves user experience and SEO. Ensure your navigation is logical and user-friendly. Create a URL structure that reflects the hierarchy of your content. Implement breadcrumbs to help users understand their location within your site and navigate back easily.

Accessibility Optimization

Design your website with accessibility in mind. Ensure your content is accessible to users with disabilities by using semantic HTML. Provide descriptive alt text for images and multimedia to assist screen readers.

Following accessibility guidelines not only benefits users but also enhances your site's search engine visibility.

4. Link Building and Off-Page SEO

Link Building and Off-Page SEO play a pivotal role in enhancing the authority, credibility, and visibility of WordPress sites in the vast digital landscape.

By acquiring high-quality backlinks from reputable and relevant sources, these websites garner validation from external sources, signaling to search engines that their content is trustworthy and valuable.

Engaging in ethical link building practices, such as guest posting, influencer collaborations, and industry partnerships, not only establishes connections within the online community but also drives referral traffic and expands the site's reach.

Social media integration further amplifies the distribution of content, leading to increased engagement and potentially generating more inbound links.

Recognizing that search algorithms consider external signals as a measure of a site's authority, Link Building and Off-Page SEO contribute to higher search rankings, expanded online visibility, and a broader audience reach for WordPress sites.

Creating High-Quality Backlinks

Backlinks from authoritative and relevant sources signal to search engines that your content is valuable and trustworthy. Once acquired, it's also crucial to ensure you get backlinks indexed for them to contribute effectively to your SEO.

Focus on earning backlinks naturally through strategies like guest posting on reputable websites, collaborating with influencers, and participating in industry forums. Avoid questionable practices like buying links or engaging in link farms, as they can lead to penalties.

Social Media Integration

Social media plays a significant role in amplifying your content's reach and engagement. Share your articles, blog posts, and other content on various social media platforms (Twitter, Pinterest, Facebook, LinkedIn, and Facebook's new Threads).

Encourage users to share and engage with your content by adding social sharing buttons to your site. While social signals are not direct ranking factors, increased engagement can indirectly influence SEO.

5. Essential SEO Plugins for WordPress

Essential SEO plugins are a cornerstone for optimizing WordPress sites. They offer an array of tools and functionalities that simplify and streamline the complex process of SEO.

Plugins like Yoast SEO and All in One SEO Pack provide invaluable insights and guidance for on-page optimization, ensuring that content is well-structured, keyword-optimized, and equipped with compelling meta tags.

These plugins facilitate the creation of XML sitemaps and breadcrumbs, enabling search engines to efficiently crawl and index the site's content.

Also, caching plugins like WP Super Cache and W3 Total Cache significantly enhance website speed and performance, critical factors for both user experience and search engine rankings.

By integrating these essential plugins, WordPress sites not only save time and effort but also benefit from a comprehensive approach to SEO that contributes to higher visibility, increased organic traffic, and a more competitive online presence.

Yoast SEO

Yoast SEO is a widely-used plugin that offers a comprehensive set of tools for on-page optimization. It helps you optimize content by providing real-time analysis of your focus keyword usage, readability, and meta tags. Configure XML sitemaps and breadcrumbs to enhance search engine crawling and user navigation.

All in One SEO Pack

Similar to Yoast SEO, the All in One SEO Pack plugin provides features for optimizing your content's meta tags, title tags, and meta descriptions. Configure settings for title templates, meta tags, and more. The plugin also offers advanced features suitable for experienced users who want more control over their SEO settings.

WP Super Cache and W3 Total Cache

As previously mentioned, these caching plugins are essential for enhancing website speed and performance. They create static versions of your pages, reducing server load and improving loading times.

Set up browser caching and object caching to further enhance speed. Minimizing database queries also contributes to a smoother user experience.

6. Monitoring and Continuous Improvement

Monitoring and continuous improvement are essential practices for maintaining the effectiveness and relevance of WordPress sites in the dynamic online landscape.

Regularly tracking key metrics through tools like Google Analytics provides insights into user behavior, site performance, and traffic sources. This data-driven approach enables webmasters to identify trends, understand user preferences, and refine content strategies accordingly.

Google Search Console offers invaluable information about how search engines index and rank the site, allowing for swift identification and resolution of any issues that might affect visibility.

As search algorithms evolve and user expectations change, the ability to adapt is crucial. By consistently monitoring and analyzing data, WordPress sites can ensure they remain aligned with best practices. Ongoing improvements based on insights gleaned from these tools can lead to enhanced user experience, sustained search engine visibility, and continued success in a competitive digital landscape.

Google Analytics Integration

Google Analytics provides invaluable insights into your website's performance, user behavior, and traffic sources. Monitor key metrics such as page views, bounce rates, and user demographics. Analyze this data to refine your content strategy and identify areas for improvement.

Google Search Console

Google Search Console is a powerful tool for monitoring your website's indexing status and search performance. Submit XML sitemaps to ensure search engines crawl and index your content efficiently. Regularly review the index coverage report to identify potential issues and address crawl errors promptly.

Conclusion

In conclusion, optimizing your WordPress website for search engine visibility is a multifaceted endeavor. It involves a combination of on-page and technical SEO strategies, user experience enhancements, link building efforts, and the integration of essential plugins.

By implementing these strategies and leveraging the power of SEO plugins, you'll be well-equipped to improve your website's ranking on search engine results pages and attract a steady flow of organic traffic.

Remember that SEO is an ongoing process, requiring continuous monitoring, adaptation, and improvement to stay ahead in the ever-evolving digital landscape.

In the fast-paced and competitive online world, optimizing your WordPress website for search engine visibility is not just a choice – it's a necessity.

This comprehensive guide has explored the key strategies and plugins that can significantly enhance your website's SEO, leading to higher rankings, increased organic traffic, and improved user engagement.

By focusing on on-page optimization, technical enhancements, user experience, link building, and utilizing essential SEO plugins, you're setting your website up for success in the digital realm.

Again, remember that SEO is not a one-time task but an ongoing process. The algorithms that search engines use to rank websites are continually evolving, and staying ahead requires dedication and adaptability.

This means you'll need to regularly monitor your website's performance, analyze user behavior, and stay informed about the latest SEO trends and updates. By consistently fine-tuning your strategies, you can ensure your WordPress website remains competitive and visible in search engine results.

Whether you're a seasoned webmaster or a novice WordPress user, the insights shared in this guide provide a solid foundation for optimizing your website and driving meaningful results.

By implementing the practices outlined here, you're not just enhancing your search engine visibility – you're creating a better online experience for your users, fostering trust, and ultimately achieving your goals in the digital landscape.

So, roll up your sleeves, implement these strategies, and watch as your WordPress website climbs the ranks, attracting more organic traffic and achieving the success it deserves.

I bet I've used the CTRL + F shortcut more than any other keyboard shortcut in my life. CTRL + Z probably comes close, but I use CTRL + F to find things...

💥ALL 💥

💥💥THE 💥💥

💥💥💥TIME 💥💥💥

gif of man saying we need more

And yes, it'll work just fine in a Google Sheet to find information.

But sometimes I want to display a range of results based on a word I'm searching for. To do that, we'll create a dynamic search bar in our Google Sheet.

You can also follow along in this walkthrough video:

The Search Bar

Our search bar is nothing more than a cell or range of cells. In the example below, it starts in J2.

Screenshot of a search bar on Google Sheets

By adding a =QUERY() function in J5 we can look at whatever is typed into J2 (the red circle) and display the search results below it (the blue rectangle).

In my example, I'm searching through a bunch of personal finance transactions (with randomized amounts😀) that are in columns A:F.

Screenshot of finance data on Google Sheets

The Query Function

The =QUERY() function looks in the Transactions range (which is that A3:F range where all the transactions live).

And it grabs all the info in either column B or column D that CONTAINS what we type in J2.

So it searches through all our transaction descriptions in column B and categories in column D for whatever we type in J2. The LOWER command turns the info in B and D into lowercase. This makes it easier to search because the CONTAINS command is case-sensitive.

=QUERY(Transactions, 
       "SELECT A,B,C,D,E WHERE LOWER(B) CONTAINS '"&J2&"' OR LOWER(D) CONTAINS '"&J2&"'")

• the only caveat is that if you type in uppercase in the search bar, it won't work properly.

The Filter Function

By using the =FILTER() function in combination with the =SEARCH() function, we can do the same thing in a little bit shorter formula and without having to worry about case sensitivity.

=IF(ISBLANK(J2),"",FILTER(Transactions,SEARCH(J2,B3:B225)))

The tradeoff here is that when we want to add multiple conditions like we did in the =QUERY() statement, it breaks down. Both =FIND() and =SEARCH() did not work properly when trying to use them more than once inside the =FILTER().

I was able to find a work around by using the plus operator and constructing the formula in this way:

=IF(ISBLANK(J2),"",FILTER(Transactions,(B3:B225=J2)+(D3:D225=J2)))

Unfortunately when you filter in this way, partial matches are not included in the search results.

In the case of Query, partial answers are always returned.

So, when we enter "hom" all the lines with "home" in it would be returned. When using multiple conditions with filter, nothing would return unless you entered the whole word "home".

What About XLOOKUP?

The issue with XLOOKUP is twofold. One, it doesn't handle partial matches well unless you add wildcard characters:

=XLOOKUP("*"&J2&"*",B3:B225,A3:F225,,2)

This increases complexity but still works.

The more important difference is that it will only return one result so it's not going to work at all for us for this use case.

The Winner is Query

Query takes the prize simply because it doesn't need further manipulation to add multiple conditions, and it will return all the values that meet our search criteria.

It may take you a minute to wrap your head around the syntax, but it's just as powerful and more versatile than Filter in the long haul.

The only thing to make sure to remember is case sensitivity. If you're using the LOWER command in your query, don't use any uppercase search letters.

Make it Neat

In the full formula, I've added an =IF() function at the start to handle the blank search bar. We want to return nothing in that case:

=IF(ISBLANK(J2),"", QUERY(Transactions "SELECT A,B,C,D,E WHERE LOWER(B) CONTAINS '"&J2&"' OR LOWER(D) CONTAINS '"&J2&"'")

Screenshot of a blank search bar in Google Sheets

Follow Along

Come follow me over on YouTube as I make tutorials each week.

Sign up here to get my newsletter in your email each week.

Eamonn's Sheets | Coding | Education logo

But fear not! With the right techniques, you can efficiently search and lookup information in large datasets without feeling like you're climbing Everest.

In this article, I'll show you how to take the pain out of search operations in Python. We'll explore a range of techniques, from using the built-in bisect module to performing a binary search, and we'll even throw in some fun with sets and dictionaries.

So buckle up and get ready to optimize your search operations on large datasets. Let's go!

Method 1: Linear Search in Python

The simplest way to search for an item in a list is to perform a linear search. This involves iterating through the list one element at a time until the desired item is found. Here is an example of a linear search:

def linear_search(arr, x):
    for i in range(len(arr)):
        if arr[i] == x:
            return i
    return -1

In the code above, we define the function linear search, which accepts two inputs: a list arr and a single item x. The function loops through the list, iterating through each element and comparing it to the desired item x. The function returns the item's index in the list if a match is found. In the absence of a match, the method returns -1.

Linear search has an O(n) time complexity, where n is the list length. This indicates that the time needed to conduct a linear search will increase proportionally as the size of the list grows.

Method 2: Binary Search in Python

If the list is sorted, we can perform a binary search to find the target item more efficiently. Binary search works by repeatedly dividing the search interval in half until the target item is found. Here is an example of a binary search:

def binary_search(arr, x):
    low = 0
    high = len(arr) - 1
    while low <= high:
        mid = (low + high) // 2
        if arr[mid] < x:
            low = mid + 1
        elif arr[mid] > x:
            high = mid - 1
        else:
            return mid
    return -1

In the code above, we define the function binary search, which accepts as inputs a sorted list arr and a target item x. The low and high indices are used by the function to maintain a search interval.

A comparison between the target item x and the middle element of the search interval is performed by the function on each iteration of the loop.

The modified search interval omits the bottom half of the list if the middle element is less than x. The search interval is modified to omit the top half of the list if the middle element is greater than x. The function provides the item's index in the list if the middle element equals x.

If the desired item cannot be located, the function returns -1. Binary search has an O(log n) time complexity, where n is the list length. This means that, especially for big lists, binary search is substantially more effective than linear search.

Method 3: Search Using Sets in Python

If the order of the list is not important, we can convert the list to a set and use the in operator to check whether an item is present in the set. Here is an example:

my_list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
my_set = set(my_list)
if 5 in my_set:
    print("5 is in the list")
else:
    print("5 is not in the list")

In the above code, we define a list my_list and convert it to a set my_set. We then use the in operator to check whether item 5 is present in the set. If the item is present, we print a message indicating that it is in the list. If the item is not present, we print a message indicating that it is not in the list.

Using sets for search operations can be very efficient for large lists, especially if you need to perform multiple lookups, as sets have an average time complexity of O(1) for the in operator. But sets do not preserve the order of the elements, and converting a list to a set incurs an additional cost.

Method 4: Search Using Dictionaries in Python

If you need to associate each item in the list with a value or some other piece of information, you can use a dictionary to store the data. Dictionaries provide a fast way to look up a value based on a key. Here is an example:

students = {
    "John": 85,
    "Lisa": 90,
    "Mike": 76,
    "Sara": 92,
    "David": 87
}
if "Lisa" in students:
    print(f"Lisa's grade is {students['Lisa']}")
else:
    print("Lisa is not in the class")

In the above code, we define a dictionary students that associates the name of each student with their grade. We then use the in operator to check whether the name "Lisa" is in the dictionary, and if so, we print her grade.

Dictionaries provide an average time complexity of O(1) for lookups based on the key, which makes them very efficient for large datasets. But, dictionaries do not preserve the order of the items, and there is an additional cost associated with creating the dictionary.

Conclusion

Searching and looking up info in large datasets can be a daunting task, but with the right tools and techniques, it doesn't have to be. By applying the methods we've covered in this article, you can efficiently navigate massive datasets with ease and precision.

From the built-in bisect module to the powerful capabilities of sets and dictionaries, Python offers a range of efficient and versatile options for finding and retrieving data. By combining these techniques with smart programming practices and optimization strategies, you can create lightning-fast search operations that can handle even the largest datasets.

So don't let big data intimidate you. With a little bit of creativity, a lot of perseverance, and the techniques we've explored in this article, you can conquer any search challenge and emerge victorious. Happy searching!

Many people are unaware of the power of Linux terminals. Linux has an incredibly powerful command line that allows you to search files and directories in a fraction of a second.

Whether you’re a beginner or an expert, and if you're looking to take your file management skills to the next level, you've arrived at the right spot. This article will help you understand the basics of the most commonly used find command in Linux.

What is the find Command in Linux?

The find command allows you to search for files and directories on your computer. It adds the flexibility to search for files in a specific directory or recursively through all sub-directories.

Let’s explore the power of the find command

How to Search a File by Name

Let’s say you saved a file called hello_world.html somewhere and you don’t even remember the directory name. But your boss is asking you to send them the file immediately.

Usually, if you forgot where you stored a file, you'd begin by going through folder after folder and checking if the file exists.

This is when the find command does a great job. Instead of searching the file manually on your computer, you can use the find command to automate the process.

By passing the name of the file using the -name flag, the find command searches and returns the location of the file.

find -name <file_name>

Terminal command to search a file by name

But remember the -name flag performs a case-sensitive search. If you are looking to do a case-insensitive search, you can use the -iname flag instead.

find -iname <file_name>

Terminal command to do case-sensitive search

You can also use the find command as an alternative to the ls command in some places. Let's assume you need to find all the files ending with the .txt extension. You can do so with the find command using the regex pattern (*.txt).

find /path/to/search -name "*.txt"

Terminal command displaying file search by matching a pattern

This command will list all the .txt files in your current directory and its sub-directories.

To find .txt files in a particular directory and sub-directory, you can replace the /path/to/search with the path of your directory.

How to Find a Directory in Linux

Searching for a directory is possible by passing the d to the -type parameter in the find command.

find /path/to/search -type d

Terminal command to search a directory using find command

In the above screenshot, we're finding a directory named zip from our current directory.

Similarly the -type option accepts other parameter options to simplify our finding process.

• f finds the list of regular files
• b finds the list of block devices
• c finds the list of character devices
• l finds the list of symbolic links
• s finds the list of sockets
• p finds the named pipes

How to Search a File by Size in Linux

Adding the -size option along with the find command helps you find files based on size. Prepend a + or - to the size to represent greater than and less than, respectively.

find /path/to/search -size <size_of_the_file>

Terminal command to search files by size

In the above screenshot, we're finding all the files that have a size greater than 1 GB.

You can also search for all files that fall within a specific size range.

For example, if you want to find all the files that are above 50 MB and below 100 MB, you can run the following command:

find /path/to/search -size +50M -size -100M

Terminal command to search files within a range

You can specify the size in your preferred notation. A few of the available notations are:

1. K represents KB
2. M represents MB
3. G represents GB
4. b represents bytes
5. c represents blocks

How to Search a File Based on Time Modified

Every file has a created and last updated time associated with it. Let's assume you have thousands of files in your directory. You edited a file in the past couple of days and forgot its name. You're sure that you have edited only a couple of files after that.

In such cases, you can find all the files that were modified within the past 7 days. This limits your search from 1000+ files to a more manageable amount. You'll be able to find the file you edited in seconds after running the command.

This is possible by passing -mtime parameter with the find command.

find /path/to/search -mtime <-number_of_days_ago>

Terminal command to search file based on modified time

Let's assume another scenario, where today's date is February 10, 2023. You modified a file before Feb 3, 2023. After Feb 3, 2023, you modified a lot of files. You have to find the file which you modified before Feb 3, 2023. So, basically, you need the files that were modified before Feb 3, 2023.

Strange scenario, right?

But, you can also run this query using the find command. You can achieve this by exchanging the negative sign (-) with the positive sign (+).

Here's the modified command for you:

find /path/to/search -mtime +7

How to Execute a Command on Files Filtered from the find Command

This question may confuse you. Before revealing the answer, let's understand the question clearly with a real scenario.

Let's assume you have 1000 files in a directory, and running the find command returns 20 matching files. You want to move these 20 files into a different directory. How can you achieve that?

Simply put, we have to run a command over each of the filtered files.

You can do this by passing the -exec option with the find command.

The -exec option executes a command on each file that is found in the search. The -exec option is followed by a command and its arguments, with the {} symbols representing the path of the file being processed.

To represent the end of the -exec command, we have to add \; (a backward slash and a semi-colon).

Here's the syntax:

find /path/to/search -name  -exec  {}  \;

Let’s try to move the filtered files from the 5minslearn directory to the zip directory.

Here’s the command:

find ./5minslearn -name "*.zip" -exec mv {} ./5minslearn/zip \;

This command searches for all files ending with a .zip in the ./5minslearn directory and then moves each file to the ./5minslearn/zip directory.

The -exec option allows you to perform a wide range of operations on the files that are found. You can replace the move command from the above example by copying, deleting, or even changing the file permission command.

How to Execute a Command on Files Filtered with a Confirmation

Most people will prefer to use this if they're not sure about whether to apply the operation on each file.

The -ok option is similar to the -exec option except that it will ask for confirmation before executing the operation on each file. This command is super helpful to review files that will be affected before executing the specific operation. You also have the option to decline if you're not sure or don't wish to apply the command.

For example, this time let's try to move the .txt files to the other directory.

find /path/to/search -name "*.txt" -ok mv {} /path/to/destination \;

Terminal command to move the filtered files with a confirmation

The above command searches for all files with a .txt extension in the ./5minslearn directory and then prompts the user to confirm before moving each file to the ./5minslearn/text_files directory.

To approve the operation, enter yes and no to decline the operation and skip to the next file.

The -ok option is useful when you want to be cautious about the files you are modifying, as it allows you to inspect each file and its location before executing the specified command.

How to Find a File with Detailed Information

The -ls option in the find command is used to display information about the files found in the search, in the format of the ls command. This option provides detailed information about the files, such as their permissions, owner, size, and last modified time.

find /path/to/search -name "*.<file-extension>" -ls

Terminal command to list files in ls command format

How to Find and Remove Files

Have you ever needed to find files and remove them from your computer? The -delete option in the find command does this for you. It allows you to delete files that match the specified criteria.

find . -name "*.<extension>" -delete

In the above example, you can see that the find command deleted the files with the .html extension

Note: This operation is irreversible. Be 100% sure when you run the delete operation.

I would advise running the find command without the -delete flag at first and ensure that only the files that need to be deleted are shown. Once you're sure, you can execute the same command appending -delete flag.

Conclusion

In this article, you learned how to search files effectively using your Linux terminal.

These are very basic options in the find command that I think every developer should know. I believe mastering the fundamentals is the first step to becoming more advanced with Linux. I've been covering basics in all my blogs to help you create a solid foundation.

To learn more about Linux, subscribe to my email newsletter on my site and follow me on social media.

Nowadays, most web applications have a search feature. Users can use the search feature in order to navigate websites more easily.

Implementing a search feature in Ruby on Rails is very easy. By using only a few lines of code you can set it up.

This tutorial assumes that you have basic knowledge of Ruby on Rails. If you need an introduction to the framework, check out this course.

What Will We Be Creating

By the end of this article, we'll have a web app with a search feature that looks like this:

Demo of the app

How to Generate the Post Scaffold

Here we're using Ruby version 3.0 and Rails version 6.1.7.

Rails scaffold refers to the automatic generation of files that forms the basic structure of the rails project. These files include controllers, views, models, routes, and migration.

Now, let's scaffold the post using the following command:

rails g scaffold post title description:text

Now, you need to run the migration in order to update the schema using the rails db:migrate command.

If you run the server now, you can perform all the CRUD operations in the project.

How to Add Haml to the Project

You will be using haml in views instead of erb. You can do this by simply adding gem 'haml', '~> 6.1', '>= 6.1.1' in the gemfile. You can get all gems from the https://rubygems.org/ website.

Haml uses indentation and its main purpose is to make the markup look beautiful.

Now, you can use the haml extension in views instead of erb. So, you can rename application.html.erb to application.html.haml. You can also use html to haml tools for converting erb to haml files.

How to Build the Search Form

Once that's done, you're at the main part of the tutorial. So, let's add the form in the application.html.haml file.

```ruby %body %form{action: "/search"} %input{placeholder: "Search",name: "key",type: "text"} %button{type: "submit"} Search = yield

This code will generate a form in the whole application.

Here, you are passing the action attribute which will redirect to the search page when the form is submitted. Also, you are passing the key as the name attribute for the input element.

If you submit the form now you will get the following routing error:

Screen recording showing the routing error.

How to Add Root and Search Routes

Let's add a few routes in the routes.rb file.

```ruby root "posts#index"

get '/search', to: "posts#search"

The first route makes the index view the root page.

The second route adds the search route as a get method. So, you need to create a search action with some SQL queries in the posts controller.

How to Add the Search Action in the Controller

In the above route, the search route is looking for search actions in the posts controller. So, let's create it.

```ruby def search key = "%#{params[:key]}%" @posts = Post.where("name LIKE ?", key) end

Here, in the search action, the key variable holds the value of params[:key]. You get the value of params[:key] after the form submission.

The % symbol matches zero, one, or multiple characters. The above code uses two % symbols before and after params[:key] to match the value of params[:key] present in any position with the name column records in the database.

It is using the LIKE operator with a where clause in order to perform a search. ? is a placeholder value in queries and gets replaced with whatever arguments get passed – for example, key in this case.

Additionally, you can also use the or operator for searching multiple columns in the database.

@posts = Post.where("name LIKE ? or description LIKE ?", key, key)

You can search for both the name and description records using the above code.

How to Add the Necessary Views

Next, you need to add a search.html.haml file. But before that, let's create a new partial called _post.html.haml file in order to reuse the code. The post partial will look like this:

```ruby

%tbody -@posts.each do |post| %tr %td= post.name %td= post.description %td= link_to 'Show', post %td= link_to 'Edit', edit_post_path(post) %td= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %br/ = link_to 'New Post', new_post_path

This is how the search.html.haml file will look:

```ruby

%h1 Search Results %p#notice= notice %h1 Posts %table %thead %tr %th Name %th Description %th{colspan: "3"} =render "post"

And, you need to update the index.html.haml file as well.

```ruby

%p#notice= notice %h1 Posts %table %thead %tr %th Name %th Description %th{colspan: "3"} = render "post"

By doing this, you are using the post partial in both index and search view.

Finally, the search feature works as expected.

You can find the full source code of this project in this GitHub repository.

Conclusion

This is how you can create a search feature in a Rails application.

If you liked this article, please consider buying me a coffee ☕.

You can find me on Twitter for various content related to Web Development.

Thanks for reading.

And these applications require a lot of computation. Imagine searching for a particular DNA sequence out of millions, or searching for a user in Google's database.

That's why we need an algorithm that runs very fast without consuming lots of memory. And that's what you'll learn about here.

In this tutorial, we will be diving deep into two famous search algorithms: Rabin-Karp's algorithm and the Knuth-Morris-Pratt algorithm. We'll also discuss their time and space complexity, which is equivalent to the time and space an algorithm consumes, depending on its input size. You will also learn about common data structures for searching.

A very basic knowledge of programming is required to follow along. We'll be using Python examples in this tutorial.

Table of Contents

• Data structures for bioinformatics and searching
• Naïve search algorithm
• Rabin-Karp's algorithm
• Knuth-Morris-Pratt algorithm
• Conclusion

Data Structures for Bioinformatics and Searching

Let's first discuss some data structures that you should know even if we weren't diving too deeply into the topic.

The Trie Data Structure

A trie is a tree-like data structure where each nodes stores a letter of an alphabet. You can structure the nodes in a certain way so that words and strings can be retrieved from the structure by traversing down a branch (path) of the tree.

Let's take the words ANA, AND, and BOT for example – their prefix tree or trie will look like this:

How a trie looks like

Tries are widely used for:

• Auto complete
• Spell Checkers
• Longest prefix matching
• Browser history

Suffix trees

Suffix trees are tree-based data structures, but instead of taking multiple words to build the tree we will be using the suffixes of a single world.

If we consider the string AABA, we will first add a $ sign to the end of the string. That $ will make string comparison easier. Now the string is AABA$.

We will consider all of it's suffixes and the tree will look like this:

A suffix tree

Burrows Wheeler transform

Now we will discuss the burrows wheeler transform which is very useful data structure fort string compression.

This data structure is widely used in bioinformatics for a very specific reason. I want you to imagine a string representing a genome. It maybe very long, like 20 million characters.

But there is actually a way to store genomes efficiently. Imagine the string AAAAABBBAAA. This string has many repeats and we can actually compress this string to be something like this: A5B3A3. This is very useful for genomes as well which have many repeated characters.

Now let's take the string BANANA. We will first add a $ sign to the start of the string then compute all the cyclic rotations of $BANANA. Then will sort the cyclic rotations – and here is the importance of the dollar sign: that value, when sorting, is less than all alphabet values, so it will make sorting way easier.

After we sort the cyclic rotations, the string formed by the last characters of the sorted cyclic rotations is the burrows wheeler transform. It will look like this:

Burrows wheeler transform

Now as you can see, the burrows wheeler transform tends to have lots of repeats. You might also ask how to reverse the operation. To do that, look at the first characters of the sorted cyclic rotations. They are the same as the characters in the burrows wheeler transform but in sorted order.

So by sorting the burrows wheeler transform, we will get the first and the last letters and compute the original string.

Naïve Search Algorithm

Now let's look at a brute force solution for finding a pattern in a string. This approach is not optimal, as it runs with O(n*m) time complexity (where m is the length of the pattern and n is the length of the string).

We will consider two pointers, I and J. First we'll initialize I and J to be 0. Then we will run a while loop that will keep running while I is less than the length of the string.

Every time the loop runs we will compare the characters at the index I+J in the string and the character at the index J in the pattern. If they are equal, we will increment J, but of mpt. we will increment I and reset J to be 0. If j ever exceeds the length of the pattern, then there's a match.

The code for this will look like this:

def Find_Match(pattern,string): 

  #initialise i and j
  i=0
  j=0

  while i<len(string):
   if string[i+j] == pattern[j]:
     j+=1
   if string[i] != pattern[j]:
     j=0  
     i+=1
   #Let's say j is equal to the length of the pattern. Then to reach the first match index we can go back a number of steps equal to the length of the pattern.
   if j==len(pattern):
    return i-j

  #Incase there is no match  
  return -1

Rabin-Karp's Algorithm

The problem with the naïve approach is that it runs in O(n**2) time complexity which is horrible when it comes to large inputs like genomes. This means we need something better.

Comparing two strings is linear time, because we need to compare each character for each index. But what if we don't need to do that – what if we transformed the strings into numbers?

Here is the main idea of this algorithm. Let's say there is a function that returns a number associated with each string in the alphabet. We will use the ASCII value of the strings for that.

And then to transform a string into a number we will compute the sum of the ASCII values of all its characters. This a simple hashing function:

def hash(string):
 count=0
 # in python ord return the ascii value of a character
 for i in string:
  count+=ord(i)

 return count

Now let's say we want to find an in banana. Then we will first compare hash(an) to hash(ba) then to hash(an) and so on till we reach the end of the string. When the hash values match, we can then compare the pattern and the substring because hash(na) and hash(an) are equal so we need an extra check.

You might be thinking this is silly – why do we need to do all of this? Computing the hash function needs to iterate over the string so we didn't achieve any better time complexity. And you're completely right.

But what if we can compute the hash value of a substring from its previous substring? The difference is in the starting and ending characters – and that's called a rolling hash. That's what makes this algorithm run at O(n*m) worst case and O(n+m) average case: because of collisions.

For example, hash(na) is equal to hash(an), so here we need to compare na and an. The hash function I showed you is a very simple one. The better the hash function, the fewer collisions we will have. But I don't want to make this too fancy, so I will be using this hash function.

rolling hash

def Rabin_Karp(string, pattern):
 #compute the hash value of the pattern
 hashed_pattern=hash(pattern)

 #compute the hash value of the first substring with length equal to the length of the pattern

 first_hash=hash(string[0:len(pattern)])

 for i in range(len(string)-len(pattern)+1):
  if i !=0:
   first_hash-= hash(string[i-1])
   first_hash+= hash(string[i+len(pattern)-1])

  if hashed_pattern == first_hash:
   #second check
   if pattern == string[i:len(pattern)]:
    return i

 #in case no matches are found 
 return -1

Knuth-Morris-Pratt Algorithm

Now we will discuss the last algorithm for today. This one is very complicated but I will try to make it as simple as possible.

The idea behind this algorithm is that the naïve approach is great unless the string and the pattern have many repeats – like for example searching for AAAB in AAAXAAA. In this case do we really need to reset the j pointer to 0 after the first mismatch? Actually no we don't, and I will show you why.

When we analyze this pattern, we can see that it's quite special. Let's say we started at i=0 and we reached j=3. Then the next iteration we got a mismatch.

We don't really need to reset j, since for this given pattern we have the two first characters equal to the second and third characters. And since j already was 3, then the first 3 characters in the string are equal the first three characters in the pattern. And the second and third characters in the string are equal to the first and second characters in the pattern. So we can skip two positions by resetting j to 2 instead of 0.

Now you might ask how we'll know the value of j after the mismatch. Well, the answer depends on the pattern. For example abac if we got a mismatch when we reached j=3 (when we reached c) and since ab is equal to ba, we can actually skip b for the next iteration.

As you can see this works when we have a common suffix and prefix in a substring of a pattern, so we need to preprocess the string. And for each index of that substring, we can compute the number of skips and store it in an array known as the longest suffix prefix array.

Now we'll write the function for computing the LSP array. But first I will explain what I will be doing:

• the first element in the array is always 0
• we will create an array LSP with the same length as the pattern
• we will have twp pointers i and prevlps. i is an iteration variable initially set to 1, since the first element in the array is always 0. prevlps keeps track of the previous longest prefix suffix.
• we will run a while loop which will keep running while i is less then the length of the pattern. It will compare pattern[i] and pattern[prevLps]. If they match, we will set LCP[i] to prevlps +1, and we'll increment i and prevlps by 1.
• if they don't match and prevlps was 0 already, we will set LCP[i] to 0 and increment i.
• if prevlps was not 0, we will set prevlps to LCP[prevlcp-1].

Let's take an example using the string ANAN. First i was 1 and prevlps was 0. The first iteration happens, and A is not equal n and prevlps is 0 – so the LCP is now [0,0,0,0].

Now for the second iteration we will compare pattern[prevlps] which is A and A which evaluates to true. So now i is 3, prevlps is 1, and LCP is [0,0,1,0].

And finally, in the final iteration we will compare N and N. The same thing happens as in the past iteration, and LCP is [0,0,1,2].

The code for LCP is the following:

def LCP(pattern):
 LCP_array=[0]* len(pattern)

 i=1
 prevlcp=0

 while i<len(pattern):
  if pattern[i]==pattern[prevlcp]:
   LCP_array[i]=prevlcp+1
   i+=1
   prevlcp+=1

  elif prevlcp == 0:
   LCP_array[i]=0

  else:
   prevlcp=LCP_array[prevlcp-1]

 return LCP_array

Now since we have the LCP array we can run the KMP algorithm. It's similar to the naïve algorithm but with some improvements. It will look like this:

def KMP(pattern,string): 

  LCP_array=LCP(pattern)

  #initialise i and j
  i=0
  j=0

  while i<len(string):
   if string[i+j] == pattern[j]:
     j+=1
   if string[i] != pattern[j]:
     #The line that changed
     j=LCP_array[j-1] 
     i+=1
   #Let's say j is equal to the length of the pattern. Then to reach the first match index we can go back a number of steps equal to tje length of the pattern.
   if j==len(pattern):
    return i-j

  #In case there is no match  
  return -1

This algorithm runs with O(n+m) time complexity which is great – but it's little bit complicated. If you noticed, almost nothing changed (just in computing the LCP and a single line changed). This single line is what makes the algorithm so efficient.

Conclusion

In the end I hope you learned something new from this article. We learned about data structures for searching as well as some famous algorithms for searching.

This tutorial was the result of two weeks of research. There are a lot of things that I wanted to cover but I wanted to keep this manageable.

If you found this useful and want to get more awesome content, follow me on LinkedIn. It will help a lot.

For the longest time I relied on resources curated by different writers on the internet (which were good, by the way). But I always wanted to find a way around this problem – a way I could search for and track projects that were right for my skill set.

Let's agree on one thing: unlike Google, searching GitHub is not easy. But as a developer, chances are that you'll interacting with GitHub or Gitlab on a daily basis.

Now the question isn't what you use these version control systems for, but how you are using them. Just like mastering Google search skills is essential for any regular internet user, I believe it's also essential for developers to learn how to effectively search GitHub.

In this article we are going to take a look at different techniques you can use to correctly search GitHub. You'll learn how to search through:

• Issues and Pull Requests
• Repositories
• Users
• Topics

And more. Let's get started.

GitHub Search Queries

In order to find detailed information about something on the internet, you need to have the correct searching skills. It's not any different with GitHub – to find detailed info you can utilize common filter, sort, and searching techniques to easily find specific issues and pull requests of a given project.

Even though you have multiple resources listed on the internet for different projects, the main problem comes in when you want to do a search by yourself. How do you get started? Which keywords should you use to find the correct results?

Most maintainers tend to label their projects with issues, which makes it easier for contributors to find suitable projects. Listed below are some of the tricks that might help you out when you are using GitHub.

How to Search Issues and Pull Requests on GitHub

One of the most common ways of finding projects to contribute to is by searching through issues and related PRs. Here are some tricks you can use to easily find reliable answers:

1. is:issue is:open label:beginner - This particular query will list all projects with issues that are open and labeled beginner.
2. is:issue is:open label:easy - This will list all open issues that are labeled easy.
3. is:issue is:open label:first-timers-only - This lists all open issues that welcome first-timer contributions.
4. is:issue is:open label:good-first-bug - This lists projects with open issues labeled good-first-bug, to attract contributors to work on them.
5. is:issue is:open label:"good first issue" - This will list all open issues with the label good first issue, meaning it is good for place for beginners to get started.
6. is:issue is:open label:starter - This lists all open issues from across GitHub that are labeled starter.
7. is:issue is:open label:up-for-grabs - This lists open issues that are ready to be worked on if you have the necessary skills.
8. no:project type:issue is:open - This will list all open issues that are not assigned to a specific project.
9. no:milestone type:issue is:open - Many times, projects are tracked with milestones. But if you want to find issues that are not tracked, this search query will list those projects for you.
10. no:label type:issue is:open - This lists all open issues that are not labeled.
11. is:issue is:open no:assignee - This shows all open issues that have not yet been assigned to a person.

How to Search Repositories

By default, to make a search you will type the repository name in the search bar and voilà! You get some search results.

But the chances of you landing on the exact repo you intended are very low.

Let's look at some ways you can narrow down your search:

How to Find by Name, Description/README

A thing to note when you search by Name and description of the README file is that your search phrase should begin with the in qualifier. This makes it possible to search "inside" what you are looking for.

Example

• Using in:name. Let's say you are looking for resources to learn more about Data Science. In this case, you can use the command Data Science in:name which will list repositories with Data Science in the repository name.

• Using in:description. If you want to find repositories with a ceratin description, for example repositories where the term "freeCodeCamp" is included in the descriptionm, our search will be: freecodecamp in:description

• Using in:readme. You use this to search through a README of a file for a certain phrase. If we want to find repositories where the term freecodecamp is included in the README, our search will be: freecodecamp in:readme.

• Using in:topic. You use this to find if a certain phrase or word is labeled in the topics. For example to find all repositories where freecodecamp is listed in the topic, our search will be: freecodecamp in:topic

You can also combine multiple search queries to further narrow down the search.

How to Find by Stars, Forks

You can also search for a repository based on how many stars and forks the project has. This makes it easier for you to know how popular the project is.

Examples

• Using stars:n. If you search for a repository with 1000 stars, then your search query will be stars:1000. This will list repositories with exactly 1000 stars.

• Using forks:n. This specifies the number of forks a repository should have. If you want find repositories that have less than 100 forks, your search will be: forks:<100.

The good thing is that you can always use relational operators like <, >, <=, >= & .. to help you further narrow your search.

How to Find by Language

Another cool way to search through GitHub is by language. This helps you filter out repositories to a specific language.

Example:

• Using language:LANGUAGE. For example if you want to find repositories written in PHP, your search will be: language:PHP

How to Find by Organization Name

You can also search repositories/projects that are maintained or created by a specific organization. For this you need to begin your search with the keyword org:... followed by the organization name.

For example if you search org:freecodecamp it will list repositories that match freeCodeCamp.

How to Find by Date

If you want your results based on a specific date, you can search using one of these keywords: created, updated, merged and closed. These keywords should be accompanied by date in the format YYYY-MM-DD.

Example:

• Using keyword:YYYY-MM-DD. Take an instance where we want to make a search of all repositories with the word freeCodeCamp that were created after 2022-10-01. Then our search will be: freecodecamp created:>2022-10-01

You can also use <, >, >= and <= to search for dates after, before and on the specified date. To search within a range you can use ....

How to Find by License

Licenses are very important when you are are looking for a project to contribute to. Different licenses give different rights as to what a contributor can do or can not do.

To make it easier for you to find projects with right licenses you need to have a good understanding of licenses. You can read more about them here.

Example:

• Using license:LICENSE_KEYWORD. This is a good way to search for projects with specific licenses. To search projects with the MIT license, for instance, you would do license:MIT.

How to Find by Visibility

You can also conduct your search in terms of the visibility of the repository. In this case you can either use public or private. This will match issues and PRs that are either in a public or private repository, respectively.

Examples:

• Using is:public. This will show a list of public repositories. Let's take an isntance where we want to search all public repositories owned by freeCodCamp. Then our search will be: is:public org:freecodecamp.
• Using is:private. This query is meant to lists all private repositories under the given search query.

Conclusion

Even though we have covered many search queries here, you can always be creative to further narrow your search by combining multiple parameters together.

For additional resources and more search parameters, you can always refer to the GitHub Docs or make use of Advanced GitHub Search. These methods will always come in handy as they offer more filering options.

There are a ton of search parameters you can use to make your daily activity around GitHub easier. Hopefully this will help you use the platform more easily and effectively.

And while you might think it's obvious, many internet users don't know how to use Google search efficiently and effectively.

In truth, Googling is an art.

To get the right answers, you need to ask the right questions. And to get the right answers quickly, you must know how to ask the right questions.

Everyone should learn the how part, and that's what this tutorial is all about. Below are some helpful tips and tricks you can use to find correct answers to your questions effectively and efficiently.

How to Search Google Effectively

1. Use quotes to get an "EXACT" match

Generally, when we do a regular search on Google, it makes a shallow search. This may result in pages that may or may not contain all the words you mentioned in your search query.

But if you wrap your search query or question (either a term or a phrase) in quotes like this: "your question goes here" then Google will do a deep search. This means that all the results will include pages that contain all the terms in your question that you put within quotes.

This is helpful when you absolutely want a particular term or phrase to be there in your search results.

2. Search within a specific site with site:

If you want Google to return results from within a particular website, just add site: before the question you are searching.

This is also helpful when you want to search for something within a website that doesn't have an internal search option or perhaps doesn't have a very effective one.

For example, searching for site:freecodecamp.org react will populate search results only from the www.freecodecamp.org website on the topic of React.

3. Exclude a term from search results with -

If you don't want a term or phrase to appear in your search results, then just add - in front of that word.

For e.g. a search on => how to write components in React -class will return all the search results that don't have the term "class" in them. So, (if you know a bit of React) it'll give you only ways to write functional components in React.

4. Search images of a particular size with imagesize:

If you want to search images of a particular size, then use the tag imagesize: in your search query along with the width and height in pixels.

Dimension should be in pixels only – for example, imagesize:500x500 will populate image results which have a dimension of 500px x 500px. So a search on => "cute dog images imagesize:500x600" (coz why not) will result in pictures of cute dogs with an image size of 500px x 600px.

5. Search for a particular filetype with filetype:

If you want to get search results that contain a particular file type such as PDF or PPT, then add filetype:<extension> (without the angular brackets). For example, react tutorial filetype:pdf will generate results that contains PDF in them, as seen in the following image:

6. Use wildcard * to make searches

If you are unsure about or have forgotten any term in your search query/ question, then use the wildcard * charachter. Google will replace it for you with relevant terms.

For example, a search on => the of money will populate the following results. It will be a bunch of pages that include the phrase such as "the exchange of money", "the use of money", "the role of money", "the psychology* of money", and so on.

7. Combine searches with OR, AND logic

If you want your search results to contain two terms, then put the AND keyword in between them. For example, the search on => React AND Angular will fetch results that have both the terms react and angular in it.

Similarly, if you want either of the terms in your search results, then use the OR keyword in between them. For example, the search on => React OR Angular will fetch results that have either of the terms or even both.

8. Filter out searches with AFTER:, BEFORE: or .. between two numbers

If you want Google to populate search results that were published after a particular year, then use the tag AFTER:. For example, the search on => React tutorials AFTER:2020 will populate search results published after 2020.

Similarly adding the tag BEFORE: will return results published before a particular year.

You can also search for results published in a certain year range, or for that matter between any numbers. Just add .. between the two numbers you want to search between along with the units, if any.

9. Check out related websites using related:

If you want to know what all other websites are available on the internet that are similar to a particular website, then use the related: tag.

For example, a search on related:google.com will fetch all the websites that are similar to Google like Bing, Yahoo, DuckDuckGo, and so on.

10. Use cache: to see Google's cached version of a website

Google stores a cached version of websites to provide search results quickly. To see if Google has cached any site or not, just use the tag cache: in front of the website's URL.

This is especially helpful for web developers if they want to check if they are currently viewing a cached site or the latest version of a website after they have pushed some changes to the website. For example, a search for => cache:www.sohamderoy.dev on the day of writing this tutorial (that is, 4th Aug 2022) returns the following result:

As you see, even though I am searching for the site on 4th August 2022, I still see a copy of the site from 3rd August 2022, as that is when Google has cached the website.

It is important to note that "Not all search operators return exhaustive results." as mentioned by Google itself.

Still, I believe that these are some really handy tips that help you make an effective and efficient Google search. I hope I've explained them properly and have encouraged you to use them in your regular Google search.

Wrapping Up

Thanks for reading! I really hope you enjoyed reading this short article about how to google efficeiently and effectively and found this tutorial useful.

Do consider sharing it with your friends – I'd really appreciate that. Follow me on LinkedIn and Twitter and stay tuned for more amazing content! Peace out! 🖖

Social Links

• LinkedIn
• Website
• Other Blogs by me
• Twitter

Google is the most powerful tool in the world if you know how to use it properly. Let me show you how to get better at Googling.

1. Use Quotes for Exact-Match Search

You can use quotes to force an exact-match search. This is super useful if you know exactly the search phrase you're looking for. You'll simply get more accurate results if you do this.

"what is javascript"

2. Use the AND Operator

The AND operator will return only results related to both terms. In the example bellow you can see the perfect use-case of this operator.

html AND css

3. Use the OR Operator

You can use the OR operator to get results related to one of the search terms you enter.

(javascript OR python) free course

4. Use the - (minus) Operator

The - operator will exclude results that contain a term or phrase. So, in our case we want to get JavaScript related results, but exclude any CSS results from them.

javascript -css

5. Use (*) wildcards as placeholders

You can use the (*) wildcards as placeholders, which will be replaced by any word or phrase.

This one is my favorite. I use it when I know almost the whole search phrase and just replace the part I don't know with asterisk. Super useful.

"how to start * in 6 months"

6. How to Search Inside a Single Website

This is another one I use frequently. If I'm searching for something in particular on a specific website, this is my approach.

site:freecodecamp.org

7. How to Find a Specific File Type

You can also use this very useful feature to help you find a specific file type. It's handy if you're looking for some materials like PDFs. If you haven't used it before, from now on you will.

filetype:pdf learn css

8. How to Search for a Range of Numbers

This can be anything at all. If you're looking to buy something that falls within a specific price range, or you're searching for results that include a specific range of years, this is for you.

ecmascript 2016..2018

9. Use the before Operator

Use the before operator to return only results before a given date.
You must provide year-month-day dates or only a year. For example:

javascript before:2020

10. Use the after Operator

Use the after operator to return only results after a given date. You must provide year-month-day dates or only a year. Super useful if you want exclude outdated results.

web development after:2020

As you can see, Google can be a powerful tool if you know how to use it properly.

If you have any questions, you can contact me on Twitter.

You can find a ton of real-life tips and resources on my blog.

As a software developer, part of your job is to deliver the best user experience possible to those using your site or product.

And building a helpful and efficient search function is one way you can do this. So if you are looking for the right way to build out search functionality on the front end of your site, you're in the right place.

Some time ago, I thought that search functionality had to be built in the back end and called from the front end.

But as I continued building applications, I learned that sometimes, you might just have to search among the data retrieved from a public endpoint where there is no search endpoint. Other times, frontend search might be necessary to improve a website’s speed and user experience in general.

This tutorial will first go through the "wrong way" of setting up search which many of us have adopted. And then we'll learn a much better way of doing it. So stick with me and let me take you on this ride.

Prerequisites

It will be easy to follow this tutorial if you have basic knowledge of:

• JavaScript
• React

Starter Project

I have cooked up a little application to give you a head-start if you want to code along with me. Just clone this repository. The branch of interest is the starter-code branch.

Follow the instructions in the ReadMe file to setup the project and you should have the following screen:

Starter Project Screen

In the project you now have, we are fetching COVID-19 updates for every country in the src/context/hatchways.js file courtesy of coronatracker.

In our src/App.js file, we display the results we have gotten. A search input box is situated above the list of results. For each of these result, the src/components/Country.js file is rendered.

As a user types into the input box, the filterCountryByName function is called to search through the countries we collected earlier. This function is being built in the src/Helpers/HatchHelper.js file.

All styles are in the src/styles/App.scss file.

You should now be able to navigate around the project and find your way. Let's begin with how you shouldn't build out your search functionality.

How NOT to Build Search Functionality

We will focus on the src/Helpers/HatchHelper.js file to build out the search function.

Already we have the following code:

// search countries by name
const filterCountryByName = (name, countries, setResults) => {
  // clear search result if the search field is empty
  if (name === "") {
    setResults([]);
  }

  // discontinue if there is no search yet
  if (name === null || name === "" || countries === []) return;
};

Next, we need to empty the previous search array so that we don't add the new search result to it. This is just in case we already made a search and want to do another.

    // empty the previous search array if any
    const searchResult = [];

Convert the search string to lower case for consistency's sake. This will make the search case insensitive.

const data = name.toLowerCase();

Now, loop through the countries like so:

  // loop through all countries
  for (const country of countries) {

  }

Next, collect each country name and make it lower case to ensure that the search will be case insensitive like so:

    const countryName = country.countryName.toLowerCase();

Below that, check if the search string matches one character in the country name ([...countryName].includes(data)), one word in the country name (countryName.split(" ").includes(data)) or the full country name (countryName === data) and collect the country details like so:

    // check if the search word or character matches
    if (
      [...countryName].includes(data) ||
      countryName === data ||
      countryName.split(" ").includes(data)
    ) {
      searchResult.push(country);
    }

When the loop is done, update the search Result with the following line of code:

setResults(searchResult);

The filterCountryByName function now looks like this:

// search countries by name
const filterCountryByName = (name, countries, setResults) => {
  // clear search result if the search field is empty
  if (name === "") {
    setResults([]);
  }

  // discontinue if there is no search yet
  if (name === null || name === "" || countries === []) return;

  // empty the previous search array if any
  const searchResult = [];
  const data = name.toLowerCase();

  // loop through all countries
  for (const country of countries) {
    const countryName = country.countryName.toLowerCase();

    // check if the search word or character matches
    if (
      [...countryName].includes(data) ||
      countryName === data ||
      countryName.split(" ").includes(data)
    ) {
      searchResult.push(country);
    }
  }

  setResults(searchResult);
};

Replace the main element in the src/App.js file with the following code to ensure proper feedback during search:

<main>
    {filterByNameResults && filterByNameResults.length
    ? filterByNameResults.map((country) => (
    <Country country={country} />
    ))
    : filterByName && !filterByNameResults.length
    ? "No Result Found!"
    : hatchLoading === "processing"
    ? "Fetching Data..."
    : hatchLoading === "found" && hatches && hatches.length
    ? hatches.map((country) => <Country country={country} />)
    : "No country Found! Check your Internet Connection!"}
</main>

How to Test Your Search Function

Let's now make a search and see what we get:

Testing How to Make Frontend Search the Wrong Way

Here's the code for the wrong way to code a search function.

What is the problem with the search method above?

You will notice that the search string must satisfy at least one of the 3 conditions that we specified for a result to be returned.

So how about a user who isn't sure of the spelling but knows a couple of characters contained in the country name?

Do you notice that the user will take more time to search certain words because the words must me typed completely to get a match?

Think about this: ITA- should be able to return ITALY, NIG- should be able to return NIGER and NIGERIA, and so on.

So while our search works, these issues make it difficult to use and negatively impact the user experience. This now takes us to the right way to make this search functionality.

How to Build a Search Feature the Right Way

We need to create another search just below the current one.

Start by setting 2 initial states to hold the search string and the search results for this new search like so:

  const [searchString, setSearchString] = useState("");
  const [searchResult, setSearchResult] = useState([]);

Next, make another input box just below the first one like so:

          {/* search by name the right way*/}
          <input
            name="searchString"
            value={searchString}
            placeholder="Search by name (Right Way)"
            onChange={(e) => setSearchString(e.target.value)}
            onKeyUp={(e) =>
              searchCountryByName(
                e.target.value,
                hatches,
                setSearchResult
              )
            }
          />

Go to the src/Helpers/HatchHelper.js file and create the searchCountryByName function below the filterCountryByName function:

// search countries by name the right way
const searchCountryByName = (
  searchString,
  countries,
  setSearchResult
) => {

};

Include it in the export like this:

export { filterCountryByName, searchCountryByName };

You can now import it in the src/App.js file like so:

import { filterCountryByName, searchCountryByName } from "./Helpers/HatchHelper";

You should now have a second input box that doesn’t do anything just yet:

Screen showing a second input box that doesn’t do anything just yet

Fleshing out the function

We will now build out the function to work as we desire.

Begin by adding the following lines of code:

    // clear search result if the search field is empty
    if (searchString === "") {
      setSearchResult([]);
    }

    // discontinue if there is no search yet
    if (searchString === null || searchString === "" || countries === []) return;

Next, empty the previous search array if any like this:

// empty the previous search array if any
  setSearchResult([]);

Then create a variable that will hold our search results while searching:

let results = [];

Create a regular expression pattern for the search string like so:

  // create a regular expression pattern for the search string
  const pattern = new RegExp(searchString, "gi");

In the code above, we are saying that we want to use this searchString for something. While using it, we want it to be case-insensitive and we want all possible results. You can learn more about regular expressions here.

Now loop through countries and collect each country name like so:

  // loop through all countries
  for (const country of countries) {
    const countryName = country.countryName;

  }

Still in the loop, test if the regular expression pattern matches the countryName that we just collected. If it is true, then add the country details to the results array like so:

// check if the search word or character matches
if (pattern.test(countryName)) {
    results.push(country);
}

Finish by updating the search result using the following code:

setSearchResult(results)

The searchCountryByName function now looks like this:

// search countries by name the right way
const searchCountryByName = (
  searchString,
  countries,
  setSearchResult
) => {
  // clear search result if the search field is empty
  if (searchString === "") {
    setSearchResult([]);
  }

  // discontinue if there is no search yet
  if (searchString === null || searchString === "" || countries === []) return;

  // empty the previous search array if any
  setSearchResult([]);
  let results = [];

  // create a regular expression pattern for the search string
  const pattern = new RegExp(searchString, "gi");

  // loop through all countries
  for (const country of countries) {
    const countryName = country.countryName;

    // check if the search word or character matches
    if (pattern.test(countryName)) {
      results.push(country);
    }
  }

  setSearchResult(results)
};

Return to the src/App.js file and replace the main element with the following code:

        <main>
          {filterByNameResults && filterByNameResults.length
            ? filterByNameResults.map((country) => (
                <Country country={country} />
              ))
            : filterByName && !filterByNameResults.length
            ? "No Result Found!"
            : searchResult && searchResult.length
            ? searchResult.map((country) => <Country country={country} />)
            : searchString && !searchResult.length
            ? "No Result Found!"
            : hatchLoading === "processing"
            ? "Fetching Data..."
            : hatchLoading === "found" && hatches && hatches.length
            ? hatches.map((country) => <Country country={country} />)
            : "No country Found! Check your Internet Connection!"}
        </main>

Now, the results for the second search box are included above.

Testing your search function (the right way)

Testing How to Make Frontend Search the Right Way

Walah! You just learned the right way to create a search on the front end. 😊

Here's the code for the right way to build a search function.

How to Optimize Your Search Functionality

We are actually done. So you can skip this if you are busy, but it will just take a moment if you want to improve your search function.

You will notice that when you make a search the wrong way and do not refresh the page, you will be stuck with the results of the wrong way. It would be better to get fresh results when the second search box is used for the right way.

To achieve that, we will need to clear all search results for every search being made – whether it is the Wrong or Right Way. Let's do the following:

In the src/App.js, replace the onkey event of the first search box with the following:

            onKeyUp={(e) =>
              filterCountryByName(
                e.target.value,
                hatches,
                setFilterByNameResults,
                setSearchString,
                setSearchResult
              )
            }

Replace the onkey event of the second search box with the following:

            onKeyUp={(e) =>
              searchCountryByName(
                e.target.value,
                hatches,
                setSearchResult,
                setFilterByName,
                setFilterByNameResults
              )
            }

In the src/Helpers/HatchHelper.js file, add the 2 parameters we just passed into the filterCountryByName like so:

// search countries by name
const filterCountryByName = (
  name,
  countries,
  setResults,
  setSearchString,
  setSearchResult
) => {...}

Next, just before clearing the initial search results, clear the other search field and results like so:

  // clear the other search field and results if any
  setSearchString("");
  setSearchResult([]);

Now do the same for the searchCountryByName function.

When you are done, you should have the following result:

Our application after we have optimised the functionality

Awesome! 👍🏾👍🏾👍🏾

Here's the optimisation code.

Conclusion

It has been an awesome ride with you as we saw the mistakes many of us have made and how to correct them by creating a search function that offers the best experience to the user.

I believe the code can be improved even more. So I encourage to take a look at the code again and see how you can make it even better.

All the code is here. Thanks for reading!

When you send a GET request to an API, you get the response data back from the server. But sometimes managing this data can be a problem.

In this blog post, I will show you how to create a search filter in React. It will search for a particular term in the data using functional components and React hooks.

How to Make a GET Request to an API

First of all, let's make a GET request to an API which will fetch some data from the server. You can use any server you want to get the data, but in this article I'll use {JSON} Placeholder to fetch the users list.

In this example, we have cards which show the names and emails of different users. We also have a search input box which we'll use to search for a particular user.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Card, Input } from 'semantic-ui-react'
export default function Posts() {
    const [APIData, setAPIData] = useState([])
    useEffect(() => {
        axios.get(`https://jsonplaceholder.typicode.com/users`)
            .then((response) => {
                setAPIData(response.data);
            })
    }, [])

    return (
        <div style={{ padding: 20 }}>
            <Input icon='search'
                placeholder='Search...'
            />
            <Card.Group itemsPerRow={3} style={{ marginTop: 20 }}>
                {APIData.map((item) => {
                    return (
                        <Card>
                            <Card.Content>
                                <Card.Header>{item.name}</Card.Header>
                                <Card.Description>
                                    {item.email}
                                </Card.Description>
                            </Card.Content>
                        </Card>
                    )
                })}
            </Card.Group>
        </div>
    )
}

Getting the List of Users and a Search Input at the top

And if you don't know how to handle GET API calls in React, follow my blog on React CRUD Operations or my video on React CRUD Operations where I show you how to handle API calls in React.

How to Get Search Input from the Search Input Box

Now, let's get our search query from the search input box.

Create a state for the search input.

const [searchInput, setSearchInput] = useState('');

Here, searchInput is a string, and we'll use setSearchInput to set the search input.

Now, we'll create a function that will handle our search functionality.

const searchItems = () => {

}

And bind this function to the search input via the onChange event.

<Input icon='search'
                placeholder='Search...'
                onChange={() => searchItems()}
            />

So, whenever we type something in the input field, the searchItems will run.

Now, we need to pass the input value to the searchItems function.

<Input icon='search'
                placeholder='Search...'
                onChange={(e) => searchItems(e.target.value)}
            />

Next, let's receive the search query into the function and set the searchInput state to this value using setSearchInput that we created previously.

const searchItems = (searchValue) => {
        setSearchInput(searchValue)
    }

You can check this whether it is working on not by consoling searchValue.

As you can see, I am typing my name here and it is showing up in the console.

How to Filter Items Based on the Search Results

Now, we are going to filter out our APIData using the filter method.

const searchItems = (searchValue) => {
        setSearchInput(searchValue)
        APIData.filter((item) => {
            return Object.values(item).join('').toLowerCase().includes(searchInput.toLowerCase())
        })
    }

In this function searchTerm, you can see that we are using the filter method to filter out APIData state, which contains the data coming from the server.

We are also using Object.values to get the values from the object item.

Then, we are converting the values into a string using the join(' ') method.

Next, we are changing that string values into lowercase using the toLowerCase method.

And lastly, we are checking if this string includes our search input that we typed into the search bar. We also convert it to lowercase to make sure that if we type our term in uppercase, it converts the string to lowercase to make the search more effective.

Then, we return the whole query.

Now we need to set this filtered array into a variable.

const filteredData = APIData.filter((item) => {
return Object.values(item).join('').toLowerCase().includes(searchInput.toLowerCase())
})

Let's check the above functionality by consoling it. So, search a user name and you will see that you get the data for that username in particular.

Getting the search item into the console

Now, we need a state where we can store the filtered data. So, let's create one.

const [filteredResults, setFilteredResults] = useState([]);

Create one state that will contain our filtered data.

Then set this state to filteredData in the searchItems function using setFilteredResults.

const searchItems = (searchValue) => {
        setSearchInput(searchValue)
        const filteredData = APIData.filter((item) => {
            return Object.values(item).join('').toLowerCase().includes(searchInput.toLowerCase())
        })
        setFilteredResults(filteredData)
    }

How to Show the Filtered Results in the User Interface

Now, let's show these filtered results in our main UI.

First we need to write some code that checks if our search input is empty, and if so, shows all the data. Otherwise it will filter them according to the search input.

const searchItems = (searchValue) => {
        setSearchInput(searchValue)
        if (searchInput !== '') {
            const filteredData = APIData.filter((item) => {
                return Object.values(item).join('').toLowerCase().includes(searchInput.toLowerCase())
            })
            setFilteredResults(filteredData)
        }
        else{
            setFilteredResults(APIData)
        }
    }

We also need this check in the return part of the application.

So, if the search term's length is greater than 1, we will show filtered data. Otherwise we will show all the data which is stored in the API Data state.

<Card.Group itemsPerRow={3} style={{ marginTop: 20 }}>
                {searchInput.length > 1 ? (
                    filteredResults.map((item) => {
                        return (
                            <Card>
                                <Card.Content>
                                    <Card.Header>{item.name}</Card.Header>
                                    <Card.Description>
                                        {item.email}
                                    </Card.Description>
                                </Card.Content>
                            </Card>
                        )
                    })
                ) : (
                    APIData.map((item) => {
                        return (
                            <Card>
                                <Card.Content>
                                    <Card.Header>{item.name}</Card.Header>
                                    <Card.Description>
                                        {item.email}
                                    </Card.Description>
                                </Card.Content>
                            </Card>
                        )
                    })
                )}
            </Card.Group>

Now, if we search some username in the search field, we will get that specific user's data.

Getting the search input's results in the UI

And if we remove the name, we will get all the data.

Getting all the data if the search input is empty

Here is all the code for your reference:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Card, Input } from 'semantic-ui-react'
export default function Posts() {
    const [APIData, setAPIData] = useState([])
    const [filteredResults, setFilteredResults] = useState([]);
    const [searchInput, setSearchInput] = useState('');
    useEffect(() => {
        axios.get(`https://jsonplaceholder.typicode.com/users`)
            .then((response) => {
                setAPIData(response.data);
            })
    }, [])

    const searchItems = (searchValue) => {
        setSearchInput(searchValue)
        if (searchInput !== '') {
            const filteredData = APIData.filter((item) => {
                return Object.values(item).join('').toLowerCase().includes(searchInput.toLowerCase())
            })
            setFilteredResults(filteredData)
        }
        else{
            setFilteredResults(APIData)
        }
    }

    return (
        <div style={{ padding: 20 }}>
            <Input icon='search'
                placeholder='Search...'
                onChange={(e) => searchItems(e.target.value)}
            />
            <Card.Group itemsPerRow={3} style={{ marginTop: 20 }}>
                {searchInput.length > 1 ? (
                    filteredResults.map((item) => {
                        return (
                            <Card>
                                <Card.Content>
                                    <Card.Header>{item.name}</Card.Header>
                                    <Card.Description>
                                        {item.email}
                                    </Card.Description>
                                </Card.Content>
                            </Card>
                        )
                    })
                ) : (
                    APIData.map((item) => {
                        return (
                            <Card>
                                <Card.Content>
                                    <Card.Header>{item.name}</Card.Header>
                                    <Card.Description>
                                        {item.email}
                                    </Card.Description>
                                </Card.Content>
                            </Card>
                        )
                    })
                )}
            </Card.Group>
        </div>
    )
}

Now there you have it, a fully functional search filter in React using React hooks.

We often handle this functionality from the back end side by passing search query parameters in the API endpoint. But it's important to know how to handle it from the front end side too.

You can also check my YouTube video on Building a Search Filter using React and React Hooks if you'd like to supplement this article.

That's all folks. Happy Learning.