Multi-select Search Component

FRONTEND

In this challenge, you'll build a Multi-select Search Component. This challenge is perfect for you if you're interested in building interactive front-end web components and taking your web dev skills to the next level!

Multi-select Search Component Frontend Challenge

About the Challenge

In this challenge, you'll build a Multi-select Search Component. This challenge is perfect for you if you're interested in building interactive front-end web components and taking your web dev skills to the next level!

You can use as many (or as few) tools, libraries, and frameworks as you'd like. If you're trying to learn something new, this might be a great way to push yourself.

Challenge Requirements

  • Build a reusable UI component that can fetch data from an API and allow users to select multiple options from a dropdown list.
  • The component should include a search bar that allows users to search the results from the API based on the text entered.
  • The dropdown list should display the results from the API and allow users to select multiple options.
  • Selected options should be displayed in the search bar as tags, and users should be able to remove them.
  • The component should have a "Clear All" or "x" button on the search bar, which allows users to remove all selected tags at once with a single click.
  • Show the hover state of all the elements.
  • The component should be responsive and display correctly on different screen sizes.
  • Make this landing page look as close to the design as possible.

Taking your Project to the Next Level

  • Show a loading spinner on the right side of the search bar while data is being fetched from the API.
  • Add debouncing to the search input to reduce API calls and improve the performance of the component.
  • Use a framework like React, Vue, or Svelte. Or, if you're feeling particularly adventurous, try writing everything in Vanilla JavaScript.

What you'll Learn?

In this frontend challenge, You'll learn how to create a Multi-select Search Component that uses an external API to populate the options. This will give you hands-on experience integrating APIs into your web development projects. So, don't wait any longer, give it a try and improve your frontend development skills! So what are you waiting for?

Getting Started

  • To get started, download the starter code(zip file).
  • Take a look around. Look at the project's Figma file. This is a great way to see how the pieces and parts should look within the browser.
  • Open the project's README.md file. It has additional information about the challenge.
  • Set up version control (we recommend Git) and create a GitHub repository for this challenge.
  • Customize your project/file architecture to your liking.
  • Happy coding! 👍

Get Involved with the Community

Join our Discord community and share your solutions with others. Ask questions and get answers from the fellow developers, help others and get involved with the community.

It's an amazing place to learn and grow as a developer, and we'd love for you to be a part of it!

So, what are you waiting for? Click on the download button to get started.

Frequently Asked Questions

What is a frontend challenge?

How can these frontend challenges help me improve my skills as a frontend developer?

Can I use external libraries or frameworks in my frontend challenge submission?

What is the best way to get help when I'm stuck?

Can I add this frontend project in my portfolio?

FrontendPro

2023 FrontendPro. All right reserved