Skip to content

maxigoldy/shopping-app-prototype

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Typing SVG

title banner graphic - shopping web app

How to use it as a web app?

Steps to Turn Website into an App (on iOS 26 or newer)

  1. Open Safari: Go to the website you want to add. (Here it's https://maxigoldy.github.io/shopping-app-prototype/)
  2. Share Menu: Tap the "Share" button (box with upward arrow) at the bottom of the screen.
  3. Add to Home Screen: Scroll down and select "Add to Home Screen".
  4. Name the App: Rename the shortcut if desired, then tap "Add".
  5. Open as App: The icon will appear on your home screen, allowing the site to open in a dedicated, full-screen window.

Chrome "Add to Home Screen" (using Chrome on Android):

  1. Open Chrome on Android.
  2. Navigate to the website. (Here it's https://maxigoldy.github.io/shopping-app-prototype/)
  3. Tap the three-dot menu (top right).
  4. Select "Add to home screen".
  5. Name the app and tap "Add."

project description graphic - shopping web app

(selected german language for this graphic due to german module at HSB.)


This is our prototype of a shopping list web app. This prototype was developed as part of our studies at Hochschule Bremen (HSB), in the ISMI degree program, for the HCI module.

This is a prototype only and not a finished product. It's not production ready.


Missing Features

(Required to make this a production-ready application)

  • Core functionality implemented
  • Integration with voice assistants (Alexa, Siri, etc.)
  • Persistent data storage independent of browser cache (database with user accounts)
  • Integration of Stripe or alternative payment providers
  • Removal of demo-only content from profiles and sample items
  • Expansion of default available items
  • Improved inspiration/discovery section (image-based; possible cooking app API integration)
  • Improved UX (User Experience)

My Lessions Learned

  • Utilized Web Storage (Local Storage) for persistent client-side data storage
  • Implemented dynamic, single-page–style UI using JavaScript DOM manipulation without relying on frameworks
  • Created a simulated subscription (Pro) system to gate features on the client side
  • Encrypt/Decrypt JSON Strings using CryptoJS

Jokes Card

About

Prototyp einer Einkaufslisten-Webapp für HSB

Resources

Stars

Watchers

Forks

Contributors