Shopping List App

A web-based Shopping List written in plain-vanilla JavaScript.

This application is to teach myself "plain" JavaScript as opposed to using a library like React or similar. Also, I always forget to take my shopping list with me, but never forget my phone!!

This app uses Webpack to provide a hot-reload development server and an optimised Production bundle. This is configured and controlled using my SPBuild system which can handle JS/TS, CSS/SCSS and much more automatically.

User Authentication and Authorization plus the Database storage uses Supabase

For development purposes, you can pre-seed the list with 5 items by adding an item 'test' to the list.

Note : This app uses the PRO (Paid) version of FontAwesome icons at the moment. I'll look at replacing this with a free solution when the app is completed.

Functionality that is Working

• Add a new List Item.
• Delete an existing List Item or complete list.
• Toggle an item as done. If toggled, it is moved to a different list below. If toggled again, it is moved back to the main list.
• Edit an item name inline.
• Drag and drop ordering of items, even between lists. Fixed to work on iOS devices using a polyfill from Bernardo Castilho [Polyfill temporarily removed as it was causing several issues on iOS]. Note that for the moment, the drag sort order will not be saved and is lost on refresh.
• Light/Dark mode toggle
• Responsive Design
• User authentication & authorization implemented. Each user has their own list.
• Each list is stored in an online postgresql database.
• Tooltips, using a personally modified version of hint.css

Functionality Planned

For future planned functionality, see TODO.md

Development

Development needs Node.JS to be installed and optionally yarn. These are NOT needed for production once the optimized bundle is created.

You will also need to sign up for a Supabase account, then update the .env file with your SUPABASE_KEY and SUPABASE_URL. Further instructions for using Supabase in local development are TODO

1. Fork or Checkout this repository then change into that directory.
2. Install dependencies using npm install or yarn install
3. Run the development server using npm run dev or yarn dev then access http://localhost:8080 to use the app.

Deployment

To create a production minimised version, run npm prod (or yarn prod depending on your preference) from the project root:

This will create an optimised version in the dist folder, the contents of which can then be served from any standard web server or service.