icon

Putu Jhonarendra

Programmer, Front End Developer, Back End Developer

Kembali
Dec 2022

Forum App - Submission Dicoding

DicodingReact JS ยท Tailwind CSS

Forum App

Merupakan aplikasi forum yang dibangun menggunakan front-end javascript React JS. Data dan backend disediakan oleh dicoding pada link https://forum-api.dicoding.dev/v1. Tailwind CSS digunakan untuk styling component.

Demo

https://dicoding-forum.vercel.app/

Fungsionalitas Aplikasi

  1. Authentication (Register, Login, Logout)

Dicoding Forum App

Dicoding Forum App

Dicoding Forum App

  1. Kelola Data Thread

Dicoding Forum App

  1. Memberikan Komentar Pada Thread

Dicoding Forum App

  1. Memberikan Votes Pada Thread Dan Komentar

Dicoding Forum App

  1. Menampilkan Loading Bar Ketika Memuat Data Dari API

Dicoding Forum App

Dicoding Forum App

  1. Mengedepankan User Experience dengan menerapkan Optimistically Apply Actions

Konsep ini dilakukan dengan melakukan perubahan data tanpa menunggu response dari API. Apabila response dari API gagal, data dikembalikan seperti semula.

  1. Menampilkan Leaderboard

Dicoding Forum App

  1. Thread Berdasarkan Kategori, Search Thread

Dicoding Forum App

ESlint

Aplikasi harus memiliki style coding yang rapi dengan menerapkan salah satu Code Convention antara AirBnB JavaScript Style Guide, Google JavaScript Style Guide, StandardJS Style Guide

Saya menggunakan AirBnB dan seluruh file proyek sudah memenuhi style AirBnb.

Dicoding Forum App

Redux Store

State management yang digunakan adalah Redux. Tidak ada pemanggilan API di dalam lifecycle atau komponen. Logika pemanggilan API dan seleksi data dilakukan pada Redux sehingga komponen menjadi lebih "bersih".

Dicoding Forum App

Dicoding Forum App

Automation Testing

  1. Pengujian Fungsi Reducer

  2. Pengujian Thunk Function

  3. Pengujian React Components

  4. Pengujian End-to-End

Screenshot

Testing Unit

Dicoding Forum App

Dicoding Forum App

Capek kalau bikin semua test untuk semua file serta 100& covered line ๐Ÿ˜‚ Biarkan menjadi tugas tester.

End to End Testing (Cypress)

Dicoding Forum App

Continous Integration/Continous Development (CI/CD)

  1. Membuat CI dengan Github Actions

  2. Membuat CD dengan Vercel

  3. Memproteksi Branch Master

Screenshot

Dicoding Forum App

Dicoding Forum App

Dicoding Forum App

Storybook

Menggunakan Storybook untuk membuat dokumentasi komponen.

Dicoding Forum App

React Ecosystem

Menggunakan beberapa React Ecosystem tambahan yaitu:

  1. storybook
  2. @headlessui/react
  3. draft-js
  4. react-icons