A simple Progressive Web Apps made for Indosat Ooredoo Hutchison Digital Camp "Frontend Web Developer" path practice.
NOTE: I staged this project into two different section, this one, and MovieCatalogue check it before this one.
In this stage, I created the Unit test, end-to-end test for some scenario. I also did some optimization like lazy-load image, different image dimensions for different screen sizes, split chunks, adding meta tag, and etc.
click to expand
In this project I've learned and implemented some key factors like:
- Pengenalan Kelas : Menjelaskan tentang pentingnya membuat website yang optimal untuk diakses oleh berbagai perangkat, khususnya smartphone yang mendominasi pengguna internet.
- Mobile First Approach : Memahami pendekatan mobile-first, serta belajar membangun website yang responsif menggunakan CSS Grid System, Media Query, dan Off Screen Canvas melalui pendekatan Mobile First.
- Aksesibilitas : Belajar aspek aksesibilitas web seperti focus, semantic HTML, tab order, label, alternative teks, serta penggunaan screen reader agar website yang dikembangkan dapat diakses oleh siapa pun.
- JavaScript Clean Code : Belajar prinsip-prinsip penulisan kode JavaScript berdasarkan acuan buku Clean Code yang ditulis oleh senior software engineer Robert C. Martin.
- Progressive Web Apps : Belajar membuat website yang progressive sehingga website memiliki sifat native seperti installable, offline capability, dan lainnya.
- Automation Testing : Belajar penerapan testing seperti Unit Test, Integration Test, dan End to End Test pada website yang dibuat, serta belajar menggunakan DevTools untuk debugging.
- Web Performance : Belajar menggunakan web auditor untuk mengetahui sejauh mana performa website yang dibuat, dan mengoptimalkan performa website berdasarkan hasil yang diperoleh.
- Deployment dengan CI/CD: Belajar menerapkan teknik Continuous Integration/Continuous Deployment untuk melakukan proses testing dan build secara otomatis sehingga aplikasi dapat diakses secara publik.
- Clone this directory by typing
git clone https://github.com/AndyNotfound/MovieCatalogueTest.git.
NOTE: alternatively you can do the ssh version - Change your working directory by punching
cd MovieCatalogueTeston the keyboard, like literally. - Install all depedencies like how we usually roll
npm i. behold, the JavaScript way.
NOTE: if you're usingyarnor whatever, figure it out, kay? - Run one of the following commands below, based on your need and goal:
- Development:
npm run start-dev - Build:
npm run build
NOTE: this will create a build folderdistwhich you can serve to your local production server or you can serve it on local by typingnpm run serve. - Unit Test:
npm run test - End-to-end Test:
npm run e2e
- Development:
click to expand
