{"id":19580553,"url":"https://github.com/ilia-public-projects/metronic8-angular16-ui","last_synced_at":"2026-03-02T08:02:41.971Z","repository":{"id":257207952,"uuid":"857637522","full_name":"ilia-public-projects/metronic8-angular16-ui","owner":"ilia-public-projects","description":"Demo metronic 8 with angular 16 Admin project","archived":false,"fork":false,"pushed_at":"2024-09-15T07:52:31.000Z","size":55085,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-11-20T08:32:50.572Z","etag":null,"topics":["admin-template","angular18","metronic8"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/ilia-public-projects.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}},"created_at":"2024-09-15T07:36:36.000Z","updated_at":"2025-01-08T07:37:04.000Z","dependencies_parsed_at":"2024-09-15T10:17:35.541Z","dependency_job_id":null,"html_url":"https://github.com/ilia-public-projects/metronic8-angular16-ui","commit_stats":null,"previous_names":["ilia-public-projects/metronic8-angular16-ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ilia-public-projects/metronic8-angular16-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilia-public-projects%2Fmetronic8-angular16-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilia-public-projects%2Fmetronic8-angular16-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilia-public-projects%2Fmetronic8-angular16-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilia-public-projects%2Fmetronic8-angular16-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ilia-public-projects","download_url":"https://codeload.github.com/ilia-public-projects/metronic8-angular16-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilia-public-projects%2Fmetronic8-angular16-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29995910,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-02T01:47:34.672Z","status":"online","status_checked_at":"2026-03-02T02:00:07.342Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["admin-template","angular18","metronic8"],"created_at":"2024-11-11T07:27:25.574Z","updated_at":"2026-03-02T08:02:41.945Z","avatar_url":"https://github.com/ilia-public-projects.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Metronic 8 Angular 16 UI\n\n![Angular](https://img.shields.io/badge/Angular-16-red) ![License](https://img.shields.io/badge/license-MIT-green) ![Metronic](https://img.shields.io/badge/Metronic-8-blue)\n\n## Overview\n\nThis is an **Angular 16** UI project that utilizes the **Metronic 8** theme for a modern and responsive user interface. The application includes authentication, user management, user authorization to control permissions, and real-time updates for connected users using **SignalR**.\n\nThis project serves as a base for enterprise-level web applications with a focus on user management, access control, and real-time communication.\n\n---\n\n## Features\n\n- **Angular 16 UI**: Built with the latest version of Angular.\n- **Metronic 8 Theme**: Utilizes Metronic 8, a responsive and customizable theme, to deliver a polished and professional user interface.\n- **Authentication**: Secure login and session management for users.\n- **User Management**: Manage users, create new accounts, and handle account details.\n- **User Authorization**: Manage user roles and permissions to control access to various parts of the application.\n- **SignalR Integration**: Displays a list of connected users and real-time updates on user activity.\n  \n---\n\n## Technology Stack\n\n- **Frontend**:\n  - Angular 16\n  - Metronic 8 Theme\n  - SignalR\n- **Authentication \u0026 Authorization**:\n  - JWT (JSON Web Tokens)\n  - Role-based access control (RBAC)\n- **Real-time Communication**:\n  - SignalR for WebSockets\n\n---\n\n## Installation and Setup\n\n### Prerequisites\n\nEnsure you have the following installed on your system:\n\n- [Node.js](https://nodejs.org/en/) (v16+)\n- [Angular CLI](https://angular.io/cli)\n- A self-signed SSL certificate (details below)\n\n### Steps to Run Locally\n\n1. **Clone the repository**:\n    ```bash\n    git clone https://github.com/ilia-public-projects/metronic8-angular16-ui.git\n    cd metronic8-angular16-ui\n    ```\n\n2. **Install Dependencies**:\n    ```bash\n    npm install\n    ```\n\n3. **Set Up SSL Certificate**:\n    - You need a **self-signed SSL certificate** to enable SSL in the development environment.\n    - Create or obtain a self-signed certificate (e.g., using OpenSSL), and place the `.crt` and `.key` files inside the `/ssl` folder in the project root.\n    - Example command to create a self-signed certificate using OpenSSL:\n      ```bash\n      openssl req -x509 -newkey rsa:4096 -keyout /ssl/key.pem -out /ssl/cert.pem -days 365 -nodes\n      ```\n\n4. **Run the Application**:\n    ```bash\n    npm start\n    ```\n\n    This will run the command `ng serve --ssl=true --configuration development-ssl` using your SSL certificate for the development environment.\n\n5. Open your browser and navigate to `https://localhost:4200`.\n\n---\n\n## SignalR Integration\n\nThis project uses **SignalR** for real-time updates. Users can see connected users in real-time as they log in and log out. This can be extended to display additional live data, such as user activity or notifications.\n\n---\n\n## User Management and Authorization\n\n- **User Management**: Administrators can manage user accounts, including creating, editing, and deleting users.\n- **Authorization**: User roles and permissions are managed through a role-based access control system, allowing fine-grained access control over various sections of the application.\n\n---\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Filia-public-projects%2Fmetronic8-angular16-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Filia-public-projects%2Fmetronic8-angular16-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Filia-public-projects%2Fmetronic8-angular16-ui/lists"}