Welcome to my Weather Forecast App! This app is all about giving you accurate and up-to-date weather information for your location or any city you search for. Whether you want to check if you need an umbrella today or plan your weekend trip, this app got you covered! 😎
This application was built using the following technologies:
Building this weather app was a really fun experience. I learned a lot about working with APIs, TypeScript, and Tailwind CSS. I also enjoyed implementing the MVC architecture, which made my code organized and easy to maintain. I can definitely say I've improved my frontend skills through this project! 💪
One thing I found very interesting was dealing with the OpenWeatherMap API to fetch live data and displaying it in a user-friendly way. Working with weather data is quite fascinating!
Here's a piece of wisdom from my journey: "Take things step by step, and don't be afraid to experiment." Sometimes the best solutions come from trying out different ideas and approaches.
Here's what the app can do:
- Default City Weather: I can see city weather as default, preferably my current location.
- Search for City: I can search for city weather information.
- Today's Weather & 5-Day Forecast: I can see the weather of today and the next 5 days.
- Weather Details: I can see the date and location of the weather.
- Weather Icons: I can see images for each type of weather (e.g., sunny, rainy).
- Temperature Range: I can see the min and max degree each day.
- Wind Status & Direction: I can see the wind status and direction.
- Humidity: I can see the humidity percentage.
- Visibility: I can see a visibility indicator.
- Air Pressure: I can see the air pressure number.
- Current Location Weather (Optional): I can request my current location weather.
- Temperature Conversion (Optional): I can convert temperatures between Celsius and Fahrenheit.
- Detailed Daily Forecast: By clicking on a forecast day, I can get wind status, direction, humidity, visibility, and air pressure of each day.
- Recent Searches: I can see the last three searches that I have made.
To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:
# Clone this repository
$ git clone https://github.com/naijadevgamer/weather-forecast-app
# Navigate into the directory
$ cd weather-forecast-app
# Install dependencies
$ npm install
# Build the app
$ npm run build
# Run the app
$ npm startFeel free to reach out if you have any questions or suggestions. I’d love to hear from you! 😊
- GitHub: My GitHub Profile
- Twitter: @naijadevgamer
- Instagram: @naijadevgamer
- LinkedIn: Abdullah Saleeman
- Email: [email protected]
First and foremost, all praises to Allah for giving me the strength and ability to complete this project.
This project was possible thanks to some amazing resources and tools:
- OpenWeatherMap API for providing the weather data.
- DevChallenges for the inspiration and challenge.