STORMGUARD

Explore the docs »

-->

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
3. Contact

About The App

StormGuard is your personal weather app that provides you with the most accurate weather forecast for your location, is easy to use and has a beautiful design. StormGuard is specifically designed to be as simple and intuitive as possible. With just one click you receive the weather condition in your status bar at your current location.

Specs: StormGuard is offline-first cross-platform mobile application that can fetch current weather information and forecast for the next five days for any given city using OpenWeatherMap API. The app provides an interactive and intuitive user interface and remembers previous searches for quick future access.

(back to top)

Screenshots of the app

Built With

Frameworks/libraries/languages used:

• React.js
• Node.js
• Framework7
• Capacitor
• Redux store and toolkit; (meh, could have used Context API too)
• OpenWeatherMap API
• Vite
• Prettier

(back to top)

Getting Started

To get a local copy up and running follow these simple steps after downloading the files from the Github.

Prerequisites

To run the app, install it locally using npm in your terminal:

npm i

or

yarn

NPM Scripts

• 🔥 start - run development server
• 🔧 dev - run development server
• 🔧 build - build web app for production
• 📱 build-capacitor-ios - build app and copy it to iOS capacitor project
• 📱 build-capacitor-android - build app and copy it to Android capacitor project

Vite

There is a Vite bundler setup. It compiles and bundles all "front-end" resources. You should work only with files located in /src folder. Vite config located in vite.config.js.

Capacitor

This project created with Capacitor support. And first thing required before start is to add capacitor platforms, run in terminal:

npx cap add android && npx cap add ios

APIs

Rename environment file to .env , and set the API key for the OpenWeatherMap API (you will need to register and sub).

/data/2.5/weather - To fetch the current weather

/data/3.0/onecall - To fetch the daily forecast

Implemented Features

• City Input
• Current Weather
• Weather Forecast
• Geolocation handling
• Data Storage
• A11y features (semantic HTML structure, ARIA attributes, ATL tags etc.)
• Various optimizations (lazy loading, code splitting, tree shaking, etc.)
• Offline First

Ideas for Future Features

• Add Storybook for better component development;
• CI/CD using Github Actions;
• Add unit tests using Jest, including edge cases;
• Add e2e tests using Cypress and Argos Screenshots;
• Add more graceful and "smart" error handling, providing the user with more information about the error and the development team with more information about the error;
• Protect API keys with proxy endpoints, implemented between the OpenWeatherMap API and the app;
• Move assets to Cloudinary (that hosts with on AWS and optimizes them for all devices) for maximum performance;
• Using dependency injection for better code scalability & testability;
• Logging & monitoring using FullStory;
• Crash/Error reports using Sentry;

Check out official Capacitor documentation for more examples and usage examples.

Contact

Project Link: StormGuard Weather App

(back to top)