igorkrupenja/zaino

First-year university project. Hiking and mountaineering equipment web app.

zaino's Issues

Header

• App icon
  c

Add app icon/logo everywhere

Need custom logo for legal reasons

• add to login page
• add to policy page
• backup policy page
• use font from fiverr
• remove logo with text file if unused
• use in README

could be similar to this one https://www.freepik.com/premium-vector/travel-tourism-icon-set-fillio-black-icon-series_6169321.htm#page=1&query=backpack%20icon&position=2

Inventory

List display:

• Item name
• Item photo/default category image
  https://stackoverflow.com/questions/42296499/how-to-display-svg-icons-svg-files-in-ui-using-react-component
  https://stackoverflow.com/questions/42118296/dynamically-import-images-from-a-directory-using-webpack
  https://css-tricks.com/svg-fragment-identifiers-work/
• Item category (as text)
• Item tags
• Button to add to Pack
• Weight
• Quantity (display only if more than 1)
• size

Misc:

• Add item button

App name should be human-readable on Google sign in screen

https://cloud.google.com/identity-platform/docs/show-custom-domain

https://stackoverflow.com/questions/44815580/how-to-replace-the-myapp-123-firebaseapp-com-with-my-custom-domain-myapp-com

Add expense

Pre-deployment dev tools clean-up

• Should React dev tools be disabled?
• Should Redux dev tools be disabled?

Create categories

• categories, best option to use db straight away to make this future-proof — monitor perf in ListItemDetails
• icons; artboard size in Illustrator 250px * 250px
• put ready icons in dir structure like GCP storage
• think of good order

Filters

• By tag with tag cloud
• By category -- broken
• By name

Create 'looking for work' popup 😂

Slight delay in Inventory update after editing/adding item

Some ideas:

• use RTDB instead of Firestore?
• Test with app hosted on Firebase Hosting
• update state before writing to DB - dangerous in case of DB request failing. Maybe update state immediately (editItem.pending?) but then show error if request fails (editItem.rejected)? maybe use a modal with Retry button? gets complicated with Adding item though as id's are generated in Firestore

Import only required Firebase components

Dedicated domain?

• DNS issues resolved except cert
• update readme (search)
• update link in repo details
• update link profile readme

Edit expense

Consider using rem units

https://stackoverflow.com/questions/11799236/should-i-use-px-or-rem-value-units-in-my-css

Possible to load invalid routes under /edit

http://localhost:8080/edit/invalid-item

Log out: Warning: Encountered two children with the same key

https://stackoverflow.com/questions/59424523/reset-state-to-initial-with-redux-toolkit

https://stackoverflow.com/questions/35622588/how-to-reset-the-state-of-a-redux-store/35641992#35641992

https://stackoverflow.com/questions/59061161/how-to-reset-state-of-redux-store-when-using-configurestore-from-reduxjs-toolki/61943631#61943631

react_devtools_backend.js:2273 Warning: Encountered two children with the same key, 002GHZPLElfu9SVAcatg. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
in section (created by InventoryList)
in InventoryList (created by ConnectFunction)
in ConnectFunction (created by DashboardPage)
in DashboardPage (created by Context.Consumer)
in Route (created by AppRouter)
in Switch (created by AppRouter)
in Router (created by AppRouter)
in AppRouter
in Provider

Drag-and-drop items between Inventory and Pack

Test performance with large data set

~150 items good target

• test that item filter perf is adequate
• test everything on slow PC
• labels perf

Firebase auth

• important note that history npm module v5 is broken with router, use v4 instead
• remember to setup Firebase security rules, refer to Mead project

404 Page

Likely use some icon, perhaps Swiss knife

Switch to using createSlice in Redux

https://redux.js.org/tutorials/essentials/part-2-app-structure
https://redux-toolkit.js.org/api/createSlice
https://dev.to/vcapretz/writing-modern-redux-in-2020-the-powerful-createslice-1i5m

Unit tests

• NB! this is perhaps more interesting than Enzyme https://blog.logrocket.com/enzyme-vs-react-testing-library-a-mindset-shift/
• consider using shortcuts, e.g. lastCalledWith instead of toHaveBeenLastCalledWith

Style loading indicator

• perhaps use jumping mountain icon
• can use src="images/mountains.svg"

https://css-tricks.com/making-css-animations-feel-natural/

Catalogue

Can have catalogue with e.g. with items from some shop?

