Welcome back! So far, you have learned how to organize your backend code, validate data, and secure your Task Manager API. Now, let’s make your API even more useful by allowing users to filter tasks based on whether they are completed.

Imagine you have a long list of tasks. Sometimes, you only want to see what’s left to do, and other times, you want to review what you’ve already finished. Filtering tasks by their completion status makes this possible. In this lesson, you will learn how to add this feature to your API.

Let’s quickly go through the service functions you'll use to implement filtering.

In your taskService.ts, you have:

Here’s what each one does:

• getAllTasks() returns every task in your in-memory list.
• filterTaskByStatus(completed) returns only the tasks that match the completed status (true or false).

To let users choose which tasks they want to see, you will use something called a query parameter. Query parameters are extra pieces of information added to the end of a URL. They help you filter or sort data when making API requests.

For example, if you want to see only completed tasks, you might use a URL like this:

Here, completed is the query parameter, and true is its value. If you want to see only incomplete tasks, you would use:

Your API will read this parameter and use it to decide which tasks to return. This type of filtering is stateless — the client decides what it wants to see (completed=true or false), and the API responds accordingly without needing to track user sessions or state.

Now, let’s build the endpoint that filters tasks by their completion status. Here is the code for the filter endpoint:

Let’s break down what’s happening here:

1. Reading the Query Parameter
   The code gets the value of the completed query parameter from the request URL:

   If the parameter is missing, it returns an error.

2. Validating the Parameter
   The code checks if the value is either true or false. If not, it returns an error message:

3. Filtering the Tasks
   The code converts the string to a boolean and uses the service function to filter tasks:

4. Returning the Result
   Finally, it returns the filtered list of tasks in a success response.

Example Output:
If you call /api/tasks/filter?completed=true, you might get a response like:

The actual filtering happens in the service layer, using this function:

Here’s what’s happening:

• The function takes a boolean value (true or false).
• It goes through the list of tasks and keeps only those where the completed property matches the value you provided.

For example, if you pass true, you get only completed tasks. If you pass false, you get only incomplete tasks.

To help users filter tasks visually, the frontend includes two buttons: one for incomplete tasks, and one for completed ones. These buttons simply update the URL and attach the API key as a query parameter: Here’s the TSX code:

What happens when the button is clicked?

• The browser navigates to /tasks/filter?completed=true&apiKey=....
• The /tasks/filter/page.tsx page reads both the completed and apiKey query parameters from the URL.
• It then makes a request to your backend endpoint /api/tasks/filter?completed=true and sends the API key in the request header.

Let’s look a bit deeper at how the /tasks/filter/page.tsx file handles filtering based on the URL.

This file is responsible for:

• Reading the completed and apiKey query parameters from the URL
• Making a GET request to your /api/tasks/filter backend route
• Displaying either a list of tasks or an error

Here’s a simplified but expanded version of the relevant logic:

In this lesson, you learned how to let users filter tasks by their completion status using query parameters in your API. You saw how to:

• Read and validate query parameters from the request
• Use a service function to filter tasks
• Return the filtered results or clear error messages
• How the frontend provides those query parameters using buttons that update the URL and include the apiKey for authorization

You are now ready to practice building and testing this feature on your own. In the next exercises, you’ll get hands-on experience with filtering tasks and handling query parameters.

Congratulations on reaching the end of the course! You’ve built a solid foundation in backend development with Next.js. Keep practicing and applying what you’ve learned — you’re well on your way to becoming a backend developer!