Skip to content

tanaydpatel/react-weather-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Weather app

Steps to run on local

  • npm i Install dependencies (suggested node version 20.9)
  • Update the .env.development file with your API key

Problem Statement

Create a Simple Weather Dashboard

Objective

Develop a small web application that displays weather information for a user-selected city. This task primarily evaluates your ability to work with APIs, UI design, and React components.

Evaluation Criteria

  • Functionality: Does the application work as expected?
  • UI Design: Is the UI user-friendly and visually appealing?
  • Responsiveness: Does the layout adapt well to different screen sizes?
  • Code Quality: Is the code well-structured and clean?

Requirements

  1. Framework: The application should be built using React.
  2. API Integration: Use a free weather API (like OpenWeatherMap) to fetch weather data.
  3. User Interface: The application should have an input field to enter a city name and a submit button.
  4. Display: On submission, display the current weather information of the se4. selected city, including temperature, humidity, and weather conditions (sunny, cloudy, etc.).
  5. Storage: Use local storage to remember the last searched city and its weather information, displaying it when the user revisits the app.
  6. Responsiveness: The application should be responsive and provide a good layout on both mobile and desktop screens.
  7. Error Handling: Include basic error handling for scenarios like invalid city names or API failures.

Bonus

  • Add icons or images representing the current weather condition.
  • Implement a loading state while the weather data is being fetched.

Output

  1. URL of the live app (can be hosted on platforms like Vercel, Netlify, or GitHub Pages)
  2. Source code hosted on GitHub, GitLab, or Bitbucket

Note: While the focus is on frontend skills, good practices in code organization and readability will also be considered.