Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/moshfeu/synced-shopping-list
A pwd Shopping List synced between clients, fully offline support.
https://github.com/moshfeu/synced-shopping-list
firebase netlify offline react shopping-list typescript
Last synced: 3 months ago
JSON representation
A pwd Shopping List synced between clients, fully offline support.
- Host: GitHub
- URL: https://github.com/moshfeu/synced-shopping-list
- Owner: moshfeu
- License: other
- Created: 2020-09-26T17:46:55.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-10-31T02:31:37.000Z (4 months ago)
- Last Synced: 2024-11-02T07:33:33.834Z (3 months ago)
- Topics: firebase, netlify, offline, react, shopping-list, typescript
- Language: TypeScript
- Homepage:
- Size: 1.9 MB
- Stars: 3
- Watchers: 2
- Forks: 3
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: License.md
Awesome Lists containing this project
README
# Synced Shopping List
A shopping list PWA synced between clients.
## Stack
- React (CRA)
- Typescript
- Material-UI
- Firebase
- Netlify (hosting + functions)
## Additional Capabilities
1. Support fully offline. By nature firebase realtime [doesn't support](https://github.com/firebase/firebase-js-sdk/issues/3905#issuecomment-705194518) 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
```sh
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:
```json
{
"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](https://firebase.google.com/docs/cloud-messaging/js/client#configure_web_credentials_with_fcm) 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
```sh
yarn start
```
### Run local functions under port 9999
```sh
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](https://undraw.co/) ❤️