Git Product home page Git Product logo

shopping-list's Introduction

shopping-list

Web app for a simple shopping list

A "progressive web app" that implements a simple shopping list stored locally via localStorage, can be installed to a phone's homescreen (from Chrome on Android at least) to open as a standalone app and works offline (using a Service Worker).

Uses Material Design Lite for an Android-like look, Slip.js for drag&drop interactions and is written in vanilla JavaScript otherwise.

Deployment

To self-host simply host all files in the web directory on a static web server that has https enabled. Offline capabilities only work when accessed via https.

The page as well as the web app manifest are translated into English and German. If you have Apache with mod_negotiation enabled and the option MultiViews turned on, it will automatically pick the right files to send to the client. The web folder includes a .htaccess file that will turn this option on for you but be aware that the web server might not allow overriding this option or might not even allow .htaccess files. If your web server can't do this sort of negotiation, rename one of the translated index files to index.html and one of the translated manifest files to manifest.json.

A Node build script for creating the translated files is included. This project already contains the built translated files, but if you want to run the build anyway (e.g. when making adjustments to the originals or adding a language), you will need Node 6+ and run the following commands in the root directory of this project:

npm install
npm run-script build

Licencing

This project's own code and files are licenced under the MIT Licence.

All files in the web/css/libs and web/js/libs directories, as well as the icons in the web/img directory, are included from third parties and do not fall under this licence. The icons have been adjusted from their original versions to work better as app icons.

Material Design Lite: © Google, 2015. Licenced under an Apache-2 licence.

Slip.js: See licence notice included in the file.

Material icons font as well as the shopping cart icon used as a web app icon: © Google. CC-BY

shopping-list's People

Contributors

shepard avatar

Watchers

 avatar  avatar

shopping-list's Issues

Avoid adding duplicate items to a list.

The app should not allow me to add duplicate items to the list. If I try to submit something and there's another item with the exact same text already in the list, it should not submit a new item and clear the text field but instead just show a "snackbar" message at the bottom saying something like "That's already in your list.".

Improve ServiceWorker.

Use a cache-first strategy rather than a network first one to get faster loading times.

Also figure out why the page often isn't refreshing properly on the phone. Current ServiceWorker shouldn't cause it getting stuck with cache entries. Yet still I sometimes can only get it to refresh properly using remote debugging.

Improve long press.

Get rid of delay by using touchstart/touchend without interferring with drag&drop.

Adding items sometimes closes the keyboard.

When adding items in Chrome on Android, sometimes they keyboard will close even though the textfield is still focussed. This seems to be happening when pressing the add button. Not sure if it happens when submitting the form via the keyboard too.

Make it more obvious that an item has been added?

At the moment when you have typed in the name of the item and either submitted via the keyboard or pressed the add button, the item appears in the list and the view scrolls to the bottom so you can see it there.
While entering stuff I often didn't notice though that it actually appeared in the list and found myself checking. Maybe a nice, non-obtrusive animation would help make me notice the item was actually successfully added.

Text field for adding items should grow to available size.

At the moment it fits nicely on my phones screen but it actually seems to have a fixed width and on larger resolutions it's too small. Tried adding an .mdl-layout-spacer between the text field and the button but that just pushed the button slightly out of view in some browsers.

Cap number of previous states.

Every action on a list creates a previous state which captures the whole state of the list before the action so that the action can be undone.
To make sure memory isn't poluted endlessly the previous states should be capped at a reasonable number. When adding a previous state and the total number of previous states is larger than that number, the oldest ones should be removed until they're below that number again.

Add suggestions

When typing to add a new item there should be a way to receive suggestions from previously entered items, to make adding items you buy often faster.
This could either be a list that pops up over the text field (which might be in the way though) or it could be something you explicitly pick from rather than typing in values manually (but then you'd probably still want to find stuff).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.