About the Challenge
In this frontend challenge, you'll build a Sortable List Component with Search Input Box. This challenge is perfect for you if you're interested in building complex front-end web components and taking your front-end 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.
- The component should display a list of up to 5 selected skills in a column.
- If the list doesn't have all 5 selected skills, the component should display an input box just after the last selected skill in the list.
- The input box should display suggestions as the user types from an API or hard-coded data.
- After selecting a skill from the suggestions, the selected skill should be added to the list of selected skills.
- The component should allow the user to delete a selected skill by clicking on a delete button.
- The component should allow the user to rearrange the selected skills by drag and drop.
- The component should also display a column of suggested skills next to the list.
- The user should be able to select a skill from the suggested skills column and add it directly to the list by clicking on the skill.
- 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
- In the list, only the input box that is just after the last selected skill should be enabled. The rest of the input boxes should be disabled.
- For example, if only 2 skills are selected, the third input box should be enabled, while the fourth and fifth input boxes should be disabled.
What you'll Learn?
- 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.