This Project was created using Create-React-App (CRA). All normal script commands apply.

To view the application in your local environment, you will need to create an environment variable with your own GIPHY API KEY and name it REACT_APP_GIPHY. The current project references it in the project's .env file. Then, you can run 'npm start'. The project will open in localhost port 3000.

I used redux-form to abstract away form state management and form validation. There is some overhead, especially with this simple of a use case, but it's straight-forward to integrate into the application.

The only issue I could not immediately solve was fetching new data when users changed the Weirdness Slider. The form only fetchs when users submit the form. I wanted to implement debounced submissions each time the user changed weirdness after entering in a search term, but here, Redux-Form made it more complicated. There wasn't an immediately clear, clean, or concise way of fetching up-to-date data on change with Redux-Form. With more time, I would implement an onChange action using useEffect hook without Redux-Form to reffetch when Weirdness changed.

I also used tailwindcss, since it's something I've been working with lately. Developing with it is faster, despite making hot reloads slower. With PurgeCSS, we can remove most of the unused CSS generated by Tailwind, but it only runs in production.