{"id":18614807,"url":"https://github.com/andrewjbateman/angular-rxjs-api","last_synced_at":"2026-04-05T08:33:42.779Z","repository":{"id":96858925,"uuid":"354931649","full_name":"AndrewJBateman/angular-rxjs-api","owner":"AndrewJBateman","description":":clipboard: Angular app to fetch Wikipedia API data and display it on cards using asynchronous reactive programming observables","archived":false,"fork":false,"pushed_at":"2023-06-12T09:49:56.000Z","size":1883,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-05T17:03:27.420Z","etag":null,"topics":["angular","angular16","api-rest","html5","javascript","json-api","rxjs","scss","tailwindcss","tailwindcss-v3","typescript","typescript4","wikipedia"],"latest_commit_sha":null,"homepage":"https://andrewjbateman.github.io/angular-rxjs-api/","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/AndrewJBateman.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":"2021-04-05T18:25:42.000Z","updated_at":"2023-06-12T09:52:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"4fcd48cd-5960-4d2b-8dd0-8a3cd6045031","html_url":"https://github.com/AndrewJBateman/angular-rxjs-api","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AndrewJBateman/angular-rxjs-api","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-rxjs-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-rxjs-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-rxjs-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-rxjs-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndrewJBateman","download_url":"https://codeload.github.com/AndrewJBateman/angular-rxjs-api/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-rxjs-api/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31430009,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T08:13:15.228Z","status":"ssl_error","status_checked_at":"2026-04-05T08:13:11.839Z","response_time":75,"last_error":"SSL_read: 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","angular16","api-rest","html5","javascript","json-api","rxjs","scss","tailwindcss","tailwindcss-v3","typescript","typescript4","wikipedia"],"created_at":"2024-11-07T03:27:05.135Z","updated_at":"2026-04-05T08:33:42.751Z","avatar_url":"https://github.com/AndrewJBateman.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# :zap: Angular RxJS API\n\n* Angular app to fetch Wikipedia API data and display it on cards using asynchronous reactive programming observables\n* Tailwind styling used for search form and search results cards\n* **Note:** to open web links in a new window use: _ctrl+click on link_\n\n![GitHub repo size](https://img.shields.io/github/repo-size/AndrewJBateman/angular-rxjs-api?style=plastic)\n![GitHub pull requests](https://img.shields.io/github/issues-pr/AndrewJBateman/angular-rxjs-api?style=plastic)\n![GitHub Repo stars](https://img.shields.io/github/stars/AndrewJBateman/angular-rxjs-api?style=plastic)\n![GitHub last commit](https://img.shields.io/github/last-commit/AndrewJBateman/angular-rxjs-api?style=plastic)\n\n## :page_facing_up: Table of contents\n\n* [:zap: Angular RxJS API](#zap-angular-rxjs-api)\n  * [:page\\_facing\\_up: Table of contents](#page_facing_up-table-of-contents)\n  * [:books: General info](#books-general-info)\n  * [:camera: Screenshots](#camera-screenshots)\n  * [:signal\\_strength: Technologies](#signal_strength-technologies)\n  * [:floppy\\_disk: Setup](#floppy_disk-setup)\n  * [:wrench: Testing](#wrench-testing)\n  * [:computer: Code Examples](#computer-code-examples)\n  * [:cool: Features](#cool-features)\n  * [:clipboard: Status, Testing \\\u0026 To-Do List](#clipboard-status-testing--to-do-list)\n  * [:clap: Inspiration](#clap-inspiration)\n  * [:file\\_folder: License](#file_folder-license)\n  * [:envelope: Contact](#envelope-contact)\n\n## :books: General info\n\n* Displays Wikipedia API JSON search data\n* Wikipedia API does not require an API key\n* [RxJS pluck operator](https://www.learnrxjs.io/learn-rxjs/operators/transformation/pluck) used\n\n## :camera: Screenshots\n\n![screenshot](./img/searchpanel.png)\n\n## :signal_strength: Technologies\n\n* [Angular v16](https://angular.io/) Javascript framework\n* [Rxjs v7](https://rxjs.dev/) Reactive Extensions Library for JavaScript\n* [Tailwind CSS v3](https://tailwindcss.com/) styling, minimises build bundle size\n* [Wikipedia API](https://www.mediawiki.org/wiki/API:Tutorial)\n\n## :floppy_disk: Setup\n\n* Install dependencies using `npm i`\n* Run `ng serve` for a dev server. Frontend will open at `http://localhost:4200/` - refreshes on code changes\n* Run `npm run build` to create build folder\n\n## :wrench: Testing\n\n* Run `ng test` to run Jasmine unit tests via [Karma](https://karma-runner.github.io). Testing not set up\n\n## :computer: Code Examples\n\n* Article card using Tailwind CSS styling and data-binding of search results\n\n```typescript\n\u003carticle class=\"flex flex-wrap max-w-xl mx-auto shadow-lg md:flex-nowrap\"\u003e\n  \u003cdiv class=\"p-4 my-auto\"\u003e\n    \u003ch1 class=\"text-2xl font-semibold text-gray-800\"\u003e{{ article.title }}\u003c/h1\u003e\n    \u003cp class=\"mt-2 text-base text-gray-600\" [innerHTML]=\"article.snippet\"\u003e\n    \u003c/p\u003e\n  \u003c/div\u003e\n\u003c/article\u003e\n```\n\n## :cool: Features\n\n* Small build bundle size due to Tailwind styles (288kB)\n\n## :clipboard: Status, Testing \u0026 To-Do List\n\n* Status: Working. Deployed to Github pages\n* To-Do: Optional nav-bar and about/contact pages\n\n## :clap: Inspiration\n\n* [How to Structure Angular Apps in 2021](https://javascript.plainenglish.io/how-to-structure-angular-apps-in-2021-a0bdd481ad0d)\n* [How do I display HTML inside an Angular binding?](https://blog.briebug.com/blog/how-do-i-display-html-inside-an-angular-binding)\n* [dev.to: Setup TailwindCSS in Angular the easy way](https://dev.to/angular/setup-tailwindcss-in-angular-the-easy-way-1i5l)\n\n## :file_folder: License\n\n* This project is licensed under the terms of the MIT license.\n\n## :envelope: Contact\n\n* Repo created by [ABateman](https://github.com/AndrewJBateman), email: `gomezbateman@gmail.com`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fangular-rxjs-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewjbateman%2Fangular-rxjs-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fangular-rxjs-api/lists"}