https://github.com/bob-lee/ng-joanne-lee

Joanne's website
https://github.com/bob-lee/ng-joanne-lee

angular7 firebase intersection-observer workbox

Last synced: about 2 months ago
JSON representation

Joanne's website

• Host: GitHub
• URL: https://github.com/bob-lee/ng-joanne-lee
• Owner: bob-lee
• Created: 2017-05-02T22:37:23.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T05:48:05.000Z (about 2 years ago)
• Last Synced: 2024-04-12T21:29:59.818Z (9 months ago)
• Topics: angular7, firebase, intersection-observer, workbox
• Language: TypeScript
• Homepage: https://joanne-lee.web.app
• Size: 117 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 32
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Joanne Lee

This is Joanne's website, shows her works. Images are dynamically served from `Firebase storage` and lazily loaded using `IntersectionObserver` API. All resources are cached by `workbox` service worker that makes the web faster on next visit and even when user lost the internet.



Below is the convention to follow when naming and uploading image files:

- assume the page wants to show images in pair - image1 as parent and image2 as child (optional)

- image2 needs to be square, so crop if required

- give unique name to image1, e.g. `Sarah.jpg`

- give unique name to image2, e.g. `of_Sarah.jpg.jpg`

1. create a folder like `portrait` in `storage`

2. upload image1 first, `recordUrl` function to add a new record in database with `url` field

3. upload image2, `recordUrl` function to convert it to thumb, record its url on `thumbUrl` field

4. The `portrait` page to show image1 and image2 using urls on `url` and `thumbUrl` fields in database

The website was built and deployed using following technologies: 

* [Angular](https://angular.io/): frontend framework

* [Workbox](https://workboxjs.org/): JavaScript libraries for Progressive Web Apps

* [Firebase](https://firebase.google.com/): cloud infrastructure for database, storage, fucntions and hosting

* [Node.js](https://nodejs.org): JavaScript runtime environment

[Visit the web!](https://joanne-lee.firebaseapp.com/home)

For development, run `yarn serve` to build and test it on `localhost:5000` or run `firebase deploy` to deploy the web.

```

// to install dependencies

yarn

// to debug on localhost:4200

ng serve

// to run tests

ng test

// to build for production

yarn build

// to test on localhost:5000 with production build

yarn serve

```