Experimentation project for a climbing trip planner app
https://dwmkerr-tripweather.web.app/
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 |
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
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.
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.
- Can use one location
- Can use one week
- Can use five locations
- Can use one week
- Can share and view/edit other trips
- Unlimited locations
- Unlimited dates
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:
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.
- [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
- [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
- Location map
X-Data-Grid Pro
- [ ] feat: re-order locations
- [ ] feat: resize columns