IWeather App ©️

💻 https://iweather-app.vercel.app/

Description

IWeather App is a single-page web application that allows users to view instant weather information from around the world. Users can see the weather forecast for the cities they want, save their favorite cities and access detailed weather information. The application is designed with a modern and user-friendly interface, so users can quickly and easily access the weather information they want.

Outcome

Project Planning & Management

Epic User Story: As a user of the weather app, I want to effortlessly access current weather information for various locations, save frequently viewed locations for quick access, view detailed weather forecasts for multiple days, and seamlessly navigate between different sections of the app. 🌤️

User Stories:

1️⃣ View Current Weather Information:

• 🥇 As a user, I want to see the current weather information by entering a city name.

• 🥈 I want to visualize the weather with appropriate icons and background images.

  Task-1 = Create user interface (city input field and weather display area).
  Task-2 = Write a function to fetch weather information using the OpenWeatherMap API.
  Task-3 = Make API call using Axios and process the returned data.
  Task-4 = Display weather information automatically to the user with specific URL endpoint.
  Task-5 = Change icons and background images based on weather conditions.
  

2️⃣ View 5 Days Weather Details:

• 🥇 As a user, I want to see the 5-day weather forecast for the entered city.

• 🥈 As a user, I want detailed weather information with min and max temperatures for each day.

  Task-1 = Create a Forecast component to display daily weather details.
  Task-2 = Write a formatter functions to get the 5-day weather forecast using the OpenWeatherMap API.
  Task-3 = Display the formatted daily weather forecast to the user.

3️⃣ Responsive Design:

• 🥇 As a user, I want a design that is responsive across different screen sizes.

• 🥈 As a user, I want the application to be usable on mobile, tablet, and desktop devices.

  Task-1 = Make the design responsive to different screen sizes with using TailwindCSS.
  Task-2 = Style the application using TailwindCSS for mobile, tablet, and desktop devices.
  

4️⃣ Adding/Removing Weather Information to Favorites:

• 🥇 As a user, I should be able to add and remove any weather information I want from my favorite cities.

• 🥈 As a user, when I add or remove items from my favorites, I should see this from the icons and notifications.

  Task-1 = The heart icon should change dynamically when weather information is added or removed from the favorite.
  Task-2 = The user should receive notifications at every stage regarding their favorite status.
  

5️⃣ Store Local Weather Information:

• 🥇 As a user, I want the ability to store weather information for previously searched cities locally.

• 🥈 As a user, I want to store weather information for multiple cities.

  Task-1 = Use Local Storage to store and retrieve weather information.
  Task-2 = Display stored weather information for multiple cities in a carousel format.
  

6️⃣ View Weather Informations in Carousel Style:

• 🥇 As a user, I want to view stored weather information in a carousel-style display (Material Tailwind).

• 🥈 As a user, I want to easily switch between different cities' weather information.

  Task-1 = Implement Carousel Component from Material Tailwind
  

7️⃣ Error and Success Notifications:

• 🥇 As a user, I want to be notified when weather information retrieval is successful.

• 🥈 As a user, I want appropriate notifications to indicate errors and guide me on what went wrong.

  Task-1 = Write functions to display appropriate notifications based on the status of Axios requests.
  Task-2 = Integrate React Toastify package for notifications.
  

8️⃣ Navigate Between Pages Using React Router:

• 🥇 As a user, I want to navigate between pages using onClick events.

• 🥈 As a user, I want to use React Router for page navigation.

  Task-1 = Set up React Router for page navigation.
  Task-2 = Create separate pages/components for different sections of the application (e.g., home page, weather details page).
  Task-3 = Implement onClick event handlers to navigate between pages.
  

9️⃣ Global State Management Using React Context API:

• 🥇 As a user, I want state management to be handled using React Context.

• 🥈 As a user, I want to ensure seamless communication between components using context.

  Task-1 = Create a context provider to manage the application state.
  Task-2 = Define state variables and functions to update state within the context provider.
  Task-3 = Wrap relevant components with the context provider to access state and update it as needed.
  

1️⃣0️⃣ Get City Suggestions from an API:

• 🥇 As a user, I want city suggestions to be filtered as I type in the city input field.

