{"id":18763471,"url":"https://github.com/fabiandev/angular-quiz-app","last_synced_at":"2025-04-09T18:22:14.774Z","repository":{"id":5501724,"uuid":"53311153","full_name":"fabiandev/angular-quiz-app","owner":"fabiandev","description":"A music quiz in Angular 2+ using the Spotify API.","archived":false,"fork":false,"pushed_at":"2022-12-10T17:03:23.000Z","size":1401,"stargazers_count":197,"open_issues_count":17,"forks_count":83,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-04-02T12:36:19.542Z","etag":null,"topics":["angular","heroku","javascript","jspm","music-quiz","spotify-api","typescript","web"],"latest_commit_sha":null,"homepage":"https://fabiandev.io/angular-quiz-app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fabiandev.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}},"created_at":"2016-03-07T09:04:00.000Z","updated_at":"2025-03-12T05:12:59.000Z","dependencies_parsed_at":"2023-01-11T16:59:59.358Z","dependency_job_id":null,"html_url":"https://github.com/fabiandev/angular-quiz-app","commit_stats":null,"previous_names":[],"tags_count":73,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabiandev%2Fangular-quiz-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabiandev%2Fangular-quiz-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabiandev%2Fangular-quiz-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabiandev%2Fangular-quiz-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fabiandev","download_url":"https://codeload.github.com/fabiandev/angular-quiz-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248085694,"owners_count":21045195,"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":["angular","heroku","javascript","jspm","music-quiz","spotify-api","typescript","web"],"created_at":"2024-11-07T18:26:16.288Z","updated_at":"2025-04-09T18:22:14.752Z","avatar_url":"https://github.com/fabiandev.png","language":"TypeScript","readme":"# Angular Music Quiz\n\n# Quickstart\n\n```sh\n$ git clone https://github.com/fabiandev/angular-quiz-app.git\n$ cd angular-quiz-app\n$ npm install\n$ npm start\n```\n\n\u003e Tip: You can use [yarn](https://yarnpkg.com/) instead of [npm](https://npmjs.com).\n\n# Live Example\n\nSee this project in action:\n\n[https://fabiandev.io/angular-quiz-app/](https://fabiandev.io/angular-quiz-app/)\n\n# Credits\n\nThis app uses:\n- [Angular](https://angular.io) as a front-end framework.\n- [Express](https://github.com/expressjs/express) with [spotify-web-api-node](https://github.com/thelinmichael/spotify-web-api-node) for the server.\n- [Spotify API](https://developer.spotify.com/web-api/) for the quiz data.\n- [css-animator](https://github.com/fabiandev/css-animator) and [animate.css](https://daneden.github.io/animate.css/) for animations.\n- [Materialize](http://materializecss.com/) for styling.\n- [Material icons](https://github.com/google/material-design-icons/) and [Icons8 Flat Color Icons](https://github.com/icons8/flat-color-icons) for icons.\n- [iScroll](https://github.com/cubiq/iscroll) for a better mobile scrolling experience.\n\n# Documentation\n\n## CLI\n\n### Dependencies\n\nWe use npm or yarn and jspm (currently `jspm@beta`) to install dependencies.  \nFor simplicity [gulp](http://gulpjs.com) and [jspm](http://jspm.io) can be installed globally, by using the `-g` flag.\n\n```sh\n$ npm install -g gulp jspm@beta\n```\n\n\u003e Make sure that you have [Node.js](https://nodejs.org/) installed, [npm](https://npmjs.com) comes\n\u003e with it. You can check with `node --version`. For faster npm dependency installs, use [yarn](https://yarnpkg.com/).\n\nTo install **development dependencies**, used e.g. in gulp tasks use:\n\n```sh\n$ npm install --save-dev module-name\n```\n\n\u003e or `yarn add module-name --dev`\n\nTo install **application dependencies**, used on the server side use:\n\n```sh\n$ npm install --save module-name\n```\n\n\u003e or `yarn add module-name`\n\nTo install **client side dependencies**, use jspm:\n\n```sh\n$ jspm install modulename \u0026\u0026 npm run update-paths\n```\n\nThe execution of `update-paths` is required to have all jspm package also mapped\nin `compilerOptions.paths` of `tsconfig.json`.\n\n\u003e jspm also supports `install npm:modulename` and `install github:user/repo`\n\n### Typings\n\nTypings are used to tell the [TypeScript](https://www.typescriptlang.org)\ncompiler about definitions. You can install them via npm just like this:\n\n```sh\n$ npm install @types/core-js\n```\n\n### Building\n\n#### Production Build\n\nThe production build should be used to compile the app for **deployment**.\nIt will do it's best to keep the target files as small as possible.\n\n```sh\n$ gulp build\n```\n\n#### Development Build\n\nA development build performs similar tasks as a production build, but makes debugging a lot easier.\n\n```sh\n$ gulp dev-build\n```\n\n#### Watch Changes\n\nDuring development make use of the watch task, which does not need to compile the entire app on each change.\nThe application will be transpiled on demand in the browser.\n\n```sh\n$ gulp watch\n```\n\n\u003e You may also execute `gulp watch-build` to perform those actions only once.\n\n### Local Server\n\nBefore starting the server copy `.env.example` in `/server` and name it `.env`, get\n[Spotify API](https://developer.spotify.com/my-applications/#!/) keys and fill them in.\n\n\u003e NEVER PASTE YOUR KEYS IN THE EXAMPLE FILE OR ANYWHERE ELSE!\n\nTo **start the sever** type:\n\n```sh\n$ npm start\n```\n\n\u003e or `yarn start`\n\n\u003e The server will be started with the `dist` directory as root, and a built version\n\u003e of the app will be used. Make sure to run `gulp build` or `gul dev-build` first.\n\nTo **start a development server** type:\n\n```sh\n$ npm start dev\n```\n\n\u003e or `yarn start dev`\n\n\u003e The server will be started on the very top level of the application code.\n\u003e All files (including dependencies) are transpiled on-demand in the browser.\n\u003e While developing, make sure `gulp watch` is running, to pick up index.html and\n\u003e less-files changes.\n\n### Deployment\n\nThis app supports deployment on Heroku:\n\n```sh\n$ git push heroku master\n```\n\nJust make sure to set the correct Node and npm environment variables:\n\n```sh\nNODE_ENV=production\nNPM_CONFIG_PRODUCTION=false\n```\n\n\u003e The npm production flag must be set to false that we can build the app on Heroku after pushing the repository.\n\nAnd of course you have to add `SPOTIFY_CLIENT_ID` and `SPOTIFY_CLIENT_SECRET` as environment variables.  \n\nOptionally you may also add `NEW_RELIC_LICENSE_KEY` to enable monitoring by [New Relic](https://newrelic.com/).\nIf you do not provide a license key, New Relic simply won't be enabled.\n\n\u003e Tip: If you deploy to Heroku, you can add the [New Relic Add-on](https://elements.heroku.com/addons/newrelic) for free.\n\n## Configuration\n\nThis section covers how to configure the build tasks, the server and\nthe application itself.\n\n### Build Configuration - `config.js`\n\nYou can set some configuration for TypeScript in `tsconfig.json` and in\n`tslint.json`. All other configuration can be found in `config.js`.\n\nPlease take a closer look at the `config.js` file comment's on the configuration\nproperties for more detailed explanations.\n\n#### config.src\n\nType: `String`  \n\nThe folder, where the source files can be found, e.g. `./src` (no trailing slash!).\n\n#### config.dist\n\nType: `String`  \n\nThe folder, where the built app will go to. Again, do not use a trailing slash.\n\n\u003e *dist* is short for *distribution*.\n\n#### config.watch\n\nType: `String|Array\u003cString\u003e`\n\nDefine which files should or shouldn't be watched, when using `gulp watch`.\nYou can use the [globbing pattern](https://www.npmjs.com/package/minimatch) here.\n\n#### config.jspm\n\nType: `Object`  \n\nThis configuration holds the command, that will be executed later via gulp when building the application.\nYou can type `jspm` in the command line to see all available options.\n\njspm internally uses the [SystemJS](https://github.com/systemjs/systemjs) [builder](https://github.com/systemjs/builder).\n\n#### config.less\n\nType: `Object`  \n\nConfigure the [less](http://lesscss.org) gulp task, to create CSS files\nfrom LESS files.\n\n#### config.tslint\n\nType: `Object`\n\nDefine a globbing pattern, which TypeScript files to lint for errors.\n\n#### config.index\n\nType: `String`  \n\nDefine the index file for the application.\n\n#### config.assets\n\nType: `Object`  \n\nFiles to copy without further processing.\n\n\n#### config.copy\n\nType: `Array\u003cObject\u003e`  \n\nFiles to copy into a desired location, but only preserve the path from the set `base`.\n\n### Server Configuration - `server/index.js`\n\nYou can set environment variables in `server/.env` (not included in this repo).\nCopy `server/.env.example` and rename it to `.env`.  \n\nOther options are set in `server/config/app.js` for a production server, or\n`/server.config/app.dev.js` for a development server.\n\n### Application Configuration\n\nNote, that the index.html is **not** inside the `src`, but on the very top level\nof the application code.\n\n\u003e The `index.html` is processed by\n\u003e [gulp-preprocess](https://github.com/jas/gulp-preprocess).  \n\nFor the dev server or a dev build, `src/js/main.dev.ts`\nwill be used. For a production build, `src/js/main.prod.ts` is the entry point of the app.\n\n## Extending\n\nIt is possible to add questions and answers to this app, by performing a few steps discussed by examples below.\n\n### Answers\n\nTo add a custom answer `yesno`, create a directory `yesno` in `src/js/components/quiz/answers`, containing the following files:\n\n- `answer-yesno.component.ts`\n- `answer-yesno.html`\n- `answer-yesno.css` (optional)\n- `index.ts`\n\n```ts\n// answer-yesno.component.ts\n\nimport { Component } from '@angular/core';\nimport { GenericAnswer } from 'app/components';\n\nimport template from './answer-yesno.html';\nimport mainStyle from './answer-yesno.css';\nimport commonStyle from '../common.css';\n\n@Component({\n  selector: 'answer-yesno',\n  template: template,\n  styles: [\n    commonStyle,\n    mainStyle\n  ]\n})\nexport class AnswerYesNoComponent extends GenericAnswer {\n\n  protected init(): void {\n    \n  }\n\n}\n```\n\n```html\n\u003c!-- answer-yesno.html --\u003e\n\n\u003cdiv class=\"row answers\"\u003e\n  \u003cdiv class=\"col l6 m12 s12\"\u003e\n    \u003cinput #checkYes id=\"answer{{question.id}}_yes\" type=\"checkbox\" (change)=\"answerChanged(checkYes.checked ? 'yes' : null)\" [disabled]=\"!checkYes.checked \u0026\u0026 hasAnswer()\"\u003e\n    \u003clabel htmlFor=\"answer{{question.id}}_yes\" class=\"grey-text text-darken-3\"\u003eYes\u003c/label\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"col l6 m12 s12\"\u003e\n    \u003cinput #checkNo id=\"answer{{question.id}}_no\" type=\"checkbox\" (change)=\"answerChanged(checkNo.checked ? 'no' : null)\" [disabled]=\"!checkNo.checked \u0026\u0026 hasAnswer()\"\u003e\n    \u003clabel htmlFor=\"answer{{question.id}}_no\" class=\"grey-text text-darken-3\"\u003eNo\u003c/label\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n```ts\n// index.ts\nexport * from './answer-yesno.component';\n```\n\nFinally add an export to `src/js/components/quiz/answers/answers.ts`:\n\n```ts\nexport * from './yesno/index';\n```\n\n### Questions\n\nTo add a new question type `simple`, define it in `src/js/components/quiz/questions/types.ts`:\n\n```ts\nexport enum QuestionType {\n  // ...\n  Simple,\n  // ...\n}\n```\n\nAlso create a directory `simple` in `src/js/components/quiz/questions`, containing the following files:\n\n- `question-simple.component.ts`\n- `question-simple.html`\n- `question-simple.css` (optional)\n- `index.ts`\n\n```ts\n// question-simple.component.ts\n\nimport { Component } from '@angular/core';\nimport { GenericQuestion, QuestionType } from 'app/components';\n\nimport template from './question-simple.html';\nimport mainStyle from './question-simple.css';\nimport commonStyle from '../common.css';\n\n@Component({\n  selector: 'question-simple',\n  template: template,\n  styles: [\n    commonStyle,\n    mainStyle\n  ]\n})\nexport class QuestionSimpleComponent extends GenericQuestion {\n\n  public static type = QuestionType.Simple;\n\n  public init(): void {\n    this.setTitle('Do you like this quiz?');\n    this.setCorrectAnswer('yes');\n  }\n\n}\n```\n\n```html\n\u003c!-- question-simple.html --\u003e\n\n\u003cdiv class=\"col s12 m8 offset-m2 l6 offset-l3\"\u003e\n  \u003cdiv class=\"card-panel grey lighten-5 z-depth-1\"\u003e\n    \u003cdiv class=\"row valign-wrapper\"\u003e\n      \u003cdiv class=\"col s2\"\u003e\n        \u003ci class=\"material-icons circle green white-text\"\u003esentiment_satisfied\u003c/i\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"col s10 truncate\"\u003e\n        {{ question.title }}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- Using the previously created answer type --\u003e\n\u003canswer-yesno [question]=\"question\" (onAnswerChange)=\"answerChanged($event)\"\u003e\n\n\u003c!-- It is possible to omit the following, but it gives you\nthe ability to add a custom icon, image, or anything else\nto the status overview --\u003e\n\u003cng-template #statusTemplate\u003e\n  \u003ci class=\"material-icons circle green white-text\"\u003esentiment_satisfied\u003c/i\u003e\n\u003c/ng-template\u003e\n\n```\n\n```ts\n// index.ts\nexport * from './question-simple.component';\n```\n\nFinally add an export to `src/js/components/quiz/questions/questions.ts`:\n\n```ts\nexport * from './simple/index';\n```\n\n### This is it\n\nThe application will automatically consider the added question and will use it randomly.\n\n\u003e Try it! You can copy-paste the code above.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffabiandev%2Fangular-quiz-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffabiandev%2Fangular-quiz-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffabiandev%2Fangular-quiz-app/lists"}