Lazy load images

https://dev.to/pldg/lazy-load-images-with-webpack-5e80#:~:text=Automatically%20include%20all%20images%20from,bandwidth%2C%20loading%20time%20and%20caching.

Firebase DB

• async with React Context https://kentcdodds.com/blog/how-to-use-react-context-effectively
• https://redux.js.org/tutorials/essentials/part-5-async-logic
• https://stackoverflow.com/questions/60316251/how-to-use-redux-thunk-with-redux-toolkits-createslice

Loading performance

• https://webpack.js.org/guides/code-splitting/
• make sure that svgs are minified
• https://webpack.js.org/guides/caching/
• https://blog.bitsrc.io/improving-google-page-speed-score-using-code-splitting-239d2a027e1b
• check any delays between finishing loading the bundle and Firestore requests
• automatically shorten CSS class names
• try running loadLabels and loadItems in parallel, likely using a root reducer
• https://medium.com/@rajaraodv/two-quick-ways-to-reduce-react-apps-size-in-production-82226605771a

Add prop types validation

Check for ESLint warnings

Generate proper favicons

https://www.npmjs.com/package/favicons-webpack-plugin

https://realfavicongenerator.net/

Photo upload

Readme

Remaining

• check all todos in README.md
• proof-read

Inspiration

• https://github.com/iharsh234/WebApp#readme
• https://github.com/php-censor/php-censor#changelog
• https://github.com/Redocly/redoc#readme
• https://github.com/thelounge/thelounge#readme
• https://github.com/release-it/release-it#readme
• https://github.com/supunlakmal/thismypc#readme

misc

• gcp storage
• demo data
• maybe "preinstall": "sh ./install.sh"

Development:

• Mention tasks.json
• gsutil -m acl set -R -a public-read gs://zaino-2e6cf.appspot.com - or add to zshrc
• note on dependencies and dev dependencies
• yarn config set ignore-engines true

Workspaces/repo structure

• how to yarn add

Firebase

• 2 scripts that deploys w/o functions to save time
• 2 scripts to deploy all
• mention in readme how to use pubsub with populate
  https://stackoverflow.com/questions/46770900/how-to-change-the-project-in-gcp-using-cli-commands
  https://cloud.google.com/sdk/gcloud/reference/pubsub/topics/create
• gcloud pubsub topics create mytopic
• think on separate deploy scripts w/o fn's
• firebase init?

Demo data

• gcloud CLI install
• use pubsub function
• gcloud config set project *zaino-dev-81292*
• gcloud pubsub topics create 'add-demo-data-db'
• gcloud pubsub topics publish 'add-demo-data-db' --message 'g'

Acknowledgements:

• bought icons main set https://graphicriver.net/downloads
• freepik
• console log ASCII http://patorjk.com/software/taag/#p=display&f=Graffiti&t=zaino
• CSS tricks animation loading

Demo data

style

• Border styling https://css-tricks.com/more-control-over-css-borders-with-background-image/
• https://www.cssscript.com/creating-seamless-airmail-strips-with-pure-css/

UI

• have popovers
• some sort of progress indicator likely? https://stackoverflow.com/questions/40987309/react-display-loading-screen-while-dom-is-rendering or redux state isLoading?
• comments
• maybe also use isLoading to make demo load button inactive
• also on Labels page
• important: buttons have no effect/disabled for appropriate demo data state. in auth state? rename to userData? or maybe just use existing selector?
• Button to add sample data
• Button to remove samples — how to delete. labels?
• clean app.tsx
• check other related issues
• test simple cases

Data processing

• decide on climbing categories
• local node script to generate JSON
• npm script to generate demo data
• comments should be trimmed
• sizes: some label, some part of name
• backpack sizes: volume to name, size to label
• labels for climbing items
• labels for year
• lost labels
• buy/weigh label
• carb labels
• rope label
• laces labels - goes under repair
• damaged or need repair label
• re-weigh label

Cloud function

• store in demo-data collection
• test deployment with different projects https://stackoverflow.com/questions/36432458/how-do-i-switch-apps-from-the-firebase-cli
• read region from .env https://medium.com/firelayer/deploying-environment-variables-with-firebase-cloud-functions-680779413484
• remove .firebaserc from repo
• move to new structure
• remove old branches
• remove crap from pubsub GCP
• test build and deploy

Copy fn

