Hai, ini pet projek yang "kupelihara" untuk bereksplorasi dengan React dan animasi UI.

Demonya ada di sini (WIP): https://sakitkepala.github.io/wkwkbudgetapp/#/u/budget

Demo dan source code masih tahap work in progress, harapkan demonya belum stabil, bisa berubah sewaktu-waktu, dan bahkan ada yang tidak jalan. Sedang saya kerjakan :)

Saya ingin fokus pada implementasi animasi user interface-nya di sini. Hanya saja, saya pikir tetap butuh fitur yang bisa jalan, minimal satu siklus interaksi supaya bisa lebih mensimulasikan bagaimana user berinteraksi dengan fitur UI. Jadi masih ada fitur-fitur yang belum diimplentasi di sini, dan belum ada siklus CRUD lengkap untuk tiap model datanya.

Awalnya saya pakai Next.js dengan alasan supaya bisa dibuild jadi halaman statis dan dideploy di Github Pages untuk demo. Lalu saya pikir lebih baik dengan Create React App saja supaya bisa lebih fleksibel dalam bereksplorasi. Ada fitur yang sudah saya buat ketika masih pakai Next.js tapi belum dimigrasikan ke sini.

Repo lamanya bisa dilihat di sini: https://github.com/sakitkepala/budgetapp-spike-with-nextjs.

Stack

Untuk awal development ini, saya ingin buat prototip dengan cepat. Jadi saya pakai beberapa library untuk membantuku:

• Create React App
• Chakra UI
• Reach Router React Router, untuk pakai hash routing-nya
• Framer Motion
• MSW, untuk mocking server/back-end REST
• React Query

Chakra UI lumayan awesome juga untuk buat UI: lumayan membantu terutama untuk urusan accessibility dan dalam hal menangani focus management, sehingga di tahap ini saya tidak perlu memikirkan masalah ini dulu. Saya ingin merefaktornya nanti, mungkin pindah ke Styled Component atau Emotion, untuk mengimplementasinya sendiri di tahap berikutnya. Framer Motion juga awesome, dan untuk animasi, saya tidak kepikiran library animasi lain, kecuali mungkin GSAP—tapi perlu effort bikin wrapper Reactnya karena implementasi GSAP lebih imperatif.

Stack di atas sepenuhnya dipilih dari apa yang terpikirkan saat itu: tidak ada pertimbangan khusus kecuali selera. Terkhusus React Query, saya pilih karena kesulitan memilih solusi dalam hal manajemen state karena banyaknya pilihan di ekosistem React. Akhirnya saya mengikuti ide dan anjuran Kent C. Dodds soal manajemen state berdasarkan pengalamannya di Paypal.

Milestones

Beberapa fitur yang mau kuimplementasikan (tapi belum):

• Otentikasi user
• Animasi transisi routing dan micro-interaction
• Dashboard dan visualisasi data
• Shortcut kibor dan command pallet (seperti fitur VS Code)
• Unit test dan integration test
• Theming
• Layout responsif
• Halaman pengunjung tanpa otentikasi

Stay tuned!

Terima kasih!

Terima kasih sudah mampir. Silakan posting di diskusi di atas kalau pingin sapa-sapa atau kasih masukan. Ayo kita ngoprek bareng :)