shayanypn/synced-shopping-list

Synced Shopping List

A shopping list PWA synced between clients.

Stack

• React (CRA)
• Typescript
• Material-UI
• Firebase
• Netlify

Additional Capabilities

1. Support fully offline. By nature firebase realtime doesn't support offline mode. This app does.
2. 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)

1. Follow the instruction - https://firebase.google.com/docs/database/web/start.
2. Rename env.sample to .env and update its content with the details received from firebase.
3. 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)
4. 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:

1. If you configure netlify manually (not via the "Deploy" button), don't forget to configure the build variables.
2. yarn push triggers also npm version which bumps the app's version which reflected in the UI (main nav at the bottom)