Synced Shopping List
A shopping list PWA synced between clients.
Stack
- React (CRA)
- Typescript
- Material-UI
- Firebase
- Netlify
Additional Capabilities
- Support fully offline. By nature firebase realtime doesn't support offline mode. This app does.
- When there is a new version, the app refreshes automatically (instead of
console.log
supplied by CRA template)
Installation
App
yarn
Database (Firebase realtime database)
- Follow the instruction - https://firebase.google.com/docs/database/web/start.
- Rename
env.sample
to.env
and update its content with the details received from firebase. - Set up authentication - https://firebase.google.com/docs/database/security/get-started#set_up. The UI doesn't have login so it only supports external providers (e.g. Google)
- Limit the users who can access the db to avoid exceeding the free plan. You can do it by setting the rules write / read to certain users, like this:
{
"rules": {
".read": "auth.token.email == 'my@email.com' ||
auth.token.email == 'my.friend@gmail.com'",
".write": "auth.token.email == 'my@email.com' ||
auth.token.email == 'my.friend@gmail.com'",
}
}
Deploy
In the process you'll set the build variables the same as in the .env
file.
Notes:
- If you configure netlify manually (not via the "Deploy" button), don't forget to configure the build variables.
yarn push
triggers alsonpm version
which bumps the app's version which reflected in the UI (main nav at the bottom)