+ added simple grocery app with authentication.

.babelrc

@@ -0,0 +1,17 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "edge": "17",
+          "firefox": "64",
+          "chrome": "74",
+          "safari": "11.1",
+        },
+        "useBuiltIns": "usage",
+        "corejs": 3,
+      }
+    ]
+  ]
+}

.gitignore

@@ -1,3 +1,6 @@
 .idea
 node_modules
-bower_components
+bower_components
+
+.cache
+dist

README.md

@@ -73,3 +73,10 @@ Page 2
 6. Never expose bower.json / package.json. The world doesn't need to know what packages you're using and neither should you tell them. Move `bower.json` out of the `public` directory and add a static path to the `bower_components` folder in express. 
 
     `app.use('/bower_components', express.static(__dirname + '/bower_components'));`
+
+## features
+- mithriljs, sequelizejs, parceljs
+
+## How to start
+- npm install
+- npm start

client/components/button.js

@@ -0,0 +1,13 @@
+import m from 'mithril';
+
+/**
+  * @param {String} color - button color
+  * @param {String} text - text for button
+  * @param {Object} attrs - attributes for button, eg style, className
+  */
+export default class Button {
+  static render(options) {
+    const { color, text, attrs } = options;
+    return m('button.btn.btn-' + color, attrs, text);
+  }
+}

client/js/index.js

@@ -0,0 +1,149 @@
+import '../../scss/style.scss';
+import '@mdi/font/scss/materialdesignicons.scss';
+import 'bootstrap';
+import m from 'mithril';
+import stream from 'mithril/stream';
+const prop = stream;
+import Button from '../components/button';
+import _ from 'lodash';
+import { isNumerical } from './utils';
+
+class Index {
+  oninit() {
+    this.search = {
+      brand: prop(''),
+      productName: prop(''),
+    };
+    this.itemFoundMsg = prop(null);
+    this.editErrMsg = prop('');
+    this.barcodeEditErrMsg = prop('');
+    this.tableContent = prop([]);
+    this.tableHeader = ['#', { name: 'brand', sort: 'brand' }, { name: 'product name', sort: 'productName' }, 'barcode', 'edit'];
+    this.edit = {
+      id: prop(null),
+      brand: prop(''),
+      productName: prop(''),
+      barcode: prop(''),
+    };
+
+    this.search.on = event => {
+      event.preventDefault();
+
+      return m.request({
+        url: '/grocery/search', method: 'POST',
+        body: { brand: this.search.brand(), productName: this.search.productName() },
+      })
+        .then(this.tableContent)
+        .then(() => this.itemFoundMsg(this.tableContent().length))
+        .catch(err => console.info('err: ', err));
+    };
+
+    const fetchGrocery = () => {
+      return m.request({
+        url: '/grocery/findAll',
+      })
+        .then(res => this.tableContent(res))
+        .then(() => this.itemFoundMsg(null))
+        .catch(err => console.info(err));
+    };
+
+    this.editInfo = (groceryId, index) => {
+      this.edit.id(groceryId);
+      this.edit.brand(this.tableContent()[index].brand);
+      this.edit.productName(this.tableContent()[index].productName);
+      this.edit.barcode(this.tableContent()[index].barcode);
+    };
+
+    this.saveEditedData = () => {
+      if (_.isEmpty(this.edit.brand()) && _.isEmpty(this.edit.productName())) {
+        this.editErrMsg('Edit fields cannot be empty!');
+        return;
+      }
+
+      return m.request({
+        method: 'put',
+        url: '/grocery/update',
+        body: this.edit,
+      })
+        .then(fetchGrocery)
+        .then(() => this.edit.id(null))
+        .catch(err => console.info(err));
+    };
+
+    this.checkBarcode = () => {
+      if (!isNumerical(this.edit.barcode()))
+        this.barcodeEditErrMsg('invalid characters are entered into the field "barcode"');
+      else
+        this.barcodeEditErrMsg('');
+    };
+
+    this.sortTableColumn = (name) => {
+      let sorted = _.sortBy(this.tableContent(), o => o[name]);
+      this.tableContent(sorted);
+    };
+
+    fetchGrocery();
+  }
+
+  view(vnode) {
+    const { tableHeader, tableContent, itemFoundMsg } = vnode.state;
+    return [
+      m('.container.mt-3', [
+        m('h1.mb-3', 'Welcome to Grocery App'),
+        !this.edit.id() && m('.row.mb-3', [
+          m('.col-md-12.col-xs-12', [
+            m('form.form-inline', { onsubmit: e => this.search.on(e) }, [
+              m('.form-group', [
+                m('label.ml-3', 'Brand'),
+                m('input.form-control.ml-3', { type: 'text', name: 'grocery-brand', placeholder: '', value: this.search.brand(), oninput: e => this.search.brand(e.target.value) }),
+                m('label.ml-3', 'Product Name'),
+                m('input.form-control.ml-3', { type: 'text', name: 'grocery-productName', placeholder: '', value: this.search.productName(), oninput: e => this.search.productName(e.target.value) }),
+              ]),
+              m('button.btn.btn-primary.submit-btn.ml-3', 'Search'),
+            ]),
+          ]),
+        ]),
+        itemFoundMsg() && m('p', 'Found: ', tableContent().length),
+        m('.row', [
+          m('.col-md-12.col-xs-12', [
+            m('table.table.table-hover', [
+              m('thead', [
+                m('tr', [
+                  tableHeader.map(header => _.isObject(header)
+                    ? m('th', { onclick: () => this.sortTableColumn(header.sort) }, header.name, m('i.mdi.mdi-sort-alphabetical.ml-1', { style: 'cursor:pointer' }))
+                    : m('th', header)),
+                ]),
+              ]),
+              m('tbody', [
+                !this.edit.id() ? tableContent().map((content, index) => [
+                  m('tr', [
+                    m('td', index + 1),
+                    m('td', content.brand),
+                    m('td', content.productName),
+                    m('td', content.barcode),
+                    m('td', Button.render({ color: 'primary', text: [m('i.mdi.mdi-pencil'), ' edit'], attrs: { onclick: () => this.editInfo(content.groceryId, index) } })),
+                  ]),
+                ])
+                : m('tr', [
+                  m('td', 1),
+                  m('td', m('input', { value: this.edit.brand(), oninput: e => this.edit.brand(e.target.value) })),
+                  m('td', m('input', { value: this.edit.productName(), oninput: e => this.edit.productName(e.target.value) })),
+                  m('td', m('input', { value: this.edit.barcode(), oninput: e => this.edit.barcode(e.target.value), onkeyup: () => this.checkBarcode() })),
+                  m('td', [
+                    Button.render({ color: 'secondary', text: 'Cancel', attrs: { onclick: () => { this.edit.id(null); this.editErrMsg(''); } } }),
+                    Button.render({ color: 'success', text: 'Save', attrs: { className: 'ml-2', onclick: () => this.saveEditedData() } }),
+                  ]),
+                ]),
+              ]),
+            ]),
+            this.editErrMsg() && m('p.text-danger', this.editErrMsg()),
+            this.barcodeEditErrMsg() && m('p.text-warning', this.barcodeEditErrMsg()),
+          ]),
+        ]),
+      ]
+      ),
+    ];
+  }
+}
+
+m.mount(document.body, Index);

