Shop-webapp is a single page progressive web app created for a soap factory.
Lighthouse score :
You can see the live version running here : https://ptitcoinsavonnerie.fr. Please note that the running app is only in french (but the whole code is in english), and it delivers only in France. We are not responsible for color choices.
It is build with polymer, rely on firebase, and goes with its own backend API. As an e-shop, it presents all the features for selling online goods :
- browse products
- place orders, manage their cart and pay (cards or paypal)
- find or contact the store
- create or update products, manage stocks, and prices
- manage orders (mark as sent, refund)
- see some analytics
- Polymer (1.8.0, with no plan to upgrade later)
- Polymer-starter-kit
- Firebase
The app is responsive. Every display or control has been made for rendering / working on mobile as well as on desktop. You can add the app to your homescreen and run it in standalone mode.
This app works offline (recent firefox and chrome) ! Most data are cached locally, so even if you run the application without internet or lose network, you can still browse products you crossed before, or see your orders. Some functionalities are disabled (payment and other stuff), but the whole thing keeps running.
This is done by :
- data-source component which gather the requested data from cache first, and then check the network (if available) to update them. Local caching is relying on IndexedDB.
- service-worker which cache the app files to be able to serve them even without network. Polymer-CLI generates it on build from polymer.json and sw-precache-config.js.
The app follows the PRPL pattern :
- Push : firebase.json (rel=import),
- Render : my-app.html (app shell),
- Pre-cache : firebase.json (rel=preload),
- Lazy-load : page-transition.behavior.html, modal-container.component.html.
Upon user agreement, the app can delivers notifications to desktop and/or mobile when specific events occurs (order is sent, or refunded), using Firebase Cloud Messaging. See notification-registerer.component.html. For further details about endpoints handling, see backend-shop-webapp.
Aside from the expected set of features that powers an e-shop (create / manage products, navigate through orders, etc.), there are less visible features that are worth mentioning :
This app rests on Firebase for all its data, user authentication, files storage and hosting. All the informations displayed are updated as soon as modifications occurs in Firebase, without refresh or any other action, keeping the app interactive and dynamic.
We tried our best to make the app smooth and animated when navigating, when elements appear or things pop. The effects are handled through behaviors. Two good examples are : page transitions or list animations.
The app allows to upload pictures (straight to firebase storage) for products. It is possible to send many pictures at the same time, or even to start uploading on different products. The upload behavior handles them through a common state. You can find more explanations in the file comments.
And with all this, there is also a whole lot of components, ranging from inputs to carousel. Some are based on the polymer catalog, and others are hand-crafted. You can find them in the components source folder (you got it already).
This app uses a BSD-like license that is available here.
Thanks to the Polymer Authors, and a special shoutout for the Polymer Shop which was a good help and source of inspiration.