Skip to content

Latest commit

 

History

History
54 lines (39 loc) · 3.15 KB

README.md

File metadata and controls

54 lines (39 loc) · 3.15 KB

weather-app

This coding challenge is intended to demonstrate self-driven product design decisions and pro-active user-centric thinking, as well as the engineering skills necessary to build and deploy a simple Python-based web app.

View the completed weather app here.

Criteria

  • Develop a simple web app that uses weather data from the public Open Weather API
  • Deploy the app publicly using a free-tier cloud service (Heroku, AWS, GCP) => I used Heroku
  • Upload your code to a public GitHub repo for review
  • Be prepared to demo and discuss your application in a Zoom technical interview

Minimum Features

  • An input form for users to search for a specific city (e.g., "Chicago")
  • A dynamic display of at least the following information (for one or more selected cities):
    • Current weather from the "Current Weather" endpoint
    • Current weather icon (using "icon" data point and Weather Icon endpoint)
    • Latitude and longitude of the selected city
  • A dynamic display of historical weather (e.g., past week) data
    • Temperature ("temp")
    • Main weather ("main")
    • Description of weather ("Description")
  • Allow the user to view the raw API output in a JSON string
  • Allow the user to download the historical weather data in a simple Excel document

UI Mock-Up

I used Excalidraw to mock up a quick UI design. I made some changes along the way but this was my initial concept.
Screenshot 2024-03-11 at 11 59 19 AM

Extra Features

  • Other thoughtful user features or design decisions => Improved responsiveness and accessibility, and added loading/error messages under search bar
  • Features involving data analysis techniques
  • Features involving AI

Suggested Tech stack

  1. Any popular Python framework (FastAPI, Flask) => I used Flask
  2. Any popular JavaScript or TypeScript framework (e.g., Svelte, Vue) => I used React
  3. Feel free to use libraries for styling (Bootstrap, TailwindCSS, daisyUI) => I used Tailwind

API Information

  1. Sign up for a free API key from OpenWeatherMap.org
  2. Utilize the following endpoints
Name Endpoint Documentation
Current Weather https://api.openweathermap.org/data/3.0/onecall?lat={lat}&lon={lon}&exclude={part}&appid={API_key} https://openweathermap.org/api/one-call-api
Historical Weather https://api.openweathermap.org/data/3.0/onecall/timemachine?lat={lat}&lon={lon}&dt={time}&appid={API_key} https://openweathermap.org/api/one-call-api
Weather Icon http://openweathermap.org/img/w/{Icon_ID}.png N/A