{"id":17838259,"url":"https://github.com/marcelcoding/frontend-prod","last_synced_at":"2026-01-11T03:59:51.146Z","repository":{"id":103353049,"uuid":"459190478","full_name":"MarcelCoding/frontend-prod","owner":"MarcelCoding","description":"Cryptic Frontend on play2.cryptic-game.net","archived":false,"fork":false,"pushed_at":"2021-09-01T14:30:32.000Z","size":25778,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-02-08T04:46:48.899Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MarcelCoding.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"patreon":"themorpheus"}},"created_at":"2022-02-14T14:15:50.000Z","updated_at":"2021-09-01T14:31:14.000Z","dependencies_parsed_at":"2023-07-07T21:01:28.554Z","dependency_job_id":null,"html_url":"https://github.com/MarcelCoding/frontend-prod","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarcelCoding%2Ffrontend-prod","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarcelCoding%2Ffrontend-prod/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarcelCoding%2Ffrontend-prod/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarcelCoding%2Ffrontend-prod/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MarcelCoding","download_url":"https://codeload.github.com/MarcelCoding/frontend-prod/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246827758,"owners_count":20840464,"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-10-27T20:54:55.771Z","updated_at":"2026-01-11T03:59:51.123Z","avatar_url":"https://github.com/MarcelCoding.png","language":null,"readme":"# official frontend\n\n[![Build Status](https://travis-ci.org/cryptic-game/frontend.svg?branch=master)](https://travis-ci.org/cryptic-game/frontend)\n\nThis is the official frontend of Cryptic.  \nhttps://play.cryptic-game.net/\n\n# Advice for Developers\n\nThis web application is created with the **Angular** framework. The Framework uses the languages _TypeScript_ (JavaScript with typing), _HTML_ and _SCSS_. A fundamental understanding of these languages is important to understand the code. _SCSS_ or [_Sass_](http://sass-lang.com/guide) is a CSS preprocessor. You can find a tutorial [here](https://www.toptal.com/sass/theming-scss-tutorial).\n\nThe framework also uses a **CLI** (_Comand Line Interface_). It helps creating and managing Angular projects fast.\n\n## Editor\n\nThe project of course works with any editor, but we recommend the editor [VSCode](https://code.visualstudio.com) by Microsoft. Visual Studio Code also has a build-in debugger and a helpful _git_ support.\n\n## Setting up an Development Environment\n\nFor compiling and starting of the application **NodeJS** and **NPM** are needed. Downloads and installation advice can be found on [https://nodejs.org/de/](https://nodejs.org/de/).\n\n### With VSCode\n\nAfter the installation of _Node_ an _NPM_ open the repository in VSCode. Press _Ctrl+Shift+P / CMD+Shift+P_ to open the command palette. Type `Task: Run Task` to enter task mode. The task `install` installs all dependencies needed.\n\n**!** On Unix-based systems such as Linux or OS X you have to type in your password.\n\nAfter this you can execute the task `run`. It starts an development server listening on [http://localhost:4200](http://localhost:4200).\n\n### With the CLI\n\nAfter the installation process open the repository in the terminal and run `npm install`. Make yourself a coffee, because this process can take a bit time.\n\nTo start a development server on [http://localhost:4200](http://localhost:4200) run `ng serve`. This is also possible with `npm start`.\n\n## VSCode\n\n### Tasks\n\nVisual Studio Code offers the possibility to create tasks. Tasks can be very helpful to manage big projects without a _CLI_. Tasks can be executed via the command palette (open with _Ctrl+Shift+P / CMD+Shift+P_).\n\n**!** [A task tutorial](https://code.visualstudio.com/Docs/editor/tasks)\n\n#### Build\n\nThe task `build` compiles and builds the whole project. The result will be stored in `dist/`.\n\n#### Testing\n\nVia the task `test` code can be tested with [Karma](https://karma-runner.github.io).\n\n#### End-to-End Testing\n\nEnd-to-end tests can be made with `e2e` and [Protractor](http://www.protractortest.org/).\n\n### Debugging\n\nVSCode comes with a build-in [debugger](https://code.visualstudio.com/Docs/editor/debugging). It's already configured. The only thing you have to do is running the taks `run`, switching to the debug section and starting `Run`.\n\n**!** For the debugger the extension _Debugger for Chrome_ must be installed.\n\n## The Angular CLI\n\nThe Angualar CLI helps you managing Angular projects.\n\n### Generating Components\n\nThe command `ng generate component component-name` (short: `ng g c component-name`) creates a new Component. Details can be found in the Angular documentation.\n\n### Build\n\n`ng build` compiles and builds the whole project. The result will be stored in `dist/`. For production mode use the `--prod` argument.\n\n### Testing\n\nVia `ng test` code can be tested with [Karma](https://karma-runner.github.io).\n\n### End-to-End Testing\n\nEnd-to-end tests can be made with `ng e2e` and [Protractor](http://www.protractortest.org/).\n\n## Appendix\n\n### Advice for browser compatibility\n\nEvery contributor should test his code minimum with one WebKit browser, such as Chrome, Chromium, Safari and Opera, and a non-WebKit browser, such as Firefox, Internet Explorer or Edge.\n\nBefore you use very new or old things in your code it's recommendet to use \"[Can I use](https://caniuse.com/)\". With this tool you can test the compatibility of your code.\n\n[CSS tricks](https://css-tricks.com) delivers tipps for CSS/SCSS (e.g. centering, flex-box, grid etc.).\n\n### Further help\n\nThe [Angular documentation](https://angular.io/docs) is very helpful. `ng --help` or the [Angular CLI documentation](https://github.com/angular/angular-cli/wiki) can help with the _CLI_\n\n### Docker-Hub\nThis frontend is online on docker-hub (https://hub.docker.com/r/crypticcp/frontend/).\n","funding_links":["https://patreon.com/themorpheus"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcelcoding%2Ffrontend-prod","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcelcoding%2Ffrontend-prod","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcelcoding%2Ffrontend-prod/lists"}