Overview
NooBeeID adalah sebuah platform edukasi untuk kamu yang ingin belajar programming. NooBeeID memberikan beberapa format menarik, seperti Artikel, Course, Bootcamp, Mini Course dan Tutorial di youtube-nya. Dengan menggunakan Discord sebagai platform diskusi, NooBee sudah di mempunyai lebih dari 600 pengguna.
Kenapa di Revamp ?
Dengan semakin berkembangnya pengguna, NooBeeID memutuskan untuk melakukan revamp terhadap websitenya agar lebih baik lagi. Berikut beberapa alasannya :
- Versi sekarang adalah versi MVP. Jadi design dan fungsionalitas nya masih terbatas. Pada Homepage nya sendiri hanya ada List Artikel saja.
- New Features. Pada revamp kali ini, terdapat beberapa fitur baru seperti Topup Points, Seamless Enroll, di Homepage nya akan diletakin lebih banyak fitur, seperti List Article, Course, Promo / Campaign, Bootcamp, Event, dan lain sebagainya.
- Upgrade Teknologi. Pada website sekarang, itu menggunakan teknologi yang dibuat pada tahun 2019 dan tidak di maintenance dengan baik. Sehingga banyak library yang sudah deprecated dan tidak relevan lagi.
- Perubahan Business Model. Jika sebelumnya berfokus pada bootcamp, maka NooBeeID akan mulai berfokus pada penjualan Course & Mini Course sedangkan Botocamp akan menjadi UPV-nya. Sebelumnya, skema coursenya adalah Subscription dan sekarang akan diganti dengan Lifetime Access.
Berikut adalah tampilan setelah di revamp :
Home Page
Pada versi pertama, hanya menampilkan list artikel saja. Hal ini akan menyulitkan user untuk mencari course yang mereka inginkan.
Sedangkan pada Home page versi 2, sudah menambahkan section online course sehingga user bisa langsung mencari course yang dia inginkan.
Detail Course Page
Pada page ini, sebenarnya tidak banyak yg di revamp. Hanya menambahkan informasi baru yang ingin ditampilkan pada page ini.
Sedangkan pada versi terbaru, kami menambahkan beberapa informasi baru yang akan membuat effect Trust terhadap calon pembeli sebelum melakukan enroll terhadap modul tersebut.
Beberapa informasi yang ditambahkan adalah :
- Kapan course ini di terbitkan
- Kapan course ini di update
- Berapa jumlah member yang sudah melakukan enroll
- Benefit
- Dan Rating keseluruhan dari course ini.
Detail Article Page
Pada versi pertama, content yang disajikan tidak "centric" atau tidak berada di tengah. Mungkin jika kita melihat pada title, itu tidak ada masalah seperti gambar dibawah.
Namun bagaimana jika kita sambil membaca content nya? Pengguna akan merasakan hal aneh saat membaca article dengan layout seperti ini.
Artikel tersebut menyisakan jarak yang cukup besar di sebelah kanan, dan tidak ada data apapun juga yg ditampilkan disana. Oleh sebab itu, hal ini perlu di perbaiki agar layoutnya tidak aneh.
Pada versi terbaru, layout yang digunakan adalah center, sehingga tidak ada kejanggalan di sisi kiri dan kanan dari layout tersebut.
Pada versi revamp ini juga menambahkan Daftar Isi atau Table of Contents agar memudahkan pengguna untuk melakukan navigasi ke content yang ingin dituju.
New Technique Rendering
Ohya selain itu, perubahan yang signifikan dari revamp kali ini adalah adalah saya menggunakan teknik baru, yaitu Incremental Static Rendering (ISR). Teknik ini digunakan pada page :
- Detail Article
- Detail Course
Dikarenakan page tersebut akan sangat jarang untuk di update. Dan juga page tersebut juga akan difokuskan ke SEO, maka saya rasa ISR jauh lebih baik di implementasi disini ketimbang menggunakan SSR ataupun CSR.
Untuk waktu revalidation-nya, saya tetapkan sebesar 60 menit yang mana jika ada update data pada database, akan berimpact setelah 60 menit dari terakhir melakukan re-fetch data.
Jika kamu belum terlalu familiar dengan ISR, semoga gambar dibawah ini sedikit membantu:
Pada proses build, akan melakukan fetch data ke backend untuk di generate menjadi sebuah page. Lalu data tersebut akan di simpan di cache selama waktu yang ditentukan. Jika waktu tersebut habis, maka frontend akan melakukan re-fetch ke backend dan akan menyimpan lagi datanya ke dalam Cache.
Oleh sebab itu, page yang dihasilkan akan sangat cepat karena meminimalisir proses tarik data dari backend.
Masih banyak hal hal lain yang saya kerjakan disini, namun point point diatas adalah yang paling menarik yang bisa saya share ke kalian. Mungkin nantinya bakal bertambah seiring berjalannya waktu. Jika ada yang ingin ditanyakan, feel free to DM yaa
- Email : [email protected]
- Linkedin : reyhanjovie