Skip to content

πŸ“‹ Angular app to get random images from the Unsplash API

License

Notifications You must be signed in to change notification settings

AndrewJBateman/angular-tailwind-unsplash

Folders and files

NameName
Last commit message
Last commit date

Latest commit

f5580cb Β· Jan 12, 2024

History

84 Commits
Nov 10, 2023
Mar 25, 2021
Jan 12, 2024
Dec 13, 2020
Jul 13, 2023
Jun 2, 2022
Jan 10, 2024
Jul 13, 2023
Nov 10, 2023
Jun 14, 2021
Jan 12, 2024
Jan 10, 2024
Nov 10, 2023
Nov 10, 2023
Jan 10, 2024
Jan 12, 2024
Nov 9, 2023
Nov 10, 2023
Nov 10, 2023
Jan 12, 2024
Nov 10, 2023

Repository files navigation

⚑ Angular Tailwind Unsplash

  • Angular app using TailwindCSS components to display images from the Unsplash Images API
  • Note: to open web links in a new window use: ctrl+click on link

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

πŸ“„ Table of contents

πŸ“š General info

  • 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>

πŸ“· Screenshots

Angular page Angular page Angular page
Home About Contact

Angular page Angular page Angular page

πŸ“Ά Technologies

πŸ’Ύ Setup

  • Run npm i to install dependencies.
  • Get yourself an Unsplash Login & API Key.
  • Add API key to the environments.ts file
  • 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 = new HttpParams()
			.set('query', options.query)
			.set('orientation', options.orientation);

		return this.http
			.get(`${this.baseUrl}/photos/random`, {
				...this.httpOptions,
				params: queryParams,
			})
			.pipe(
				take(1),
				tap(data => console.log(data)),
				catchError(err => {
					return throwError(
						() =>
							`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.

πŸ‘ Inspiration

πŸ“ License

  • This project is licensed under the terms of the MIT license.

βœ‰οΈ Contact

  • Repo created by ABateman, email: gomezbateman@yahoo.com