Menjadi React Web Developer Expert | Submission 2

Kriteria

• Kriteria Utama 1: Automation Testing
  • Buat minimal dua pengujian fungsi Reducer.
  • Buat minimal dua pengujian Thunk Function.
  • Buat minimal dua pengujian React Components.
  • Buat minimal satu pengujian End-to-End untuk alur login aplikasi.
  • Wajib menulis skenario pengujian pada masing-masing berkas pengujian.
  • Pengujian dapat dijalankan dengan perintah npm test dan npm run e2e.
• Kriteria Utama 2: Deployment Aplikasi
  • Deploy aplikasi dengan menggunakan teknik CI/CD.
  • Continuous Integration diterapkan dengan GitHub Actions.
  • Continuous Deployment diterapkan dengan Vercel.
  • Memproteksi branch master.
  • Melampirkan URL Vercel aplikasi Anda pada catatan submission.
  • Melampirkan screenshot sebagai bukti telah menerapkan konfigurasi CI/CD dan branch protection dengan benar. Screenshot yang perlu dilampirkan:
• Kriteria Utama 3: Memanfaatkan Salah Satu Ecosystem React
• Kriteria Utama 4: Mempertahankan Kriteria Submission Sebelumnya

Saran

• Terdapat lebih dari tiga pengujian fungsi reducer.
• Terdapat lebih dari tiga pengujian fungsi thunks.
• Terdapat lebih dari tiga pengujian pada React Component.
• Memiliki minimal 2 stories komponen.
• Menerapkan saran pada submission sebelumnya seperti:
  • fitur votes pada thread dan komentar;
  • menampilkan leaderboard;
  • filter daftar thread berdasarkan kategori
• Saran lainnya.:
  • Aplikasi yang Anda bangun mudah untuk digunakan. Contohnya, tidak membuat pengguna bingung dan menggunakan warna yang mudah dalam membaca teks.
  • menampilkan leaderboard;
  • Aplikasi yang Anda bangun memiliki tampilkan yang menarik.

Menjadi React Web Developer Expert | Submission 1

Kriteria

• Kriteria Utama 1: Fungsionalitas Aplikasi
  • Terdapat cara untuk mendaftar akun.
  • Terdapat cara untuk login akun.
  • Menampilkan daftar thread.
  • Ketika item thread dipilih, menampilkan detail thread beserta komentar di dalamnya.
  • Pengguna dapat membuat thread.
  • Pengguna dapat membuat komentar di dalam sebuah thread.
  • Menampilkan Loading bar ketika memuat data dari API.
• Kriteria Utama 2: Bugs Highlighting
  • Menggunakan ESLint pada source code aplikasi. Indikasinya adalah terdapat berkas konfigurasi ESLint pada proyek.
  • Menerapkan salah satu Code Convention berikut.
    • AirBnB JavaScript Style Guide.
    • Google JavaScript Style Guide.
    • StandardJS Style Guide.
  • Tidak ada indikasi error yang ditampilkan ESLint.
  • Menggunakan React Strict Mode.
• Kriteria Utama 3: Arsitektur Aplikasi
  • Hampir seluruh state aplikasi (terutama yang bersumber dari API) disimpan pada Redux Store. Form input atau controlled component diperbolehkan untuk mengelola state-nya sendiri.
  • Tidak ada pemanggilan REST API yang dilakukan di dalam lifecycle atau efek pada komponen.
  • Memisahkan kode UI dengan State di folder yang terpisah.
  • React component bersifat modular dan reusable.

Saran

• Saran 1: Fitur Votes pada Thread dan Komentar
  • Menyediakan tombol yang dapat digunakan untuk votes pada thread dan komentar.
  • Menampilkan indikasi pada tombol bila pengguna sudah mem-vote thread dan komentar. Contohnya, mengubah warna tombol dari abu-abu menjadi merah bila pengguna sudah up-vote/down-vote.
  • Mengedepankan User Experience dengan menerapkan Optimistically Apply Actions.
  • Menampilkan jumlah votes pada thread dan komentar.
• Saran 2: Menampilkan Leaderboard
  • Terdapat halaman untuk menampilkan leaderboard.
  • Setiap item leaderboard, harus menampilkan informasi berikut ini.
  • Nama pengguna.
  • Avatar pengguna.
  • Score.
• Saran 3: Filter Daftar Thread Berdasarkan Kategori
  • Terdapat fitur untuk mem-filter item thread yang ditampilkan pada halaman daftar threads.

Menjalankan Aplikasi

• Dengan run_assist.sh (docker)

  ./run_assist.sh --run-dev

• Tanpa docker

  npm install
  npm run dev

Build Aplikasi

• Dengan run_assist.sh (docker)

  ./run_assist.sh --run-build

• Tanpa docker

  npm install
  npm run build

Tests

• Dengan run_assist.sh (docker)

  ./run_assist.sh --run-ci-test

• Tanpa docker

  npm install
  npm run ci:test