A simple React application to fetch and display weather data using the OpenWeatherMap API. Built with TypeScript, Chakra UI, and Axios, with unit tests using Jest and React Testing Library.
- Search for weather by city name.
- Displays temperature, weather description, and last updated time.
- Caches weather data in localStorage for 5 minutes.
- Responsive design with Chakra UI.
- Unit tests for components and hooks (10/11 passing).
- Clone the repository: git clone https://github.com/maxsabo/weather-app
- Install dependencies: npm install
- Create a
.envfile in the root directory and add your OpenWeatherMap API key: VITE_API_KEY=your-api-key-here - Start the development server: npm run dev
Run unit tests with: npm test
Note: One test ("handles error when city not found" in useWeather.test.tsx) is commented out due to issues with mocking AxiosError in Jest. The functionality works in the app but couldn't be reliably tested.
npm run dev: Start the development server.npm run build: Build the app for production.npm run lint: Run ESLint to check code quality.npm run lint:fix: Fix linting issues automatically.npm run format: Format code with Prettier.npm run preview: Preview the production build.npm test: Run unit tests.
The app is deployed at: [(https://weather-app-alpha-orpin-80.vercel.app/)].
- React: Frontend library.
- TypeScript: Static typing.
- Chakra UI: Styling and components.
- Axios: HTTP requests.
- Jest & React Testing Library: Unit testing.
- Vite: Build tool.
- The test for handling 404 errors in
useWeatherhook is commented out due to difficulties with mockingAxiosError. This does not affect the app's runtime behavior.