Weather Journal App

This project was bootstrapped with Create React App.

Table of Contents

• Weather Journal App
  • Table of Contents
  • Installation
  • Available Scripts
    • npm install
    • npm start
  • Available Routes
    • Home Page
  • Backend Server
    • Get City Name
    • Get Weather Data
  • Installed NPM Packages
    • Production Packages
    • Development Packages
  • Useful Resources
  • Credits & Assets

Installation

(Back to top)

To use this project locally, you need to follow the commands below:

1. Clone the repository into your local machine:

   git clone https://github.com/ibrahimelmokhtar/react-weather-app.git

2. Redirect inside the cloned repository:

   cd react-weather-app/

3. Install the required packages:

   npm install

4. Copy example.env file into .env file.

5. Fill the created .env file with corresponding/appropriate information.

6. Start local server:

   npm start

7. Open http://localhost:3000 to view it in your browser.

Available Scripts

(Back to top)

In the project directory, you can run:

npm install

Installs the project's dependencies to start working with the code.

npm start

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.

Available Routes

(Back to top)

Home Page

Searches for weather at specific city name then Displays the obtained weather information.

Backend Server

(Back to top)

All API calls are made using OpenWeatherMap API, as follows:

Get City Name

• 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

• 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.

Installed NPM Packages

(Back to top)

These packages are required to run this project smoothly without any errors.

Production Packages

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.

Development Packages

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.

Useful Resources

(Back to top)

• 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

Credits & Assets

(Back to top)

• Images are from Unsplash
• Fonts are from Google Fonts