• try import if copy is slow
• set date once for items?
• set isFromDemoData
• firestore security rules
• clever loading in slices to limit expensive operations
• loadItems loads items twice if they already in state (same Ids)
• clean up

Add routes for modals

• https://stackoverflow.com/questions/58355628/animate-react-modal
• https://www.google.com/search?q=react+router+react+modal&oq=react+router+react+modal&aqs=chrome..69i57j33l7.4875j1j7&sourceid=chrome&ie=UTF-8
• https://www.npmjs.com/package/react-router-modal

Checklists

Seen this in existing apps, Dima S. also thinks this could work

Loading indicator

• before dashboard
• before log in screen loads — test with server.js
• test with auth routing

https://stackoverflow.com/questions/40987309/react-display-loading-screen-while-dom-is-rendering

https://medium.com/@felippenardi/how-to-do-componentdidmount-with-react-hooks-553ba39d1571

Set up Redux dev tools

Add notice that does not work on mobiles yet

• Icon likely knife
• https://reactrouter.com/core/guides/philosophy
• do along with #232
• check which width is the best
• also check image size on mobile
• create separate component for MobilePlaceholder

Sorting

This is also likely the reason why scroll position is not saved. Was this working before though?

• Adding new item broken?
• Does date change on edit?
• By name?
• By date added?
• Weight
• Quantity?

https://stackoverflow.com/questions/492994/compare-two-dates-with-javascript

Login could possibly be sped up with signInWithPopup

Collect sample data

• Dima Sh. - waiting for checklists only
• Dima K. - need to ask
• Katya
• Gleb - waiting for reply

App name

From the list below I think I like Zaino, attrezzato, Rack, sentiero, Ready the most.

• Packrat
• packer 😂
• GearEasy
• EasyGear
• PackEasy
• Gear
• BaseWeight
• Purist
• bivouac
• Col
• crag
• Shelter
• Sentiero
• rocca
• montagna
• collina
• via
• attrezzato
• WellPrepared
• Ready
• PackReady
• percorrenza
• Zaino
• dialled
• Carabiner
• harness
• Zainetto
• Rack
• traverse
• loZaino
• 9lives
• Prepared
• valmis
• telk
• Taskunuga

Label editor

• add label delete logic
• prevent duplicate names
• should say 'mathching' labels when searching
• https://stackoverflow.com/a/23603772/7405507
• One idea is to use something similar to Trello
• or perhaps use a modal similar to Airtable? with entry point in Filters?
• https://redux.js.org/faq/reducers#how-do-i-share-state-between-two-reducers-do-i-have-to-use-combinereducers
• Color select good idea: https://react-select.com/home#custom-styles
• Outdoors-inspired color names: sky, sea, ocean, mountain, snow, forest, grass, sand, sun, tree, earth
• Link to Dashboard with proper filter on label click
• Clear filters button?
• Label list mostly like Github
• finish form

Firebase hosting

• https://medium.com/@aleemuddin13/how-to-host-static-website-on-firebase-hosting-for-free-9de8917bebf2
• https://stackoverflow.com/questions/46135993/how-to-change-the-app-name-for-firebase-authentication-what-the-user-sees

App should gracefully handle connection loss

Firebase periodically re-attempts to update DB on connection loss, but:

• Nothing is shown in UI.
• For how long does Firebase re-attempt requests? Indefinitely?

Sub-routes are broken

http://localhost:8080/add/ggj

Custom categories

Pack

Misc

• Add to pack button from Inventory
• https://reactjs.org/docs/hooks-effect.html
• FInd a way to handle quantities
• Likely need to find a way to batch DB quantity increase/decrease writes
• create issues to retry batch logic writes on failure (if required)
• https://stackoverflow.com/questions/57542264/how-to-setinterval-for-every-5-second-render-with-react-hook-useeffect-in-react
• https://overreacted.io/making-setinterval-declarative-with-react-hooks/
• https://stackoverflow.com/questions/53090432/react-hooks-right-way-to-clear-timeouts-and-intervals

Consider renaming 'dashboard' route to 'app'

If no other routes, maybe get rid of router altogether?

Firebase new user: This document does not exist. It will not appear in queries or snapshots

Edited item not scrolled back into view after edit

https://stackoverflow.com/questions/43441856/how-to-scroll-to-an-element

• Edited items
• To bottom for new? Or add to top? Or some sorting e.g. by name?