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.

Requirements

Weather API

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

OpenWeather

Tomorrow

WeatherAPI

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
  • Vercel
  • Layer0
• 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 (we use this)
    • styled components
    • Emotion
    • Tailwind
  • 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.