{"id":18817797,"url":"https://github.com/vpdb/website","last_synced_at":"2025-07-05T00:06:16.510Z","repository":{"id":40499004,"uuid":"105205362","full_name":"vpdb/website","owner":"vpdb","description":"The VPDB web application.","archived":false,"fork":false,"pushed_at":"2025-04-12T07:27:23.000Z","size":12913,"stargazers_count":6,"open_issues_count":52,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-13T23:31:43.906Z","etag":null,"topics":["angularjs","beautiful","database","pinball","pwa","threejs"],"latest_commit_sha":null,"homepage":"https://vpdb.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vpdb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2017-09-28T22:32:29.000Z","updated_at":"2022-02-21T14:04:23.000Z","dependencies_parsed_at":"2023-01-23T11:01:09.727Z","dependency_job_id":"d98765d1-8448-4262-a887-6002b4cd3157","html_url":"https://github.com/vpdb/website","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/vpdb/website","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vpdb%2Fwebsite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vpdb%2Fwebsite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vpdb%2Fwebsite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vpdb%2Fwebsite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vpdb","download_url":"https://codeload.github.com/vpdb/website/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vpdb%2Fwebsite/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263636796,"owners_count":23492305,"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":["angularjs","beautiful","database","pinball","pwa","threejs"],"created_at":"2024-11-08T00:13:28.715Z","updated_at":"2025-07-05T00:06:16.466Z","avatar_url":"https://github.com/vpdb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://raw.githubusercontent.com/vpdb/server/master/assets/vpdb-logo-text.svg?sanitize=true\" alt=\"VPDB\" width=\"250\"\u003e\r\n\r\n*A database for Virtual Pinball tables.*\r\n\r\n[![Codeship Status](http://img.shields.io/codeship/7a665bd0-b073-0135-06f3-52802c62f0b1.svg?style=flat-square)](https://app.codeship.com/projects/257675)\r\n[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=RXJHMzgzZ1hZVURNS1pwWUUybFpxUXdOb1daQTlhTmExWms1K3ptenlocz0tLXp2R1VtMUtOOG1PN0tCZ1lJdmdjQ0E9PQ==--59873cb571ddbb196a9f1979a0c316718c2bc23e)](https://www.browserstack.com/automate/public-build/RXJHMzgzZ1hZVURNS1pwWUUybFpxUXdOb1daQTlhTmExWms1K3ptenlocz0tLXp2R1VtMUtOOG1PN0tCZ1lJdmdjQ0E9PQ==--59873cb571ddbb196a9f1979a0c316718c2bc23e)\r\n[![Dependencies](https://david-dm.org/vpdb/website.svg?style=flat-square)](https://david-dm.org/vpdb/website)\r\n\r\nThis the code of the website. For the API, check out the [server project](https://github.com/vpdb/server).\r\n\r\n## Quick Start\r\n\r\nSince the web application is completely decoupled from the server, you can \r\neasily run it locally and use `api.vpdb.io` as backend.\r\n\r\nYou're going to need to have [Node.js](https://nodejs.org/) and \r\n[git](https://git-scm.com/downloads) installed.\r\n\r\n1. `git clone https://github.com/vpdb/website vpdb-website`\r\n2. `cd vpdb-website`\r\n3. `npm install`\r\n4. `npm run serve:dev:prod`\r\n5. Open `http://localhost:3333` in browser.\r\n\r\n## Stack\r\n\r\nThe VPDB website uses a somewhat modernized stack of AngularJS using ES6 and \r\nWebpack. For markup, [pug](https://pugjs.org/api/getting-started.html) is used \r\nand [Stylus](http://stylus-lang.com/) for the styles.\r\n\r\n## Build Modes\r\n\r\nSince the the website is separated from the server, you can choose any server \r\nto run with. Basically, when running the website, there are two factors:\r\n\r\n1. Which backend to use\r\n2. How to compile\r\n\r\nThere are two compilation options, `prod` and `dev`. The only difference is that\r\n`prod` minimizes and tree-shakes the code, resulting in a smaller bundle but \r\nlonger compilation time. It also installs a service worker for pre-caching.\r\n\r\nThe most common ways to build are:\r\n\r\n| npm script        |                                     | Server           | Minify |\r\n|-------------------|-------------------------------------|------------------|--------|\r\n| `serve:dev:local` | Development using local server      | `localhost:3000` | no     |\r\n| `serve:dev:prod`  | Development using production server | `api.vpdb.io`    | no     |\r\n| `serve:test`      | Automated tests                     | `localhost:7357` | yes    |\r\n| `build:prod`      | Build for production site           | `api.vpdb.io`    | yes    |\r\n| `build:analyze`   | Build and show bundle analysis      | *n/a*            | yes    |\r\n\r\nAll `serve` commands will hot-reload your code while you change files locally. \r\nYou can easily add additional server end-points by creating a new VPDB config \r\nin the `config` folder and set the `CONFIG` environment variable accordingly.\r\n\r\n## Tests\r\n\r\nTests are end-to-end using [Protractor](http://www.protractortest.org) through \r\n[Codeship](https://codeship.com/) and [BrowserStack](https://www.browserstack.com).\r\nTest results of the latest CI run can be seen [here](https://results.vpdb.io/).\r\nFor more info about how tests and CI are set up, check [this](https://github.com/vpdb/website/tree/master/src/test). \r\n\r\nRunning locally you'll need four terminals open.\r\n\r\n- **Server**: Git clone [vpdb/server](https://github.com/vpdb/server) and install \r\n  it according to the instructions. Then run it with `npm run serve:protractor`.\r\n- **Website**: This repo. Run `npm run serve:test` to spawn the web server.\r\n- **Selenium**: The Selenium server running the tests. First time: `npm run selenium:init`, \r\n  then just `npm run selenium`. \r\n- **Test runner**: Finally, execute the tests with `npm run test:local`\r\n\r\nBefore tests, code is linted using [ESLint](https://eslint.org/).\r\n\r\n## Credits\r\n\r\n\u003ca title=\"IntelliJ IDEA\" href=\"https://www.jetbrains.com/idea/\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/vpdb/server/master/assets/intellij-logo-text.svg?sanitize=true\" alt=\"IntelliJ IDEA\" width=\"250\"\u003e\u003c/a\u003e\r\n\r\nThanks to JetBrains for their awesome IDE and support of the Open Source Community!\r\n\r\n\u003ca title=\"Realtime application protection\" href=\"https://www.sqreen.io/?utm_source=badge\"\u003e\u003cimg width=\"150\" src=\"https://s3-eu-west-1.amazonaws.com/sqreen-assets/badges/20171107/sqreen-light-badge.svg\" alt=\"Sqreen | Runtime Application Protection\" /\u003e\u003c/a\u003e\r\n\r\nThen cheers to Sqreen for their excellent security services protecting our host at vpdb.io!\r\n\r\n\u003ca href=\"https://www.browserstack.com\"\u003e\u003cimg width=\"300\" src=\"https://raw.githubusercontent.com/vpdb/website/master/src/test/browserstack-logo.png\"\u003e\u003c/a\u003e\r\n\r\nFinally, huge thanks to BrowserStack for offering free end-to-end testing for this project.\r\n\r\n## License\r\n\r\nGPLv2, see [LICENSE](LICENSE).\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvpdb%2Fwebsite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvpdb%2Fwebsite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvpdb%2Fwebsite/lists"}