{"id":50720180,"url":"https://github.com/4ssh1/url-shortener","last_synced_at":"2026-06-09T23:01:57.421Z","repository":{"id":361609413,"uuid":"1247888173","full_name":"4ssh1/url-shortener","owner":"4ssh1","description":"An Angular frontend for a custom URL shortener and analytics dashboard. This application handles secure authentication, real-time traffic metrics. It is designed to interface directly with a dedicated Node.js REST API","archived":false,"fork":false,"pushed_at":"2026-05-31T13:58:06.000Z","size":347,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-05-31T14:14:42.081Z","etag":null,"topics":["analytics-dashboard","angular","angular-signals","rxjs","scss","state-management","typescript","url-shortener"],"latest_commit_sha":null,"homepage":"https://sna-p-it.vercel.app/","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/4ssh1.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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-23T23:12:23.000Z","updated_at":"2026-05-31T13:58:09.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/4ssh1/url-shortener","commit_stats":null,"previous_names":["4ssh1/url-shortener"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/4ssh1/url-shortener","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4ssh1%2Furl-shortener","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4ssh1%2Furl-shortener/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4ssh1%2Furl-shortener/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4ssh1%2Furl-shortener/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/4ssh1","download_url":"https://codeload.github.com/4ssh1/url-shortener/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4ssh1%2Furl-shortener/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34129072,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"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":["analytics-dashboard","angular","angular-signals","rxjs","scss","state-management","typescript","url-shortener"],"created_at":"2026-06-09T23:01:56.685Z","updated_at":"2026-06-09T23:01:57.412Z","avatar_url":"https://github.com/4ssh1.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Link Shortener Frontend Architecture\n\n![Angular](https://img.shields.io/badge/Angular-DD0031?style=for-the-badge\u0026logo=angular\u0026logoColor=white)\n![RxJS](https://img.shields.io/badge/RxJS-B7178C?style=for-the-badge\u0026logo=reactivex\u0026logoColor=white)\n![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)\n![Sass](https://img.shields.io/badge/Sass-CC6699?style=for-the-badge\u0026logo=sass\u0026logoColor=white)\n---\n\n\u003cimg width=\"1170\" height=\"673\" alt=\"image\" src=\"https://github.com/user-attachments/assets/689d61cb-3823-418c-9fb4-880e70620dcf\" /\u003e\n\n\n## Technical Breakdown\n\nThe application is built on a unidirectional data flow model leveraging **Angular Signals** for state management and **RxJS** for asynchronous network operations.\n\n**Backend repo: https://github.com/4ssh1/url-shortener-api**\n\n* **State Management:** Local component state and global service state rely on Angular Signals (`signal`, `computed`). This eliminates memory leaks associated with unhandled subscriptions and forces synchronous DOM updates.\n* **Network Layer:** `HttpClient` wraps all API requests in RxJS Observables. Responses are piped through `tap` operators to mutate Signal state before resolving.\n* **Routing Security:** Route access is strictly evaluated at the navigation phase using functional Angular Route Guards (`canActivate`).\n\n---\n\n## Application Data Lifecycle\n\nThe following chart illustrates the standard execution flow from a user action to a DOM update.\n\n```mermaid\ngraph TD\n    A[User Interaction / Route Request] --\u003e B{Route Guards}\n    B --\u003e|authGuard| C[Protected View Initialization]\n    B --\u003e|guestGuard| D[Public View Initialization]\n    C --\u003e E[Service Layer Triggered]\n    D --\u003e E\n    E --\u003e F[HttpClient RxJS Stream]\n    F --\u003e|Success Response| G[Signal State Mutation]\n    F --\u003e|Error Response| H[Error Signal Mutation]\n    G --\u003e I[Angular Change Detection]\n    H --\u003e I\n    I --\u003e J[DOM Synchronized]\n```\n\n## The Exemption: Anonymous Trial\nThe system includes a strict bypass for unregistered users. This operates outside the standard authentication lifecycle.\n\n**💡 Core Logic: Guest users interact with a dedicated `/try` service that bypasses the authGuard.**\n\n- Limitation Enforcements\nTo prevent abuse, limitations are enforced at two distinct levels:\n\n- Client-Side Check: The frontend sets a localStorage marker upon successful creation. Subsequent requests are blocked at the component level.\n\n- Server-Side Check: The API enforces a strict IP-based Time-To-Live (TTL) limit. If the client clears their local storage to bypass the UI block, the network request is still intercepted and rejected by the backend with a 403 Forbidden status.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F4ssh1%2Furl-shortener","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F4ssh1%2Furl-shortener","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F4ssh1%2Furl-shortener/lists"}