GetYWeather

❓ What is this

This application is a very simple weather forecasting application, with a lightweight UI and a user-friendly, easy to use experience.

---

Click here 👉 to navigate to user features
Click here 👉 to navigate to developer features

💻 About this project

Because I attended a vocational school, I had to make a final project, so I chose to make a weather forecasting application because this is basically a basic portfolio work for every Full-stack developer.
Therefore, this project was built with 0 budget.

---

⚡️ Core Features

This application contains several functions, like:

• 🔍 Search – Quickly find weather data for any city worldwide with a clean search interface.
• 🌍 IP-Based Geolocation – No need to type; the app automatically detects your location via IP for instant local updates.
• 🗺️ Interactive Map – Visualize your exact location and surroundings with the integrated map module.
• 📅 Smart Notification – A date-based system that keeps you informed about the weather that matters to you and a notificion about your desired plans on that day.

📦 How to access

Access in this 👉 link
Or
Download the Android application. You find on the right side, in the releases.
There is no IOS version because of the bureaucracy of Apple.

🤔 How to use

Right here just enter the desired city and press Enter or click on the Search button.

Here you find the searched city and the exact time of the "county".
Below this you find the weather details.

This is the map, and alert setting interface.

---

🛠️ Developer Guidance

I made it with 0 previous knowledge about React so please be aware with this while you study the code.

🤬 Design problems

I aware all of this.

• ↕️ Cursor There is two cursor on the right in the browser.
• 💿 Data I used class for global user data instead of Zustand or React Context. (I knew 0 React before this project.)

📚 Tech Stack

I used Ionic because my school's requirements stated that we had to create an application that provides cross-platform availability for both web and mobile platforms.

• Ionic (as a meta-framework, this is the base of everything):

  • Capacitor (the bridge from web to mobile)
  • React (for the UI)
  • Ionic-storage (this is the database)
  • Bootstrap and MDB (for the design)
  • Vite (build tool)

• API s:

  • OpenWeather (for the Weather details)
  • OpenStreet (for the place locations)
  • Leaflet (for the actual map)
  • EmailJS (this provides the email sending)
  • ip-api and ipapi (for the IP address based location)

• Testing:

  • Jest (integration test)
  • Cypress (end-to-end testing)
  • Vitest (UNIT test)

• Netlify as a hosting service for the web page.

👨‍💻 Actual Development

To start development just clone this repository.

git clone https://github.com/6gDav/GetYWeather.git

Or download the ZIP.

---

Start dev server with this command.

ionic serve

---

Synchronize with android.

ionic cap sync android

---

Open in Android Studio.

ionic cap open android

Problem may occur in this step if the OS don't find the System Variables for Android Studio or Java.

---

Synchronize with IOS.

ionic cap sync ios

Problem may occur in this step if the OS don't find the System Variables for Xcode.

---

npm install

May be needed to download all necessary dependencies.

🪪 License

This project is licensed under the MIT License - see the LICENSE file for details.