client/js/utils.js

@@ -0,0 +1,12 @@
+module.exports = {
+  isNumerical,
+};
+
+function isNumerical(data) {
+  let numeric = /^[0-9]+$/;
+
+  if (data.toString().match(numeric))
+    return true;
+  else
+    return false;
+}

index.js

@@ -0,0 +1,44 @@
+import express from 'express';
+import helmet from 'helmet';
+import path from 'path';
+import http from 'http';
+import cors from 'cors';
+import bodyParser from 'body-parser';
+import log from './utils';
+import api from './server/api';
+import database from './server/database';
+
+const {
+  NODE_ENV = 'development',
+  PORT = 8080,
+} = process.env;
+
+const app = express();
+app.use(helmet());
+app.use(cors());
+app.use(bodyParser.json({ limit: '10mb' }));
+app.use(bodyParser.urlencoded({ extended: true }));
+
+app.distDir = path.join(__dirname, 'dist');
+app.use(express.static(path.join(app.distDir, 'client'), { index: false }));
+
+let db = new database();
+db.init(app);
+db.createSample();
+api(app);
+
+app.use('/', (req, res, next) => {
+  res.sendFile(path.join(app.distDir, 'client', 'index.html'));
+});
+
+app.use((err, req, res, next) => {
+  if (NODE_ENV === 'development')
+    res.status(500).json({ status: false, stack: err.stack });
+  else
+    res.status(500).json({ status: false, message: 'something went wrong' });
+});
+
+const server = http.createServer(app);
+server.listen(PORT, () => {
+  log.info('Server is running at port %s', PORT);
+});