kongnyc / users-app-assessment

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Users app practice assessment

GETTING STARTED AND SUBMITTING

  1. Fork and clone this repo
  2. run npm install to install, then npm start to start.
  3. Implement the TODOS below.
  4. Do the bonuses if you have time.
  5. Functionality first, styling last.

TODOS

  1. Fetch the data from the external API. You may use fetch, axios (already installed), or something else.
  2. Implement the SearchBar functionality. When the user types in the search bar, show only the users whose name, country, or company match the user input.
  3. Implement a button that shows / hides the about paragraph for a user.
  4. Implement an Expand All button
  5. Implement a Collapse All button

BONUS TODOS:

  • Display No results for {input} when there are no results.
  • Loading state
  • Error state when the API returns an error
  • Additional styling

finished app for reference

Implementation requirements

  • The API url is https://users-app-backend.onrender.com/users
  • You do not need to worry about loading and error states. Do not spend time building these.
  • You must fetch data from the API. Do not copy paste or hard-code data.
  • Do not change the component tree. Do not add or remove components, or change any parent-child relationships.
  • You can (and will have to) add props or state to the existing components.
  • You can change or add to the styling of the components, but this is not required.

About


Languages

Language:JavaScript 66.4%Language:HTML 22.6%Language:CSS 11.0%