{"id":21518954,"url":"https://github.com/ameer2000mzori/sliding-puzzle-angular","last_synced_at":"2026-05-12T04:32:16.191Z","repository":{"id":231680274,"uuid":"782416391","full_name":"Ameer2000Mzori/Sliding-Puzzle-Angular","owner":"Ameer2000Mzori","description":"This project is created with Angular, the newest version, and SCSS. I have implemented the newest features like @if and @for, and also used some other features like pipes and reusable components.","archived":false,"fork":false,"pushed_at":"2024-04-07T06:16:20.000Z","size":2304,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-31T04:24:35.701Z","etag":null,"topics":["angular","html","rxjs","scss","sliding-puzzle-game","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/Ameer2000Mzori.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}},"created_at":"2024-04-05T08:58:26.000Z","updated_at":"2024-04-06T22:50:23.000Z","dependencies_parsed_at":"2024-04-05T10:35:46.286Z","dependency_job_id":null,"html_url":"https://github.com/Ameer2000Mzori/Sliding-Puzzle-Angular","commit_stats":null,"previous_names":["ameer2000mzori/sliding-puzzle-angular"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ameer2000Mzori%2FSliding-Puzzle-Angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ameer2000Mzori%2FSliding-Puzzle-Angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ameer2000Mzori%2FSliding-Puzzle-Angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ameer2000Mzori%2FSliding-Puzzle-Angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ameer2000Mzori","download_url":"https://codeload.github.com/Ameer2000Mzori/Sliding-Puzzle-Angular/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244073583,"owners_count":20393846,"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","html","rxjs","scss","sliding-puzzle-game","typescript"],"created_at":"2024-11-24T00:55:33.436Z","updated_at":"2026-05-12T04:32:15.805Z","avatar_url":"https://github.com/Ameer2000Mzori.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- TABLE OF CONTENTS --\u003e\n\n# 📗 Table of Contents\n\n- [📖 About the Project](#about-project)\n  - [🛠 Built With](#built-with)\n    - [Tech Stack](#tech-stack)\n    - [Key Features](#key-features)\n- [👥 Authors](#authors)\n- [🤝 Contributing](#contributing)\n- [⭐️ Show your support](#support)\n- [🙏 Acknowledgements](#acknowledgements)\n- [📩 Support \u0026 Feedback](#support)\n- [📝 License](#license)\n\n\u003c!-- PROJECT DESCRIPTION --\u003e\n\n# 📖 About This Project \u003ca name=\"about-project\"\u003e\u003c/a\u003e\n\n\u003e This project is built using Angular, leveraging the latest version along with SCSS for styling. It incorporates advanced features such as @if and @for directives, along with other functionalities like pipes and reusable components. Designed as part of a job interview challenge, it showcases meticulous styling and organization. The seamless routing ensures smooth navigation between pages without unnecessary page reloads. Utilizing RxJS, the project employs reactive programming akin to React Redux Toolkit, streamlining data management for enhanced code cleanliness and efficiency. Moreover, the implementation of @defer optimizes page loading, embracing lazy loading for improved performance.\n\n# Sample Of Website \u003ca name=\"Sample-Of-Website\"\u003e\u003c/a\u003e\n\n![alt text](./sample/1.png)\n![alt text](./sample/2.png)\n\n# Win Screen \u003ca name=\"Sample-Of-Website\"\u003e\u003c/a\u003e\n\n![alt text](./sample/4.png)\n\n## 🛠 Built With \u003ca name=\"built-with\"\u003e\u003c/a\u003e\n\n### Tech Stack \u003ca name=\"tech-stack\"\u003e\u003c/a\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eClient\u003c/summary\u003e\n  \u003cul\u003e\n  \u003cli\u003e\u003ca href=\"https://en.wikipedia.org/wiki/HTML\"\u003eHtml\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://sass-lang.com/\"\u003escss\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://www.typescriptlang.org/\"\u003eTypeScript\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://angular.io/\"\u003eAngular\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/details\u003e\n\n\u003c!-- Features --\u003e\n\n### Key Features \u003ca name=\"key-features\"\u003e\u003c/a\u003e\n\n- **[HTML ]**\n- **[SCSS ]**\n- **[TYPESCRIPT ]**\n- **[ANGULAR ]**\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- AUTHORS --\u003e\n\n## 👥 Authors \u003ca name=\"authors\"\u003e\u003c/a\u003e\n\n👤 **Author1**\n\n- GitHub: [@Ameer2000Mzori](https://github.com/Ameer2000Mzori)\n- LinkedIn: [Ameer Ameen](https://www.linkedin.com/in/ameer-ameen-82314425b/)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- CONTRIBUTING --\u003e\n\n## 🤝 Contributing \u003ca name=\"contributing\"\u003e\u003c/a\u003e\n\nContributions, issues, and feature requests are welcome! please dont forget to contact ameerapex496@gmail.com\n\nFeel free to check the [issues page](../../issues/).\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- SUPPORT --\u003e\n\n## ⭐️ Show your support \u003ca name=\"support\"\u003e\u003c/a\u003e\n\nIf you like this project, don't hesitate to give it a star 😊.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- ACKNOWLEDGEMENTS --\u003e\n\n## 🙏 Acknowledgments \u003ca name=\"acknowledgements\"\u003e\u003c/a\u003e\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- Support and feedback --\u003e\n\n## 📩 Support \u0026 Feedback \u003ca name=\"support\"\u003e\u003c/a\u003e\n\nIf you have any feedback, please reach out to me at ameerapex496@gmail.com 📨\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- LICENSE --\u003e\n\n## 📝 License \u003ca name=\"license\"\u003e\u003c/a\u003e\n\nThis project is [MIT](./LICENSE) licensed.\n\n_NOTE: we recommend using the [MIT license](https://choosealicense.com/licenses/mit/) - you can set it up quickly by [using templates available on GitHub](https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-license-to-a-repository). You can also use [any other license](https://choosealicense.com/licenses/) if you wish._\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n# ABOUT THIS PROJECT\n\nThis project is built using Angular, leveraging the latest version along with SCSS for styling. It incorporates advanced features such as @if and @for directives, along with other functionalities like pipes and reusable components. Designed as part of a job interview challenge, it showcases meticulous styling and organization. The seamless routing ensures smooth navigation between pages without unnecessary page reloads. Utilizing RxJS, the project employs reactive programming akin to React Redux Toolkit, streamlining data management for enhanced code cleanliness and efficiency. Moreover, the implementation of @defer optimizes page loading, embracing lazy loading for improved performance.\n\n# SlidingPuzzle\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.2.\n\n## Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.\n\n## Code scaffolding\n\nRun `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.\n\n## Build\n\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.\n\n## Running unit tests\n\nRun `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n## Running end-to-end tests\n\nRun `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.\n\n## Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fameer2000mzori%2Fsliding-puzzle-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fameer2000mzori%2Fsliding-puzzle-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fameer2000mzori%2Fsliding-puzzle-angular/lists"}