ช่วงนี้ก็ไม่รู้ว่าจะทำอะไรเลยลองค้นหาเรื่องการทำโปรเจ็กต์ frontend เรื่อย ๆ จนกระทั่งไปพบกับ Zustand ในเว็บ Dev.to Zustand เป็น state management ที่เน้นการใช้ Hook เป็นหลัก ที่แปลกกว่าตัวอื่นคือไม่จำเป็นต้องมีการใช้ component ครอบเลย สามารถเรียก Hook ได้ตรง ๆ เลย
Source Code: https://github.com/pontakornth/starnote
โครงสร้างของ Starnote
React: แหงอยู่ล่ะว่าผมฝึก React ก็ต้องใช้ React อยู่แล้ว ตอนแรกอยากจะลองใช้พวก CSS-in-JS ด้วย แต่ว่า components น้อยเกินไปเลยรู้สึกว่าไม่คุ้มกับการใช้งานเท่าไหร่
CSS Module: ด้วยความที่ components ของ project นี้มีน้อยมาก ผมแยกแค่ส่วน editor กับ sidebar เฉย ๆ นอกนั้นก็เป็นส่วนย่อย ๆ ที่ไม่ได้ reuse ที่อื่น การใช้ CSS Module ทำให้แยกไฟล์สะดวกกว่า
Vite: ปกติใช้ Vite หมดเลยไม่ว่าจะเป็น Vue, React หรือ Svelte เพราะว่าสะดวกกว่าติดตั้งแต่ละแบบมาก Template ที่มีอยู่ก็เรียบง่าย แก้นิดหน่อยก็ได้ project เปล่า ๆ มาแล้ว แถม reload เร็วอีกด้วย
Zustand: เป็น State management ที่ผมเห็นมาจาก Dev.to ทำให้ผมค่อนข้างสนใจอย่างมาก เพราะไม่เคยได้ยินชื่อ ปกติเราก็ใช้พวก React Content, Redux + Redux Toolkit, หรือไม่ก็ MobX กันมากกว่า
นอกจากนี้ผมใช้ TypeScript ในการทำงานพวกนี้เป็นหลัก เพราะว่าทำให้หาบัคได้เร็วกว่า JavaScript รวมถึงมีการ autocomplete ที่ดีกว่าด้วย
การพัฒนา Starnote
Starnote เป็น side project ที่ไม่ได้วางแผนว่าจะเอาไปลงให้คนใช้หรือมา contribute จริง ๆ แต่เป็นที่ที่เอาไว้ฝึกการเขียนมากกว่า ทำให้ผมเลือกที่จะทำแค่ส่วนที่ basic ที่สุด ก็คือ สร้าง อ่าน แก้ ลบ หรือเรียกสั้น ๆ ก็คือ CRUD, รองรับ markdown, มี syntax highlighting และก็สามารถ save ลง localstorage
stores/note.ts: เป็นไฟล์ที่เอาไว้เก็บ Store ของ Zustand และการทำงานร่วมกับ localStorage มันอาจจะดูเทอะทะไปนิดนึง แต่ผมมองว่ามันเล็กเกินกว่าที่จะแยกออกมาเป็นหลาย ๆ ไฟล์
TheSidebar กับ TheEditor: ด้วยความที่ว่าผมใช้อันเดียวใน project เลยลองใช้ The นำหน้าชื่อ component ดู เพราะเป็นการบ่งบอกว่ามี component นี้อันเดียว ทั้งสองอันต่อกับตัว Zustand ผ่าน useNotes ที่เป็น hook จาก note.ts อีกทีนึง
นอกจากนั้นก็ไม่มีอะไรมากที่น่าสนใจพอที่จะลง blog เท่าไหร่ CSS ผมไม่ได้ใช้ WindiCSS หรือ Tailwind เพราะว่าอยากลองเขียน CSS เองใน project นี้ เรื่องการรับรอง markdown ผมใช้ React Markdown และก็ React Syntax Highlighter ช่วย แต่ไม่ได้ใช้ตัว Editor ใช้แค่ textarea ธรรมดา
สิ่งที่อยากลองทำและปรับปรุง
หากใครใช้มือถือเข้าไปยังตัวอย่างของแอพจะรู้เลยว่า Starnote ไม่ได้ทำ responsive design ไว้แต่แรกเลย ถ้าจะเพิ่มอะไรสักอย่างก็อยากจะทำส่วนนี้เป็นส่วนแรก เพราะว่าจะได้ลง Demo ได้เต็มที่
นอกจากนั้นก็จะมีส่วนของการ save ลง online ทำให้สามารถแก้ note จากที่ไหนก็ได้ถ้ามีสมาชิก ตอนนี้ยังไม่ได้โฟกัสส่วนนี้เท่าไหร่ แต่ถ้ามีโอกาสก็อยากลองทำดูสักครั้ง อาจจะใช้ Firebase หรือไม่ก็ Supabase จะได้ไม่ต้องเขียน backend