moshfeu / synced-shopping-list Goto Github PK

View Code? Open in Web Editor NEW

3.0 2.0 3.0 3.21 MB

A pwd Shopping List synced between clients, fully offline support.

License: Other

HTML 0.69% TypeScript 98.10% Shell 0.24% JavaScript 0.97%

firebase offline react typescript shopping-list netlify

synced-shopping-list's Introduction

Synced Shopping List

A shopping list PWA synced between clients.

Stack

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

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.local 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 == '[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:

Register the app and get the Notification Token.
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:

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

Run

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 ❤️

synced-shopping-list's People

Contributors

Stargazers

Watchers

Forkers

shayanypn ishaihaviv ksarpotdar

synced-shopping-list's Issues

Hide loader and show indication when offline

Allow to add prices

So the user can take the smart decisions about where is the cheapest place to buy from

Add urgency indicator

Product details - dropdown - "Urgent", "Normal".
Products list - red color if urgent

Don't close history modal on click outside

Allow closing the history modal only on cancel click

Open Item's image in a Dialog

Use this: https://mui.com/material-ui/react-modal/

[Bug] Showing item is exist instead of set it as not taken

As a user I set an item as taken (check the checkbox), let's say Milk.
Then I type "Milk" in the input and hit "Enter".

Expected result
The item will re-added to the non taken list

Actual Result
The app shows "the item is already exist" info message

Allow to open the the item details right after it's added

As user, sometimes I want to modify the item right after I added it, setting amount for example.

How to do this?

Add a button using renderOption that hopefully allow the code to both add the item but also open the panel w/o race condition 🤞

Show a notification when the user is not logged in

Since the app is almost useless when the user is not logged in, the app should show an <Alert /> with a button to login

Add images from Google

Add option to add images from Google by searching a term

Add a modal with a search modal

Swipe to to remove from the list

In list view and history view.

Swipe right to check and uncheck items, swipe left to delete items completely.

Allow to undo after deleting items

Show a success toast but allow the user to perform "undo"

Open the app's history page using "new note URL"

Refs:

~~https://wicg.github.io/manifest-incubations/index.html#dfn-note_taking~~
~~https://developer.chrome.com/blog/new-in-devtools-93/#new-note-url~~

https://developer.mozilla.org/en-US/docs/Web/Manifest/shortcuts

Make categories in history expandable

All the categories will be collapsed by default except the first one.

Allow to set an item's category from the "history" view

Currently, the user needs to add it to the list, go to the details page and set the category

Allow deleting item from details page

Run auth and load from cache parallel

Currently, the app first runs authentication and if the user logged in, it loads and presents the the data (products, categories etc.)
This cause an issue when the network is not great so the authentication is slow.
The solution is the app to load the data from localStorage in parallel and if the data exists, show it. If not, wait for the authentication to finish, then load and show the data.

When the item exists in the history, it should add from history but not to create a new item
When the item exists in the list, it shouldn't add the item and notify the user that the item is already exists.

Add the option to remove an item not just check

Currently it's only possible to check an item so if I added an item accidentally, I need to check it and go to the checked list and clear it

UI options

A button in the item details panel
Long press on the item and the option shows up

Don't show loader in offline
Loader should be minimalistic so it won't overlap the current UI. Maybe a progress bar

Add the "usual items" as bulk

Add a checkbox in the item details panel "weekly item"
In the history modal, add a button "add the weekly items"