• 🥈 As a user, I want to see city suggestions in a dropdown format.

  Task-1 = Write a function to display city suggestions as the user enters the city input.
  Task-2 = Use a free API (AllCities_API_URL) with Axios to fetch city suggestions and present them to the user in a dropdown format that you styled with TailwindCSS.

Project Skeleton 🩻

📖IWeather App (folder)
|
├── 📁public
│     └── index.html
├── 📁src
│    ┣ 📂assets
│    ┃       ┗ [images and icons]
│    ┣ 📂components
│    ┃       ┣ Footer.jsx
│    ┃       ┣ Forecast.jsx
│    ┃       ┣ GeneralInfos.jsx
│    ┃       ┣ Messages.jsx
│    ┃       ┣ Navbar.jsx
│    ┃       ┣ Search.jsx
│    ┃       ┗ WeatherDetails.jsx
|    ┃
│    ┣ 📂context
|    ┃    ┗ WeatherProvider.js
|    ┃
│    ┣ 📂helpers
|    ┃    ┗ toastNotify.js
|    ┃
│    ┣ 📂pages
│    ┃       ┣ Home.js
│    ┃       ┣ ShowWeather.js
│    ┃       ┗ WeatherLists.js
│    ┃
│    ┣ 📂router
│    ┃       ┗ AppRouter.js
|    ┃
│    ┣ 📂services
│    ┃       ┣ cityFormatters.js
│    ┃       ┣ cityService.js
│    ┃       ┣ constants.js
│    ┃       ┣ weatherFormatters.js
│    ┃       ┗ weatherService.js
|    ┃
│    ┣ App.js
│    ┣ index.css
│    ┗ index.js
|
├── example.env
├── .gitignore
├── iweather-app.gif
├── LICENSE
├── package-lock.json
├── package.json
├── README.md
└── tailwind.config.js

Objective

With this project, a single-page Weather Application will be developed using ReactJS and TailwindCSS, and it is aimed to develop skills in subjects such as API usage, asynchronous data processing and dynamic content management.

At the end of the project, following topics are to be covered; 🎯

• HTML & CSS & JS & ReactJS

• TailwindCSS (Material Tailwind)

• Axios

• React-Router & React-Context API

At the end of the project, will be able to; 💪

• improve coding skills within HTML & CSS (TailwindCSS) & JS & ReactJS.

• use git commands (push, pull, commit, add etc.) and Github as Version Control System.

Step-By-Step Project Guide

• Step 1: Clone the Repository to Your Local Machine:

  Copy the URL of the project repository from GitHub or a similar platform. Open your terminal or command prompt and navigate to the directory where you want to store the project. Use the following command to clone the repository:

  git clone <repository_url>
  

  Replace <repository_url> with the URL of the project repository you copied.

• Step 2: Install Node Package Manager:

  Navigate to the root directory of the project in your terminal or command prompt. Use the following command to install npm packages:

  npm install
  

  This command will install the project's dependencies based on the list in the package.json file.

• Step 3: Signup https://home.openweathermap.org/users/sign_up and get api key. After that, paste your personal api key into your .env file (like example.env file) that you will create in your project root directory. You can check "example.env" file in project root directory.

  REACT_APP_API_KEY=[YOUR_PERSONAL_OPENWEATHER_API_KEY]
  

  Replace [YOUR_PERSONAL_OPENWEATHER_API_KEY] with your personal api key that you get from openweathermap

• Step 4 : Once all packages are successfully installed and api key is pasted, use the following command to start the project:

  npm start
  

  This command will start the development server and open a live preview of the project in your default web browser. If the browser doesn't open automatically, you can view the project by navigating to http://localhost:3000.

Additional Data 📦

• Assets Folder
• AllCities_API_URL
• OPENWEATHERMAP_API

Contributing 🤝

Your insights and contributions greatly enrich my projects! Whether you're bursting with fresh project concepts or have ideas to enhance existing ones, your input is invaluable. Feel free to open an issue to initiate a dialogue about your thoughts, or submit a pull request with your proposed modifications. Every contribution plays a vital role in my growth and improvement, so thank you for being an integral part of my community!

LICENSE 🪪

This repository is licensed under the MIT License. See the MIT licence file for details. For more information please visit MIT License

☺ Happy Coding ✍