This project was bootstrapped with Create React App.
To use this project locally, you need to follow the commands below:
-
Clone the repository into your local machine:
git clone https://github.com/ibrahimelmokhtar/react-weather-app.git
-
Redirect inside the cloned repository:
cd react-weather-app/
-
Install the required packages:
npm install
-
Copy
example.env
file into.env
file. -
Fill the created
.env
file with corresponding/appropriate information. -
Start local server:
npm start
-
Open http://localhost:3000 to view it in your browser.
In the project directory, you can run:
Installs the project's dependencies to start working with the code.
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Searches for weather at specific city name then Displays the obtained weather information.
All API calls are made using OpenWeatherMap API, as follows:
-
Get city name from geo-location (longitude, latitude) information.
-
Method Signature:
getCityNameFromCoords(lat, lon);
-
Arguments:
lat
:Number
Latitude coordinate of desired city.lon
:Number
Longitude coordinate of desired city.
-
Returns:
cityName
:String
Desired city name.
-
Get weather data for specific city name using specific measurement unit (metric, or imperial).
-
Method Signature:
getWeatherData(currentCity, degreeUnit);
-
Arguments:
currentCity
:String
City name to search for.degreeUnit
:String
desired measurement unit.
-
Returns:
fullWeatherData
:Object
Obtained weather data after filtering desired information.
These packages are required to run this project smoothly without any errors.
These packages can be found in the "dependencies"
object inside the package.json
file.
- @iconscout/react-unicons - 1100+ vector icons as easy to use React Components.
- luxon - Immutable date wrapper.
- react-toastify - React notification made easy.
These packages can be found in the "devDependencies"
object inside the package.json
file.
- prettier - Prettier is an opinionated code formatter.
- prettier-plugin-tailwindcss - A Prettier plugin for sorting Tailwind CSS classes.
- tailwindcss - A utility-first CSS framework for rapidly building custom user interfaces.
- autoprefixer - Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website.
- postcss - Tool for transforming styles with JS plugins.
- Documentation: OpenWeatherMap API - Current Weather Data
- Documentation: OpenWeatherMap API - One Call API 1.0
- Documentation: OpenWeatherMap API - Weather Conditions
- Documentation: Getting Started with Tailwind CSS
- Documentation: Using React Toastify
- Website: IconScout - Importing Icons
- Website: Weather Icons - Alternative Option
- Images are from Unsplash
- Fonts are from Google Fonts