# Front-end Challenge: Web

Make sure you read all of this document carefully, and follow the guidelines in it.

## Context

Use **React** w/ TypeScript to implement the following mock-up. You will need to leverage an open API for weather data to fill in the details and functionality as described below.

<iframe style="border:none" width="800" height="450" src="https://whimsical.com/embed/KbccMXKFrCwH5NVkyinDTR"></iframe>

## Requirements

### Weather API

You can use any weather API but these are the ones that we recommend:

[OpenWeather](https://openweathermap.org/current)

[Tomorrow](https://www.tomorrow.io/weather-api/)

[WeatherAPI](https://www.weatherapi.com/)

### Functionality

* The search filter needs to be able to perform filtering on a City name.
* The results need to be toggle-able between Fahrenheit and Celsius.
* A demo of the application should be provided using one of the following solutions:
* [Netlify](https://www.netlify.com/)
* [Vercel](https://vercel.com/)
* [Layer0](https://www.layer0.co/)
* The application should be mobile responsive.

### Tech stack

TypeScript oriented (JavaScript can be used, but we strongly prefer TypeScript)

- Use **React**
- Feel free to use a CSS-in-JS tool or utility-first, minimal CSS framework but *do not* use any pre-styled frameworks or libraries
- USE:
- [**Chakra UI**](https://chakra-ui.com/) (we use this)
- [styled components](https://styled-components.com/)
- [Emotion](https://emotion.sh/)
- [Tailwind](https://tailwindcss.com/)
- AVOID:
- Bootstrap
- Material UI
- Semantic UI

### Bonus

* Make the application accessible
* Write clear **documentation** on how the app was designed and how to run the code
* Implement **end-to-end** testing
* Include subtle animations to focus attention

## What we care about

Here's what you should strive for:

- Good use of current TypeScript, HTML, CSS, and performance best practices
- Solid testing approach
- Extensible code
- Mobile support

## Q&A

> Where should I send back the result when I'm done?

Create a repository on GitHub and send a link to this repository back to us when you are done. There is no deadline for this task unless otherwise noted to you directly.

> What if I have a question?

Send your questions to your engineering contact via email.