Synced Shopping List

A shopping list PWA synced between clients.

Stack

• React (Vite)
• Typescript
• Material-UI
• Firebase
• Netlify (hosting + functions)

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.local 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 == '[email protected]' ||
							auth.token.email == '[email protected]'",
    ".write": "auth.token.email == '[email protected]' ||
							auth.token.email == '[email protected]'",
  }
}

Storage (for item's image)

• Enable cors - follow https://firebase.google.com/docs/storage/web/download-files#cors_configuration

Messaging (Push Notifications)

In order to let the server (the code will published soon) to send a push notification, the app should register itself to FCM ("Firebase Cloud Messaging"), get a token and submit it to server. In order to do this:

1. Register the app and get the Notification Token.
2. Add it as REACT_APP_NOTIFICATION_TOKEN to env.local / server env variable.

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)

Run

yarn dev

or

yarn start

Run local functions under port 9999

netlify functions:serve

The proxy function aims to solve the CORS issue when trying to save an image from Google search result (Item Details > Image > Replace (Google)).

Credits

• Illustrations by undraw ❤️