Product Grid UI Example

This is a Vanilla JS experiment that entails building a user interface for displaying products.

Product data is mocked via src/components/MockProductData.js.

Installation

Make sure you have the following on your system:

• Node.js (10+)
• NPM (6+)

Optional, but recommended:

• Visual Studio Code
• VSCode ESLint
• VSCode npm Intellisense

The usual routine, run the following command:

npm install

Folder Structure

• dist/: distributable files generated by Parcel
• src/: source files of your app

Commands

The following npm scripts are available to you:

• npm run format: run Prettier on all source files.
• npm run lint: run ESLint on all source files.
• npm run dev: run the app in development mode, starting the local server with Parcel.
• npm run build: run the app in production mode, building the distributable files with Parcel.

Service Worker

The service worker file is located at src/sw.js. It is loaded with the ServiceWorker component.

The file sw.js needs to remain in the root of the src/ directory. (Do not move it!)

If you want to clear the client's cache storage and reinitialize the service worker, bump up the version in sw.js.

Configure VS Code for Prettier

To seamlessly integrate VSCode with Prettier, create a new file .vscode/settings.json (if not existing already) and add the following code:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.requireConfig": true,
  "editor.tabSize": 2
}