tripweather

Experimentation project for a climbing trip planner app

https://dwmkerr-tripweather.web.app/

• Developer Guide
  • Firebase
  • Firebase Functions
• Releasing
• Service Tiers
  • Guest
  • User
  • Subscriber
• Research
• TODO
  • 0.1.0
  • 0.2.x
  • Future

Developer Guide

| Command | Description | | ------- | ----------- | | npm run start | Run the website locally, connected to the cloud | | npm run start:local | Run the website locally, connected to the local emulator | | npm run lint | Lint the code with eslint/prettier | | npm run lint:fix | Fix the code with eslint/prettier |

Firebase

Use the Firebase Local Emulator Suite to help when working with Firebase.

Setup looks like this:

# Install firebase CLI tools, then login.
# Don't install with:
#   curl -sL https://firebase.tools | bash
# As this seems to suffer from some CLI issues:
#   - https://github.com/firebase/firebase-tools/issues/6446
npm install -g firebase-tools
firebase login

# Initialise the firebase project (not needed for most users, only if you are
# forking and building your own project from scratch).
#
# firebase init
#
# Choose: Firestore, Emulators. Lifeline project. Default options seem to be fine.

# Start the emulator, optionally open the web interface.
firebase emulators:start
open http://localhost:4000

Deploy indexes and rules with:

fireabase deploy --only firestore

Firebase Functions

To watch for changes in the code and run the Firebase functions in the emulator, run:

npm run emulate

To test functions interactively:

firebase functions:shell

# Then e.g:
# await weather({data: {latitude: "-1.56266", longitude: "53.11893"}})
# await arcGisSuggest({data: {location: "Peak District"}})

Firebase function parameters and configuration are defined in ./functions/src/parameters.ts. These parameters are loaded from Firebase at runtime, but can also be defined in ./functions/.secrets.local if needed.

Releasing

This project uses Release Please to manage releases. As long as you use Conventional Commit messages, release please will open up a 'release' pull request on the main branch when changes are merged. Merging the release pull request will trigger a full release to NPM.

VERSION="0.1.0" git commit --allow-empty -m "chore: release ${VERSION}" -m "Release-As: ${VERSION}"

Note that currently firestore configuration (security rules and indexes) is not deployed as part of this process, to avoid unexpected downtime while indexes rebuild. Manually deploy these changes as needed.

Service Tiers

Guest

• Can use one location
• Can use one week

User

• Can use five locations
• Can use one week
• Can share and view/edit other trips

Subscriber

• Unlimited locations
• Unlimited dates

Research

Front end component framework:

• MUI Core really solid looking react components based on Material UI. Has 'suggest' boxes.
• Joy UI looks like great React Components, same authors as Material UI above but less google-centric. Has 'suggest' boxes.

Geolocation Services:

• ArcGIS: API is simple and well-documented, pricing seems not too bad for now for experimenting.

Weather Services:

• PirateWeather: based on government-provided weather sources, drop in replacement for Dark Sky, 15000 requests per month
• OpenWeather: more commercial than the above

Weather icons:

Amazing icons at: https://basmilius.github.io/weather-icons/index-line.html

Example weather forecast in the dark sky style: https://merrysky.net/forecast/howden/si Use for reference in my own.

TODO

0.1.0

• [x] check name 'trip weather'
• [x] feat: weather icon - sunshine
• [x] feat: basic structure - search bar and suggest function
• [x] feat: error handling and context
• [x] feat: add location to list
• [x] feat: main page with navbar
• [x] feat: main page search
• [x] feat: basic weather api call
• [x] feat: handle weather api errors e.g https://api.pirateweather.net/forecast/bpUlCYTXUho6JuCR7bD0dWdrscOHtlBw/150.37111,150.37111
• [x] feat: basic location grid
• [x] feat: settings context with specification of start / end date
• [x] feat: start/end date in search bar
• [x] feat: weather grid, showing specified days
• [x] feat: weather grid format day titles better
• [x] feat: smaller progress indicator for loading weather
• [x] bug: weather data fields for day are different to minute/hour - fix the mapping. This will fix the temperatures.
• [x] feat: add temp to weather cells, add feels like, ensure units are correct.
• [x] feat: when change dates or units, mark weather as stale and refresh
• [x] bug: on settings change (e.g. change units) units change immediately but instead we should show a reloader for each weather setting
• [x] feat: main page list, with location details having a loader
• [x] feat: delete location
• [x] bug: wrap text in cell
• [x] chore: recycle arcgis keys
• [x] feat: weather icon credits in footer - other credits too? arcgis/pirate
• [x] build: check new firebase api key works
• [x] build: ensure https://dwmkerr-tripweather.web.app/ deploys

0.2.x

• [x] feat: address/gps/favourite selector left of search bar
• [x] feat: add address by coordinate
• [x] feat: basic sign in menu
• [x] feat: require sign in alert
• [x] bug: weather outside of UK doesn't ever seem to show, even though GPS coordinates seem correct
• [x] feat: when using favorites if not logged in use set alert context to show a login alert with a login action
• [x] feat: favorite icon in red, on the left
• [ ] feat: enable add only when valid gps and mask gps input
• [ ] bug: clear selection on favorite/address/gps add
• [ ] feat: debounce search input
• [ ] feat: set location label? (see TODO in code)
• [ ] bug: undefined cell value when shortening end date range
• [x] bug: TripLocation has longitude and latitude but these seem to be set from IPoint objects so the values are wrong - or are they? Checking blue mountains it seems OK. Update: checking the coordinates manually seems they are OK
• [ ] refactor: favourites as a sub-collection of user
• [ ] bug: after address or GPS (or favorite) is selected and added, clear the selection
• [ ] bug: if can't set weather show an error icon in the weather panel

Needs bug fix

• [ ] bug: state management bug in onRemoveFavoriteLocation, also user in requirelogin
• [ ] feat: favorite - require sign in to use

Nice to have

• [x] warnings in console when searching for location
• [ ] feat: manage favorites page
• [ ] minor bug (settings): on date change, when make starting day current val + 1 get pop error
• [ ] minor bug (settings): on unit change, new units flash before the loader updates
• [ ] refactor: hydrate dates weather can ignore weather we've already loaded
• [ ] monitor: do we still lose the search from time to time in the address search bar?

v0.3

• [ ] feat: weather icon is link to details on Merry Sky
• [ ] feat: pinned/favourite locations, use AirBnB trips as an example of UI
• [ ] feat: activity select in navbar
• [ ] feat: save search details
• [ ] feat: share button offers link to share
• [ ] feat: open saved trip from URL
• [ ] feat: name trips
• [ ] feat: 'my trips'
• [ ] feat(settings): temperature: apparent/recorded low/high/max/min
• [ ] feat: settings drawer with farhenhiet / celcius selector

v0.4

• [ ] better date range selector, before search bar
• [ ] feat: toggle grid/map/grid+map view
• [ ] feat: save units as a user preference
• [ ] feat: show weather for selected location
• [ ] feat: save location as favourite, quick search for favourites
• [ ] score icons for walking/climbing
• [ ] ads based on score icons, e.g. climbing books for selected area
• [ ] feat: spinner when loading location suggestions

Future

• Location map

X-Data-Grid Pro

• [ ] feat: re-order locations
• [ ] feat: resize columns