Species search auto complete input box

[h-m-jones]

Implement a React component for an input box that works like the species search input box on this page: https://species.nbnatlas.org/

Note: this task does not include implementation of the submit button, just the <input box.

The auto complete API call

The auto complete API call is detailed on the NBN Atlas API page. Look for Auto Complete Search - https://species-ws.nbnatlas.org/search/auto

Tip: Inspect the page to see the calls going to the server

Styling

Bootstrap 5.

Note: Can the styling be configurable?

Props

initially we just need to pass the species name out of the component

[kata-kas]

Hello!

Just stumbled upon this project. Can I take this task? 😄

[h-m-jones]

hey - yes of course, give it a go :) Any questions just ask

[kata-kas]

I see that Tailwind is used in the project, but in this task it's required Bootstrap 5. Do I continue with Bootstrap?

[h-m-jones]

It might sound a silly question, but what would you prefer? Have you tailwind experience -if not, would you like it? It's still a bit debatable - stick with good old Bootstrap, with its ready built UI components or follow the new way and adopt tailwind.

[kata-kas]

Worked with tailwind for a couple of years now. The only thing that I don't like it's the never ending classes list. I would go with Tailwind, since it allows more granular control and has a smaller footprint.

[h-m-jones]

Brilliant, go with tailwind then please. I do have a pull request imminent, which will bring in some improvements to the src structure (including a shared lib) and I have also written hooks to get the data from the api (its all very nice!I) I plan to get that sorted tomorrow. Im sure it will all make sense when you see it and you can change things accordingly if need be, without too much trouble

[kata-kas]

So I basically finished my part. Should I wait for that PR or just go ahead and create my own? I'm a bit confused 😅