The Weather App is a web application designed to display weather information for cities around the world. Users can search for cities, view current weather conditions, and manage a list of saved cities.
- Search: Users can search for cities to view current weather information.
- City Management: Users can add and remove cities from their saved list.
- Weather Details: Display temperature, humidity, and wind speed for each city.
- Responsive Design: Ensures a consistent experience across different devices.
- React: Front-end library for building user interfaces.
- Redux Toolkit: State management library for managing application state.
- Material-UI: React component library for UI design.
- Axios: Promise-based HTTP client for making requests to the OpenWeatherMap API.
- React Slick: Carousel component for displaying weather cards.
- Webpack: Module bundler for building and running the application.
- Jest and React Testing Library: For unit testing and integration testing.
To run the Weather App locally, follow these steps:
-
Clone the repository:
git clone <repository-url>
cd weather-app
-
Install dependencies:
npm install
-
Set up environment variables: Create a
.env
file in the root directory and add your OpenWeatherMap API key:REACT_APP_API_KEY=your_api_key_here
-
Ensure Node.js version 16+ (developed using v16.16.0): Make sure you are using Node.js version 16 or higher, as it is fundamental for this app.
-
Start the application:
npm start
-
Open in the browser: Open http:https://localhost:3000 to view the app in your browser.
To build the project for production, run:
npm run build
This will generate a dist directory containing the production build of the application.
- Search for a city: Enter a city name in the search input and press Enter or click the search button.
- Manage cities: Add or remove cities from the list displayed on the dashboard.
- View weather details: Check the temperature, humidity, and wind speed for each city displayed on the weather cards.
For the login page, the username and password can be anything as there is no authentication validation implemented at this moment.
Run tests to ensure the app functions as expected:
npm test
These tests focus on rendering the components, handling user interactions, and ensuring the correct Redux actions are dispatched.
- Component-Based Architecture: The app is built using React, following a component-based architecture to promote reusability and maintainability.
- State Management with Redux Toolkit: Redux Toolkit is used for managing the global state of the application, making it easier to handle state changes and asynchronous operations.
- Material-UI for UI Design: Material-UI is used for consistent and responsive UI components.
- Webpack for Module Bundling: Webpack is configured to bundle the application modules and assets, and to enable hot-reloading during development for a better developer experience.
- Icons: Weather icons provided by OpenWeatherMap.
This project is licensed under the MIT License - see the LICENSE file for details.