{"id":18905073,"url":"https://github.com/kenberkeley/payroll-system-vue","last_synced_at":"2026-03-04T18:30:19.507Z","repository":{"id":143891752,"uuid":"191259852","full_name":"kenberkeley/payroll-system-vue","owner":"kenberkeley","description":"A payroll system powered by Vue CLI","archived":false,"fork":false,"pushed_at":"2019-06-16T12:41:21.000Z","size":322,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-15T03:12:20.927Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kenberkeley.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-06-10T23:32:45.000Z","updated_at":"2019-12-05T08:35:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"2e712852-0597-455b-9ba5-7fb5a97fa683","html_url":"https://github.com/kenberkeley/payroll-system-vue","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenberkeley%2Fpayroll-system-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenberkeley%2Fpayroll-system-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenberkeley%2Fpayroll-system-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenberkeley%2Fpayroll-system-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kenberkeley","download_url":"https://codeload.github.com/kenberkeley/payroll-system-vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239889026,"owners_count":19713702,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-08T09:10:35.159Z","updated_at":"2026-03-04T18:30:19.442Z","avatar_url":"https://github.com/kenberkeley.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MYOB Payroll System\n\n![build](https://img.shields.io/badge/build-passing-brightgreen.svg)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n![node\u003e=8.6](https://img.shields.io/badge/node-%3E%3D%208.6-brightgreen.svg)\n\n## § Features\n\u003e Mostly powered by [Vue CLI 3.x](https://github.com/vuejs/vue-cli)\n\n* Basics: Vue + Vuex + Vue Router + Vue Meta + Axios\n* UI library: Bulma (Fully Responsive \u0026 Mobile First Design)\n* API \u0026 authentication: Express + LowDB (tiny JSON DB) + JWT\n* Build flow: npm scripts + Webpack + ESLint (Standard) + Babel\n* Comprehensive testing: Jest (Unit), Cypress (E2E), Supertest (API)\n\n## § Prerequisites\n\n* Node.js \u003e= 8.6\n* UNIX-like terminal\n\nIf you have not installed Node.js, you may need this [guide](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).  \nIf you are a Windows user, consider using [Git bash](https://gitforwindows.org) as your primary terminal.\n\n## $ Quick Start\n\n```sh\n# Install dependencies\n$ npm i\n\n# Start API \u0026 Webpack dev servers\n$ npm run dev\n```\n\nThen open http://localhost:8080 , you will see the login page.\n\nLog in with the admin user:\n\n* Username: `myob`\n* Password: `CremorneVIC3121`\n\nAbove both can be modified in `api/config/index.js`\n\n## $ Project Structure\n\n```\n# Trivial folders and files had been omitted\n.\n├── api/ # API server source\n│   ├── config/\n│   ├── db/\n│   │   ├── db.json # You can see all the saved payslips here\n│   │   └── index.js\n│   ├── middlewares/\n│   ├── modules/ # Folder-by-feature\n│   │   ├── auth/\n│   │   └── payslips/\n│   │       ├── utils/ # Only for this module\n│   │       ├── controllers.js\n│   │       └── router.js\n│   ├── utils/\n│   └── main.js\n├── public/\n│   ├── favicon.ico\n│   └── index.html\n├── src/ # Front-end source\n│   ├── assets/\n│   ├── components/ # Use by multiple pages only\n│   ├── constants/ # All global scope keys (URL query, storage, etc) should go here to avoid name collisions\n│   │   ├── LocalStorageKeys.js\n│   │   └── RouteFields.js\n│   ├── layouts/\n│   │   ├── _comps/ # Use by layouts only\n│   │   │   ├── Footer.vue\n│   │   │   └── Header.vue\n│   │   └── main.vue\n│   ├── pages/ # Folder-by-feature (routes)\n│   │   ├── auth/\n│   │   │   └── login.vue\n│   │   └── generator/ # Has its own private comps, utils, etc\n│   │       ├── _assets/\n│   │       ├── _comps/\n│   │       ├── _mixins/\n│   │       ├── _utils/\n│   │       ├── _store.js # Lazy-register Vuex module\n│   │       ├── 1-capture.vue\n│   │       ├── 2-preview.vue\n│   │       └── index.vue\n│   ├── router/\n│   ├── store/\n│   │   ├── auth.js # Pre-register Vuex module\n│   │   └── index.js\n│   ├── utils/\n│   ├── App.vue # Root comp\n│   └── main.js\n├── tests/\n│   ├── e2e/\n│   └── unit/ # Empty. Please place test files next to the implementation\n└── vue.config.js\n```\n\nReference:\n\n* [Folder-by-type or Folder-by-feature (Stack Exchange)](https://softwareengineering.stackexchange.com/a/338610)\n* [Node.js Project Structure Tutorial (RisingStack)](https://blog.risingstack.com/node-hero-node-js-project-structure-tutorial)\n* [How to better organize your React applications? (Medium)](https://medium.com/@alexmngn/how-to-better-organize-your-react-applications-2fd3ea1920f1)\n\n## § Tips \u0026 tricks\n\n* With the help of [link-module-alias](https://github.com/Rush/link-module-alias):\n  * Before: `require('../../../../../\u003cprojectRoot\u003e/xxx/yyy')`\n  * Now: `require('~/xxx/yyy')`\n\n  By the way, Vue CLI [by default](https://cli.vuejs.org/guide/html-and-static-assets.html#url-transform-rules) aliases `@` to `\u003cprojectRoot\u003e/src`.\n\n* API server supports ES Module with [esm](https://github.com/standard-things/esm). No longer need Babel.\n\n* [vuex-map-fields](https://github.com/maoberlehner/vuex-map-fields) enables two-way data binding for form fields saved in a Vuex store.\n\n* Moment.js is [cumbersome](https://bundlephobia.com/result?p=moment)? [Day.js](https://github.com/iamkun/dayjs) to save! Only 2.7 KB (min+gzipped), with the same but immutable API.\n\n* Only used a few classes from Bulma, but the bundle CSS is [large](https://bundlephobia.com/result?p=bulma) (204.7 KB min, 25.3 KB min+gzipped).  \n  After introducing [PurgeCSS](https://github.com/FullHuman/purgecss), the final bundle sharply reduced to ~3KB (min+gzipped).\n\n## § Testing\n\n```sh\n# Run lints\n$ npm run lint\n\n# Run unit tests\n$ npm run test:unit\n\n# Run end-to-end tests\n$ npm run start:api # Start API server firstly\n$ npm run test:e2e # In another terminal. Cypress will pop up later\n# npm run test:e2e:headless # Headless mode\n\n# Or, run above all by the one-liner:\n$ npm t\n# Ctrl + C to stop the API server in the end\n```\n\n## § Deployment\n\n```sh\n# Compile for production\n$ npm run build\n# npm run build -- --report # generate report.html to analyze bundle content\n```\n\nCheck out [`vue-cli-service build`](https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-build) for more options.\n\nAlso, see [here](https://cli.vuejs.org/guide/deployment.html) for deployment guidelines.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenberkeley%2Fpayroll-system-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkenberkeley%2Fpayroll-system-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenberkeley%2Fpayroll-system-vue/lists"}