{"id":26450911,"url":"https://github.com/hasankhadd0ur/ng-dashboard","last_synced_at":"2026-01-31T16:37:27.669Z","repository":{"id":282851295,"uuid":"949591499","full_name":"HasanKhadd0ur/NG-Dashboard","owner":"HasanKhadd0ur","description":"A modular dashboard application built with Angular using Vertical Slice Architecture. It organizes features into self-contained slices, improving maintainability and scalability. The project includes core services, state management, reusable components, and a responsive UI","archived":false,"fork":false,"pushed_at":"2025-03-18T13:25:13.000Z","size":1585,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-12T07:10:01.836Z","etag":null,"topics":["angular"],"latest_commit_sha":null,"homepage":"https://hasankhadd0ur.github.io/NG-Dashboard/","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/HasanKhadd0ur.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,"zenodo":null}},"created_at":"2025-03-16T19:38:24.000Z","updated_at":"2025-04-01T19:08:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"177185d1-0382-4f5d-adaa-66c8f1760d6f","html_url":"https://github.com/HasanKhadd0ur/NG-Dashboard","commit_stats":null,"previous_names":["hasankhadd0ur/ng-dashboard"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/HasanKhadd0ur/NG-Dashboard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HasanKhadd0ur%2FNG-Dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HasanKhadd0ur%2FNG-Dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HasanKhadd0ur%2FNG-Dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HasanKhadd0ur%2FNG-Dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HasanKhadd0ur","download_url":"https://codeload.github.com/HasanKhadd0ur/NG-Dashboard/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HasanKhadd0ur%2FNG-Dashboard/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28947720,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-31T14:26:55.697Z","status":"ssl_error","status_checked_at":"2026-01-31T14:26:52.545Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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"],"created_at":"2025-03-18T16:06:29.175Z","updated_at":"2026-01-31T16:37:27.664Z","avatar_url":"https://github.com/HasanKhadd0ur.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n## **📌 Angular Dashboard Project**  \n\n### **📜 Table of Contents**  \n- [📌 Angular DashboardProject](#-angular-dashboaard-project)  \n- [📜 Table of Contents](#-table-of-contents)  \n- [📦 Project Structure](#-project-structure)  \n- [🛠 Architecture - Vertical Slice](#-architecture---vertical-slice)  \n- [🚀 Getting Started](#-getting-started)  \n- [📌 Available Scripts](#-available-scripts)  \n- [🌍 Deployment](#-deployment)  \n- [📜 License](#-license)  \n\n---\n\n## **📦 Project Structure**  \n```plaintext\n.\n├── dist/                # Production build output\n├── node_modules/        # Dependencies\n├── public/              # Public assets\n├── src/                 # Source code\n│    ├── app/            \n│    │   ├── core/         # Core module (config, services, guards, interceptors, constants)\n│    │   │   ├── config/   # Configuration settings\n│    │   │   ├── services/ # Common services (Auth, Storage, Caching)\n│    │   │   ├── guards/   # Route guards for authentication and authorization\n│    │   │   ├── interceptors/ # HTTP interceptors (e.g., JWT)\n│    │   │   ├── constants/ # Global constants\n│    │   ├── slices/  \n│    │   │   ├── users/    # Users module (services, models, store, views)\n│    │   │   │   ├── models/  \n│    │   │   │   ├── services/ \n│    │   │   │   ├── store/  \n│    │   │   │   ├── components/ \n│    │   │   │   └── views/ # Global constants\n│    │   │   └──...\n│    │   │     \n│    │   ├── shared/       # Shared module (components, directives, pipes)\n│    ├── environments/    # Environment configurations\n│    ├── main.ts          # Main entry point\n│    ├── index.html       # Main HTML file\n│    ├── styles.scss      # Global styles\n│    ├── app.module.ts    # Root module\n│    └── ...              \n├── .editorconfig        # Code formatting rules\n├── .gitignore           # Git ignore rules\n├── angular.json         # Angular CLI configuration\n├── package.json         # Dependencies and scripts\n├── package-lock.json    # Dependency lock file\n├── tsconfig.app.json    # TypeScript app configuration\n├── tsconfig.json        # TypeScript configuration\n├── tsconfig.spec.json   # TypeScript test configuration\n└── README.md            # This file\n```\n---\n\n## **🛠 Architecture - Vertical Slice**  \nThis project follows the **Vertical Slice Architecture**, where each feature (or \"slice\") is structured as a **self-contained unit** rather than being separated into generic layers.  \n\n### **✅ Benefits of Vertical Slice Architecture**  \n- **Encapsulation:** Each slice contains everything needed for that feature (UI, services, state management).  \n- **Scalability:** New features can be added without affecting existing ones.  \n- **Better Code Organization:** Instead of grouping by technical concerns (e.g., all services together), features are grouped together, making them easier to navigate and maintain.  \n\n### **📌 Example - Users Feature**  \nEach feature has its own folder with all related files:\n```plaintext\nslices/\n│── users/              \n│   ├── models/       # User-related TypeScript interfaces/models\n│   ├── services/     # API calls and business logic for users\n│   ├── store/        # NgRx store files for user state management\n│   ├── components/   # UI components specific to users\n│   └── views/        # User pages or views\n```\nThis structure makes it **easier to work on individual features** without affecting the rest of the application.\n\n---\n\n## **🚀 Getting Started**  \n\n### **📥 1. Install Dependencies**  \nMake sure you have **Node.js** and **npm** installed. Then run:  \n```sh\nnpm install\n```\n\n### **🛠️ 2. Start Development Server**  \nTo start the project locally, run:  \n```sh\nnpm start\n```\nThis will start a development server at `http://localhost:4200/`.\n\n---\n\n## **📌 Available Scripts**  \n\n| Command               | Description                                      |\n|-----------------------|--------------------------------------------------|\n| `npm start`          | Runs the app in development mode (`ng serve`)     |\n| `npm run build`      | Builds the app for production (`ng build`)        |\n| `npm run test`       | Runs unit tests (`ng test`)                       |\n| `npm run lint`       | Checks for linting issues (`ng lint`)             |\n\n---\n\n## **🌍 Deployment**  \n\nYou can deploy your Angular project to **GitHub Pages** using the following steps:\n\n### **1. Install Angular CLI GitHub Pages Deploy Package**\n```sh\nnpm install -g angular-cli-ghpages\n```\n\n### **2. Build the Project for Production**\n```sh\nng build --configuration production --base-href \"https://your-username.github.io/your-repo-name/\"\n```\n\n### **3. Deploy to GitHub Pages**\n```sh\nnpx angular-cli-ghpages --dir=dist/your-project-name\n```\nAfter this, your project will be live on:  \n🔗 `https://your-username.github.io/your-repo-name/`\n\n---\n\n## **📜 License**  \nThis project is licensed under the **MIT License**.  ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhasankhadd0ur%2Fng-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhasankhadd0ur%2Fng-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhasankhadd0ur%2Fng-dashboard/lists"}