In this web development project, I built a debounced product search bar using Node.js and the Vue.js Composition API integrated with the DummyJSON API. The goal was to improve search performance by adding a 300-millisecond debounce delay before executing the API request, reducing unnecessary calls to the server.

AOV - 2022-01 - Gift Search Bar

In this web development project, I built a debounced product search bar using Node.js and the Vue.js Composition API integrated with the DummyJSON API. The goal was to improve search performance by adding a 300-millisecond debounce delay before executing the API request, reducing unnecessary calls to the server.

AOV - 2022-01 - Gift Search Bar

You're tasked with building a debounced search bar for products from DummyJSON's product API. In case you're not familiar with the concept of debouncing, it's a technique that allows one to delay a function's execution until a specific amount of time has elapsed since the last call.

For this challenge, you'll need to add a 300-millisecond delay to the findProducts function. You can make use of readily available debounce implementations, or try writing one yourself.

You'll also need to display a generic loading spinner/message, and if the function executes successfully, place suggested products' names and price tags inside an unordered list. Otherwise, use native to show a generic error message.

alert()

If the search term gets reset back to an empty string, clear the search suggestions too.

https://gitlab.com/ingmanuelcaicedo/2022-01-gift-search-bar

Screenshots

In this web development project, I built a debounced product search bar using Node.js and the Vue.js Composition API integrated with the DummyJSON API. The goal was to improve search performance by adding a 300-millisecond debounce delay before executing the API request, reducing unnecessary calls to the server.
In this web development project, I built a debounced product search bar using Node.js and the Vue.js Composition API integrated with the DummyJSON API. The goal was to improve search performance by adding a 300-millisecond debounce delay before executing the API request, reducing unnecessary calls to the server.
In this web development project, I built a debounced product search bar using Node.js and the Vue.js Composition API integrated with the DummyJSON API. The goal was to improve search performance by adding a 300-millisecond debounce delay before executing the API request, reducing unnecessary calls to the server.
In this web development project, I built a debounced product search bar using Node.js and the Vue.js Composition API integrated with the DummyJSON API. The goal was to improve search performance by adding a 300-millisecond debounce delay before executing the API request, reducing unnecessary calls to the server.

Sources and resources:

Developed by: Me Copyright 2024
Ing. Manuel Caicedo Logo