It's my first time properly playing with Vue 3's Composition API here.

My own personal TODOs:

• findProducts implementation
• Debounce
• Loading and error states (I chose to forgoe alert)
• Style it up with some product cards
  • Thumbnails
  • Price
  • Discount sticker
  • Star rating
• Load more / pagination
• No results

What I learned:

• composition API basics
  • reference vs ref
  • SFC <script setup>
• some TailwindCSS basics
  • how to add and extend the colour palette

Forked README below 👇🏻

Advent Of Vue is a series of 24 Vue coding challenges that are sent out every day from December 1 to December 24 via a dedicated newsletter. If you'd like to receive more of these puzzles in the future, go ahead and sign up!

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 alert() to show a generic error message.

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

https://youtu.be/avf8OyNDJfo

Maciej Pędzich (Mac):

• GitHub
• Twitter
• Mastodon
• My website (coming next year)

DummyJSON project by Muhammad Ovi.

Based on a Stackblitz project by tony19