ผลงานทั้งหมด
โปรเจกต์ส่วนตัว·2024
My App (Expense & Reading Tracker)
เว็บบันทึกรายจ่าย ติดตามการอ่าน และตัวช่วยจัดการการเงินส่วนตัว
- บทบาท
- Full Stack Developer
- ทีม
- Solo Project
- ปี
- 2024
ตัวเลขสำคัญ
- 3
- เวอร์ชันที่พัฒนาต่อเนื่อง
- C → Next.js
- จากภาษาแรกสู่เว็บสมัยใหม่
- การอ่าน · รายจ่าย
- ระบบหลักที่ใช้เอง
- ทุกวัน
- การใช้งาน
โปรเจกต์ส่วนตัวที่พัฒนาต่อเนื่องเพื่อเรียนรู้ Technology Stack ใหม่ ๆ ตั้งแต่ภาษา C จนถึง Next.js โดยมีระบบหลักคือการบันทึกการอ่านหนังสือ (หนังสือที่เคยอ่าน รีวิว จำนวนหน้าที่อ่านต่อวัน) และระบบบันทึกรายจ่ายประจำวัน พร้อมสรุปผลแบบรายสัปดาห์และรายเดือน นอกจากนี้ยังมีโมดูลการจัดการค่าใช้จ่ายร่วม เช่น การหารค่า Subscription รายเดือนกับเพื่อน การบันทึกรายจ่ายประจำ และการบันทึกการให้ยืมเงิน โดยมีแผนต่อยอดเพิ่มฟีเจอร์ด้านการจัดการการเงินและการติดตามพฤติกรรมส่วนตัวอย่างต่อเนื่อง
โจทย์และปัญหา
- 01ต้องการเครื่องมือบันทึกข้อมูลส่วนตัวที่ปรับแต่งได้ตามรูปแบบการใช้งานของตนเอง ทั้งด้านการอ่านหนังสือและการเงิน
- 02ต้องการระบบที่ช่วยสรุปและสะท้อนพฤติกรรมผ่านข้อมูล เช่น จำนวนหน้าที่อ่านต่อวัน และภาพรวมรายจ่ายรายสัปดาห์/รายเดือน
- 03ต้องการใช้โปรเจกต์เดียวเป็นพื้นที่ฝึกฝนและวัดพัฒนาการด้านการพัฒนาซอฟต์แวร์ ด้วยการยกระดับเทคโนโลยีทีละเวอร์ชัน
วิธีแก้
- 01พัฒนาเป็น 3 เวอร์ชันเพื่อสะท้อนการเรียนรู้และการต่อยอดความสามารถอย่างเป็นลำดับ
- 02Version 1 (C / CLI): ระบบ Command Line สำหรับบันทึกการอ่านหนังสือเป็นหลัก เพื่อฝึกพื้นฐานโครงสร้างข้อมูลและการจัดการไฟล์/ข้อมูล
- 03Version 2 (PHP / Early Web): พัฒนาเป็นเว็บยุคแรก ทำให้เริ่มเข้าใจการพัฒนาเว็บไซต์และงานฝั่งเซิร์ฟเวอร์ พร้อมเพิ่มโมดูลบันทึกการอ่านหนังสือและระบบบันทึกรายรับรายจ่าย
- 04Version 3 (Current / Next.js): Rewrite ด้วย Next.js, Prisma และ MySQL เพื่อเรียนรู้สถาปัตยกรรมเว็บยุคใหม่ การแยกเลเยอร์งาน และการออกแบบระบบให้ขยายต่อได้ (Reading Tracker, Expense Tracker, Subscription Split, Recurring Expenses, Lending/Debt Tracking)
ผลลัพธ์
- 01ได้ระบบที่สามารถใช้งานได้จริงในชีวิตประจำวัน ทั้งการติดตามการอ่านและการจัดการรายจ่ายส่วนตัว
- 02มีสรุปข้อมูลที่ช่วยให้เห็นภาพรวมและแนวโน้ม เช่น จำนวนหน้าที่อ่านต่อวัน และภาพรวมรายจ่ายรายสัปดาห์/รายเดือน
- 03โปรเจกต์ทำหน้าที่เป็นพื้นที่สะสมประสบการณ์และสะท้อนการพัฒนา จากระบบแบบ CLI ไปสู่เว็บสมัยใหม่ที่ต่อยอดได้ต่อเนื่อง
แกลเลอรี
Command-line interface
16:9 / MD
Record and Code
16:9 / MD
ทบทวนโปรเจกต์
ความท้าทาย
- การออกแบบฐานข้อมูลให้รองรับหลายโดเมนในระบบเดียว (การอ่าน, รายจ่าย, การหารค่าใช้จ่ายร่วม, รายจ่ายประจำ, การให้ยืม/ติดหนี้) โดยยังคงความชัดเจนและขยายง่าย
- การย้ายแนวคิดและข้อมูลข้ามแพลตฟอร์ม/ข้ามสถาปัตยกรรม (CLI → PHP Web → Next.js) รวมถึงการจัดการรูปแบบข้อมูลที่เปลี่ยนไปตามเวอร์ชัน
- การวางโครงสร้างโค้ดให้รองรับการเติบโตระยะยาว เช่น การแบ่งโมดูล การตั้งชื่อโดเมน และการรักษาความสอดคล้องของข้อมูลสรุปรายสัปดาห์/รายเดือน
- การทำให้ UX ใช้งานง่ายสำหรับการบันทึกทุกวัน และสรุปผลที่อ่านเข้าใจได้โดยไม่ซับซ้อน
สิ่งที่เรียนรู้
- แนวคิด Software Evolution และการพัฒนาแบบต่อเนื่องจากเวอร์ชันเล็กสู่ระบบที่ซับซ้อนขึ้นอย่างมีโครงสร้าง
- ความแตกต่างระหว่าง Legacy Web (PHP) กับ Modern Web (Next.js) ทั้งด้านสถาปัตยกรรม การจัดการสถานะ และแนวทางการพัฒนา
- การออกแบบฐานข้อมูลเชิงโดเมน (Domain-driven Data Modeling) และการออกแบบ Query เพื่อทำสรุปรายสัปดาห์/รายเดือนอย่างมีประสิทธิภาพ
- การพัฒนาเว็บสมัยใหม่ด้วย Next.js + Prisma ตั้งแต่การจัดโครงสร้างโปรเจกต์ การทำ API/Server Actions ไปจนถึงการจัดการข้อมูลและการแสดงผลแบบ Interactive
- การออกแบบฟีเจอร์ให้ต่อยอดได้ เช่น โมดูล Subscription Split และระบบรายจ่ายประจำที่รองรับการเปลี่ยนแปลงตามเวลา
สนใจงานแนวนี้?
เล่าโจทย์ของคุณให้ผมฟัง ตอบกลับภายใน 24 ชั่วโมง