{"id":48481183,"url":"https://github.com/iamernesto14/api-master","last_synced_at":"2026-04-07T08:07:26.276Z","repository":{"id":299655015,"uuid":"1002952807","full_name":"iamernesto14/api-master","owner":"iamernesto14","description":"Angular API Master is an Angular application designed to demonstrate proficiency in API integration, authentication, error handling, pagination, caching, input validation, and environment configuration. The application allows you to manage blog posts.","archived":false,"fork":false,"pushed_at":"2025-06-21T17:56:22.000Z","size":236,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-01T07:14:25.113Z","etag":null,"topics":["angular","api","jasmine-tests"],"latest_commit_sha":null,"homepage":"https://stunning-centaur-ecb915.netlify.app/","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/iamernesto14.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-06-16T11:53:55.000Z","updated_at":"2025-06-21T17:56:25.000Z","dependencies_parsed_at":"2025-07-14T01:55:08.850Z","dependency_job_id":"7f3ae0c5-caaa-4988-974c-a34b401e2de9","html_url":"https://github.com/iamernesto14/api-master","commit_stats":null,"previous_names":["iamernesto14/api-master","iamernesto14-frontend/api-master"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/iamernesto14/api-master","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamernesto14%2Fapi-master","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamernesto14%2Fapi-master/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamernesto14%2Fapi-master/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamernesto14%2Fapi-master/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iamernesto14","download_url":"https://codeload.github.com/iamernesto14/api-master/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamernesto14%2Fapi-master/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31504899,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T03:10:19.677Z","status":"ssl_error","status_checked_at":"2026-04-07T03:10:13.982Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5: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","api","jasmine-tests"],"created_at":"2026-04-07T08:07:26.165Z","updated_at":"2026-04-07T08:07:26.258Z","avatar_url":"https://github.com/iamernesto14.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular API Master\n\n## Project Description\nAngular API Master is an Angular application designed to demonstrate proficiency in API integration, authentication, error handling, pagination, caching, input validation, and environment configuration. The application interacts with the JSONPlaceholder API to manage blog posts, allowing users to view, create, edit, and comment on posts. Key features include token-based authentication, reactive forms with custom validation, a reusable pagination component, and a caching mechanism for optimized API calls. The project adheres to Angular best practices, utilizing standalone components, Signals for state management, and SCSS for consistent styling.\n\n## Setup and Run Instructions\n1. **Clone the Repository**:\n   ```bash\n   git clone https://github.com/iamernesto14/api-master.git\n   ```\n2. **Navigate to the Project Directory**:\n   ```bash\n   cd angular-api-master\n   ```\n3. **Install Dependencies**:\n   ```bash\n   npm install\n   ```\n4. **Run the Development Server**:\n   ```bash\n   ng serve\n   ```\n5. **Open the Application**:\n   - Navigate to `http://localhost:4200` in your browser.\n   - Log in with mock credentials (e.g., username: `user`, password: `pass`) to access protected routes.\n\n## Available npm Scripts\n- **`ng serve`**:\n  - Runs `ng serve` to start the development server at `http://localhost:4200` with live reloading.\n- **`ng build`**:\n  - Builds the project for development, outputting to the `dist/` folder.\n- **`ng build:prod`**:\n  - Builds the project for production with optimizations (e.g., minification, AOT compilation).\n- **`ng build:staging`**:\n  - Builds the project for staging with specific environment configurations.\n- **`ng test`**:\n  - Runs unit tests using Karma and Jasmine, generating coverage reports.\n\n## Project Structure and Key Features\n### Project Structure\n```\nsrc/\n├── app/\n│   ├── components/\n│   │   ├── create-post/          \n│   │   ├── edit-post/             \n│   │   ├── login/                 \n│   │   ├── pagination/            \n│   │   ├── posts-list/            \n│   │   └── single-post/           \n│   ├── guards/\n│   │   └── auth-guard.ts         \n│   ├── models/\n│   │   ├── api-error.ts          \n│   │   ├── api-response.ts      \n│   │   ├── comment.ts             \n│   │   ├── post.ts                \n│   │   └── user.ts               \n│   ├── services/\n│   │   ├── api.ts                \n│   │   ├── auth.ts               \n│   │   ├── error-handler.ts       \n│   │   ├── post-validator.ts      \n│   │   └── post.ts               \n│   ├── app.config.ts             \n│   ├── app.routes.ts             \n│   └── app.ts                     \n├── environments/\n│   ├── environment.prod.ts        \n│   ├── environment.staging.ts     \n│   └── environment.ts             \n├── styles/\n│   ├── _variables.scss            \n│   ├── mixins.scss               \n│   └── app.scss                   \n├── assets/                        \n└── index.html                     \n```\n\n### Key Features\n- **API Integration**:\n  - Interacts with JSONPlaceholder API for GET (`posts`, `post`, `comments`), POST (`createPost`), PUT (`updatePost`), and DELETE (`deletePost`) operations.\n  - Uses `ApiService` for HTTP requests and `PostService` for state management with Signals.\n- **Authentication**:\n  - Simulates token-based authentication with `AuthService`, storing mock JWTs in `localStorage`.\n  - `AuthInterceptor` adds `Authorization` headers and handles 401 errors.\n  - `AuthGuard` protects routes (`/`, `/post/:id`, `/create-post`, `/edit-post/:id`).\n- **Error Handling**:\n  - `ErrorHandlerService` provides centralized error handling with retry logic and user-friendly messages.\n  - Displays errors via toasts (`ngx-toastr`) and component-level messages.\n- **Pagination**:\n  - `PaginationComponent` supports paginated post lists using query parameters (`_page`, `_limit`).\n  - Integrated with `PostService` and `ApiService` for dynamic page navigation.\n- **Caching**:\n  - `ApiService` caches GET requests for 5 minutes, with `clearCache()` for invalidation on create/update/delete.\n- **Input Validation**:\n  - Reactive forms in `CreatePostComponent` and `EditPostComponent` use built-in validators (`required`, `minLength`) and custom `noProfanityOrUnsafe` validator from `PostValidatorService`.\n  - Sanitizes inputs with `DomSanitizer`.\n- **Local Persistence**:\n  - Persists locally created and updated posts in `localStorage` (`localPosts`) to handle JSONPlaceholder’s read-only nature.\n- **Styling**:\n  - Uses SCSS with `_variables.scss` for consistent colors/typography and `mixins.scss` for reusable button/card styles.\n- **Environment Configuration**:\n  - Supports development, staging, and production environments with different API URLs (`environment.ts`, `environment.staging.ts`, `environment.prod.ts`).\n- **Testing**:\n  - Includes unit tests for `ApiService`, `AuthInterceptor`, and `EditPostComponent` using Jasmine and Karma.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamernesto14%2Fapi-master","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiamernesto14%2Fapi-master","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamernesto14%2Fapi-master/lists"}