MovieCatalogueTest

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.

Key Points

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.

How to run

• 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 MovieCatalogueTest on the keyboard, like literally.
• Install all depedencies like how we usually roll npm i. behold, the JavaScript way.
  NOTE: if you're using yarn or 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 folder dist which you can serve to your local production server or you can serve it on local by typing npm run serve.
  • Unit Test: npm run test
  • End-to-end Test: npm run e2e

User Interface Preview

click to expand