This is a solution to the Weather app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
  • AI Collaboration
• Author

Users should be able to:

• Search for weather information by entering a location in the search bar
• View current weather conditions including temperature, weather icon, and location details
• See additional weather metrics like "feels like" temperature, humidity percentage, wind speed, and precipitation amounts
• Browse a 7-day weather forecast with daily high/low temperatures and weather icons
• View an hourly forecast showing temperature changes throughout the day
• Switch between different days of the week using the day selector in the hourly forecast section
• Toggle between Imperial and Metric measurement units via the units dropdown
• Switch between specific temperature units (Celsius and Fahrenheit) and measurement units for wind speed (km/h and mph) and precipitation (millimeters) via the units dropdown
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

• Solution URL: Climate
• Live Site URL: Climate

• React - JS library
• TailwindCSS - UI library
• Vite - Build tool for the web
• Zustand - state management solution
• Open-Meteo - API for Weather data

• Integrate complex API into web apps
• Build responsive apps for all kinds of screens
• Componetize way of implementing different sections of an application
• State managment throught the app

Love working on this project as it challenged me to think more and do more than just building interfaces and will be looking out for such kind of projects

• TailwindCSS Tailwind documentation
• Zustand - Zustand examples on how to use their library. I'd recommend it for state management for react apps as it is simple yet can handle complex logic
• Open-Meteo docs and their npm package openmeteo made it easier to understand how their api worked and how to use them
• ChatGPT helped be debug and implement some of the features in the app

I mostly used ChatGPT implement some of the features like debounce search filter. Also helped in debugging some issues regarding openmeteo API

• Website - Mikiyas Kebede
• Frontend Mentor - @Miki0035
• Twitter - @MikiMknewkebede