About and Contact pages give more information on app using Tailwind CSS cards
To build for production Tailwindβs purge option is used to tree-shake unused styles and optimize final build size.
RxJS take(1) operater used to take first element from the Unsplash & Github observable streams then close them, so unsubscribing is not necessary.
The Github basic user info API does not require an API key. The Unsplash API does.
Angular 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<ArrayBuffer> when the Home page function onChangePhoto() is expecting interface type Observable<IUnsplashResponse>
Angular PWA v17 - 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.
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.
Run npm run build for a production build with CSS purging.
Run npm run lint to lint all files and fix where possible
The build artifacts will be stored in the dist/angular-tailwind-unsplash directory.
π§ Testing
No tests set up
π» Code Examples
photo.service.ts - code to fetch Unsplash photo data and return it as an Observable
photoQuery(options: {query: string; orientation: string}): Observable<any>{const queryParams =newHttpParams().set('query',options.query).set('orientation',options.orientation);returnthis.http.get(`${this.baseUrl}/photos/random`,{
...this.httpOptions,params: queryParams,}).pipe(take(1),tap(data=>console.log(data)),catchError(err=>{returnthrowError(()=>`There was a problem fetching data from the Unsplash API: ${err.error.errors.toString()}`);}));}
π Features
Lazy-loading of About and Contact pages
All 3 pages have good Lighthouse test scores
Tailwind build for production CSS purge results in a very small styles bundle (about 2.13kB)
CodiumAI used to improve and document code
π Status & To-Do List
Status: Working PWA. All files pass linting. Minor error with Unsplash samesite attributes to fix.
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.