Fake API Call

README.md

Frontend Developer Interview

Task 1

Create a new React App using create-react-app: https://create-react-app.dev/

Task 2

1. Copy the fakeAPI.js to the App created in Task 1, it will be representing the API you will need to use in order to get the data required for this current task.

2. Create a Page that must to contain an input field and a button.

3. When the user types a string in the input field and click in the button the component must to trigger a call for the getStates function, from the fakeAPI.js included in this gist, the getStates function will return a promisse with a list of Mexico states. You must to filter the results and display it in a list.

Requirements:

• You should filter the results to only include the states that match entire or partially the string from the input field
• You should handle Upercase and Lowercase strings either
• With these filtered results, you should display the states filtered in a list bellow the input field and button
• Notice, the getStates is intended to simulate and API call, so it will wait 2 seconds to return the promisse with the states, you should handle this loading state displaying a LOADING message or spinner.
• You should apply CSS Styles, or use an UI library of your choise, in order to make the App Looks nice.
• You can build this structure with as many components as you think is required.
• Bonus Point to use React Hooks(but it is not required, you can use Class Components as well), it is better to complete the feature.

Observation:

You are free to search in the web for any question you have, we are interested in seeing how you solve problems, and not if you remember every command in Javascript.

Feel free for ask as many questions as you think you need to undertand and finish the feature.

fakeAPI.js

const states = [
  { id: 1, name: 'Aguascalientes' },
  { id: 2, name: 'Baja California' },
  { id: 3, name: 'Baja California Sur' },
  { id: 4, name: 'Campeche' },
  { id: 5, name: 'Chiapas' },
  { id: 6, name: 'Mexico City' },
  { id: 7, name: 'Chihuahua' },
  { id: 8, name: 'Coahuila' },
  { id: 9, name: 'Colima' },
  { id: 10, name: 'Durango' },
  { id: 11, name: 'Guanajuato' },
  { id: 12, name: 'Guerrero' },
  { id: 13, name: 'Hidalgo' },
  { id: 14, name: 'Jalisco' },
  { id: 15, name: 'Mexico' },
  { id: 16, name: 'Michoacan' },
  { id: 17, name: 'Morelos' },
  { id: 18, name: 'Nayarit' },
  { id: 19, name: 'Nuevo Leon' },
  { id: 20, name: 'Oaxaca' },
  { id: 21, name: 'Puebla' },
  { id: 22, name: 'Queretaro' },
  { id: 23, name: 'Quintana Roo' },
  { id: 24, name: 'San Luis Potosi' },
  { id: 25, name: 'Sinaloa' },
  { id: 26, name: 'Sonora' },
  { id: 27, name: 'Tabasco' },
  { id: 28, name: 'Tamaulipas' },
  { id: 29, name: 'Tlaxcala' },
  { id: 30, name: 'Veracruz' },
  { id: 31, name: 'Yucatan' },
  { id: 32, name: 'Zacatecas' },
];

export const getStates = () =>
  new Promise((resolve) =>
    setTimeout(() => {
      resolve(states);
    }, 2000)
  );