{"id":18614759,"url":"https://github.com/andrewjbateman/angular-tailwind-unsplash","last_synced_at":"2025-04-11T00:30:52.011Z","repository":{"id":49553142,"uuid":"321136420","full_name":"AndrewJBateman/angular-tailwind-unsplash","owner":"AndrewJBateman","description":":clipboard: Angular app to get random images from the Unsplash API","archived":false,"fork":false,"pushed_at":"2024-01-12T14:54:36.000Z","size":10448,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-25T06:51:12.875Z","etag":null,"topics":["angular","angular17","eslint","prettier-eslint","purge-css","pwa","rxjs","rxjs7","tailwind","unsplash-api"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","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":"LICENSE","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":"2020-12-13T18:50:48.000Z","updated_at":"2023-11-10T11:21:34.000Z","dependencies_parsed_at":"2024-01-12T18:43:18.532Z","dependency_job_id":null,"html_url":"https://github.com/AndrewJBateman/angular-tailwind-unsplash","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-tailwind-unsplash","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-tailwind-unsplash/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-tailwind-unsplash/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-tailwind-unsplash/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndrewJBateman","download_url":"https://codeload.github.com/AndrewJBateman/angular-tailwind-unsplash/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248322228,"owners_count":21084333,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","angular17","eslint","prettier-eslint","purge-css","pwa","rxjs","rxjs7","tailwind","unsplash-api"],"created_at":"2024-11-07T03:26:54.540Z","updated_at":"2025-04-11T00:30:49.592Z","avatar_url":"https://github.com/AndrewJBateman.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# :zap: Angular Tailwind Unsplash\n\n* Angular app using [TailwindCSS](https://developers.google.com/chart/) components to display images from the [Unsplash Images API](https://unsplash.com/developer)\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-tailwind-unsplash?style=plastic)\n![GitHub pull requests](https://img.shields.io/github/issues-pr/AndrewJBateman/angular-tailwind-unsplash?style=plastic)\n![GitHub Repo stars](https://img.shields.io/github/stars/AndrewJBateman/angular-tailwind-unsplash?style=plastic)\n![GitHub last commit](https://img.shields.io/github/last-commit/AndrewJBateman/angular-tailwind-unsplash?style=plastic)\n\n## :page_facing_up: Table of contents\n\n* [:zap: Angular Tailwind Unsplash](#zap-angular-tailwind-unsplash)\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 \\\u0026 To-Do List](#clipboard-status--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* About and Contact pages give more information on app using Tailwind CSS cards\n* To build for production Tailwind’s purge option is used to tree-shake unused styles and optimize final build size.\n* [RxJS take(1) operater](https://advancedweb.hu/rxjs-the-differences-between-first-take-1-and-single/) used to take first element from the Unsplash \u0026 Github observable streams then close them, so unsubscribing is not necessary.\n* The Github basic user info API does not require an API key. The Unsplash API does.\n* [Angular HttpClient](https://angular.io/api/common/http/HttpClient) GET request response overloads 1 to 15 carefully considered, especially http header 'observe' and 'responseType', to ensure correct response type from photo service which returns type `Observable\u003cArrayBuffer\u003e` when the Home page function `onChangePhoto()` is expecting interface type `Observable\u003cIUnsplashResponse\u003e`\n\n## :camera: Screenshots\n\n| ![Angular page](./img/home.png) | ![Angular page](./img/about.png) | ![Angular page](./img/contact.png) |\n| :-----------------------------: | :------------------------------: | :--------------------------------: |\n|              Home               |              About               |              Contact               |\n\n![Angular page](./img/lighthouse-home.jpg)\n![Angular page](./img/lighthouse-about.jpg)\n![Angular page](./img/lighthouse-contact.jpg)\n\n## :signal_strength: Technologies\n\n* [Angular framework v17](https://angular.io/)\n* [Angular PWA v17](https://angular.io/guide/service-worker-getting-started) - app uses service workers so app will stay up if there is a loss of network - all necessary files are cached, including index.html, icons etc.\n* [Angular async pipes](https://angular.io/api/common/AsyncPipe) used with Unsplash asynchronous Observable objects\n* [Reactive Extensions Library for Javascript RxJS v7](https://rxjs.dev/)\n* [TailwindCSS v3](https://tailwindcss.com/) CSS framework\n* [http-server v14](https://www.npmjs.com/package/http-server) command-line HTTP server to view the PWA\n* [Netlify CLI](https://www.npmjs.com/package/netlify-cli) to deploy app on Netlify\n\n## :floppy_disk: Setup\n\n* Run `npm i` to install dependencies.\n* Get yourself an [Unsplash Login \u0026 API Key](https://unsplash.com/developers).\n* Add API key to the `environments.ts` file\n* Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n* Run `npm run build` for a production build with CSS purging.\n* Run `npm run lint` to lint all files and fix where possible\n* The build artifacts will be stored in the `dist/angular-tailwind-unsplash` directory.\n\n## :wrench: Testing\n\n* No tests set up\n\n## :computer: Code Examples\n\n* `photo.service.ts` - code to fetch Unsplash photo data and return it as an Observable\n\n```typescript\nphotoQuery(options: { query: string; orientation: string }): Observable\u003cany\u003e {\n\t\tconst queryParams = new HttpParams()\n\t\t\t.set('query', options.query)\n\t\t\t.set('orientation', options.orientation);\n\n\t\treturn this.http\n\t\t\t.get(`${this.baseUrl}/photos/random`, {\n\t\t\t\t...this.httpOptions,\n\t\t\t\tparams: queryParams,\n\t\t\t})\n\t\t\t.pipe(\n\t\t\t\ttake(1),\n\t\t\t\ttap(data =\u003e console.log(data)),\n\t\t\t\tcatchError(err =\u003e {\n\t\t\t\t\treturn throwError(\n\t\t\t\t\t\t() =\u003e\n\t\t\t\t\t\t\t`There was a problem fetching data from the Unsplash API: ${err.error.errors.toString()}`\n\t\t\t\t\t);\n\t\t\t\t})\n\t\t\t);\n\t}\n```\n\n## :cool: Features\n\n* Lazy-loading of About and Contact pages\n* All 3 pages have good Lighthouse test scores\n* Tailwind build for production CSS purge results in a very small styles bundle (about 2.13kB)\n* CodiumAI used to improve and document code\n\n## :clipboard: Status \u0026 To-Do List\n\n* Status: Working PWA. All files pass linting. Minor error with Unsplash samesite attributes to fix.\n* To-Do: Add CSP. Add text compression (Brotli, GZip...). Deploy (env. variable add to Netlify), splash screens, tests, replace robots file info etc. and redo lighthouse.\n\n## :clap: Inspiration\n\n* [Angular Architects: article: Extending the Angular CLI’s build process without ejecting](https://www.angulararchitects.io/aktuelles/extending-the-angular-clis-build-process/)\n* [StackOverflow: How to solve semi-colon expected css(css-semicolonexpected)](https://stackoverflow.com/questions/61443484/how-to-solve-semi-colon-expected-csscss-semicolonexpected)\n* [dev.to: Setup TailwindCSS in Angular the easy way](https://dev.to/angular/setup-tailwindcss-in-angular-the-easy-way-1i5l)\n* [Free svg site](https://freesvg.org/) for butterfly svg on about page\n* [Stackoverflow: How to add rel=“preconnect” to tags other than link?](https://stackoverflow.com/questions/54900054/how-to-add-rel-preconnect-to-tags-other-than-link)\n* [Angular Architects: What’s new in Angular 17?](https://www.angulararchitects.io/en/blog/whats-new-in-angular-17/)\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@yahoo.com`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fangular-tailwind-unsplash","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewjbateman%2Fangular-tailwind-unsplash","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fangular-tailwind-unsplash/lists"}