Setup

• Clone the repo and install dependencies:

git clone https://github.com/ashmidgley/sheperds-warning.git
npm install

• Create an account on OpenWeatherMap.
• Set up a subscription for the One Call API 3.0.
• Create an API Key.
• Add the key to REACT_APP_OPEN_WEATHER_API_KEY in .env.

Web

This project was initialised using Create React App. All default script's apply:

npm run build // build
npm start // run

Mobile

This project uses Ionic Capacitor to build and run the application on mobile devices.

Setup

• For iOS, make sure you have CocoaPods installed.
• For Android, make sure you have the Android SDK installed.

Build

Build the web code:

npm run build

Add the platforms:

npx cap add ios && npx cap add android

Sync the web code to the Capacitor projects:

npx cap sync

Allow Location Services

For iOS, add the below to the tag in ios/App/App/Info.plist:

<key>NSLocationAlwaysUsageDescription</key>
<string>We need access to your location to provide location-based services.</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>We need access to your location to provide location-based services.</string>

For Android, add the below to android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-feature android:name="android.hardware.location.gps" />

For more details on configurating location services, see here.

Run

npx cap run ios
npx cap run android

Tech Stack

• React
• Ionic Capacitor
• Framework7

Implemented Features

• City Input
• Current Weather
• Weather Forecast
• Geolocation
• Data Storage

Unimplemented Features

• Offline First