flash1293 / listhero

Shopping list app with custom redux-based sync and share mechanism

Ekofe

• 🔒 End-to-end encrypted
• 🔗 Robustly synced across all your devices
• 📱 / 💻 / 🖥️ Use everywhere

ekofe is a small, simple shopping-list app which syncs lists between multiple devices. It uses react, service workers, and material-ui. You can try (and use) it on listhero.de.

The data is encrypted on the client and synced using a small node.js application server which saves the encrypted changes in a connected postgres instance.

Development

To start the server and client locally, you need a local redis server. Run yarn install and afterwards yarn dev in the client-directory and the server-directory.

Setting up a local db

(for Mac)

• brew install postgres
• pg_ctl -D /usr/local/var/postgres start
• createdb ekofe

Deployment

The easiest way to deploy an ekofe instance is using the prepared docker-compose.yml file. On a production system, you can use the built images flash1293/ekofe-server and flash1293/ekofe-client instead of local sources and Dockerfiles.

Mechanism

This app uses redux under the hood and syncs not the app state itself, but the individual actions between various clients connected to the same account. More explanation in the presentation

listhero's Issues

Cross out item till next item is toggled before removing it from ViewList

Log out if server-password becomes wrong

fall back to login screen if api-requests respond with 401

No empty lists/entries

Dont trigger action if name is empty

Less space between action buttons in ListsEdit

List-TextField doesnt have autofocus

Hidden submit-button for all forms

To trigger correct keyboard on mobile devices

Backup-Container

Periodically write log to dropbox-store

make accessible via keyboard

https://www.npmjs.com/package/react-shortcuts

edit entry in modal in edit-view

Scroll list down if a sortable item is held to bottom of the screen

Cleanup react-app

Language-Setting, Title, Better Icon

Upgrade to material-ui 1.0 beta

Edit-Icon instead of "Editieren"

Preload all bundles

Codesplitting

Per Route with serviceworker-preloading

Back-arrows instead of X-es on ViewList and EditList

Sync indicator

Show with a small symbol next to the app icon whether the app is in sync or not, debounced to not show syncing if connected well

Refactor app-structure

More files for different parts, move logic into HOCs, action creators, own folder for reducers, recompose...

Add password-protection for server (basic-auth)

Setup production-env

With https://github.com/jwilder/nginx-proxy and https://github.com/JrCs/docker-letsencrypt-nginx-proxy-companion

Move from file-log to sqlite-log

With sequelize https://www.npmjs.com/package/sequelize

List-Export

Make lists sortable

With sortable-hoc

Submit Edit-Dialog on form-submit

Add README

Add a README.MD file with informations on how to develop on a local machine.

Preact

Switch to preact with compat-layer for material-ui

Neutrino.js instead of create-react-app

Delete List in Context-Dropdown-Menu

Add divider shortcut

If an item has the name ----, render it as divider

Suggestions (with pre-filled categories and last-used items)

No done items but last used items

Typescript

Animations

Add increment-button in EditList-View

Get Real Toplevel-Domain

listhero.com

No margin for app-bar

Import multi-line file as indidviual items

No autofocus for input-fields

Reconnect on re-open on iOS safari

On iOS safari if you suspend the tab to the background and re-open it, the websocket won't connect again

Add Symbol for Enter

To clarify that the form is submitted using the enter key

Color coding for Edit-Views

Redux - HOR/MW for App-Versioning per reducer-key

Spinner for AsyncComponent while loading

Edit List Name

I18N

Add user-accounts with id and secret

Shareable to another device via QR-Code / Link

Send to bottom in ViewList

As Swipeout-Button
https://react-component.github.io/swipeout/

Add iOS icon

Travis image push only on master

Undo-Snackbar for list removal

History.back for back links

To keep the stack clean