แสนรัก (SanRak) - แพลตฟอร์มหาคู่และคอมมูนิตี้คนไทย & LGBTQ+

โปรเจกต์ทดลองที่ตั้งใจสร้างขึ้นมาแก้ปัญหาเรื่องโปรไฟล์ปลอมและความไม่ปลอดภัยบนแอปหาคู่ทั่วไป โดยออกแบบให้เป็นทั้งพื้นที่คอมมูนิตี้สำหรับพูดคุย และบริการช่วยจัดหาคู่โดยทีมงานหลังบ้าน (Matchmaker)

แนวคิดการออกแบบและโครงสร้างระบบ

ผมเลือกใช้เครื่องมือสมัยใหม่ที่เน้นความปลอดภัยและความเร็วในการใช้งานเป็นหลัก:

• Privacy Gate (สิทธิ์การเข้าถึงข้อมูล): ปกป้องความเป็นส่วนตัวของผู้ใช้งานด้วยการซ่อนรูปภาพ โปรไฟล์ และช่องทางการติดต่อทั้งหมดจากผู้ใช้ทั่วไปที่ไม่ได้ล็อกอิน รวมถึงป้องกันไม่ให้บอตของ Search Engine ดึงข้อมูลไป โดยจะเข้าถึงข้อมูลได้ก็ต่อเมื่อผ่านการตรวจสอบสิทธิ์ (Supabase Auth) แล้วเท่านั้น
• Next.js 16 App Router & Server Actions: แบ่งโครงสร้างหน้าเว็บตามระดับสิทธิ์ใช้งานชัดเจนผ่าน Route Groups เช่น (app), (auth) และ (public) พร้อมใช้ Server Actions จัดการเขียนและอัปเดตข้อมูลหลังบ้าน ช่วยให้โค้ดคลีน ประสิทธิภาพสูง และลดการพึ่งพา Client-Side API ที่ซับซ้อน
• Drizzle ORM & Database Layer: ออกแบบฐานข้อมูล PostgreSQL ด้วย Drizzle ORM เพื่อเชื่อมโยงข้อมูลในระบบบอร์ดคอมมูนิตี้ และระบบจับคู่ที่มีความซับซ้อนได้อย่างราบรื่นและปลอดภัย
• หาคู่รายจังหวัด (Geographic Routing): ใช้ Dynamic Route /geo/[province] คัดกรองและแสดงผลสมาชิกตามจังหวัด เพื่อช่วยให้ผู้ใช้ค้นหาเพื่อนหรือคนที่ใช่ในพื้นที่ใกล้เคียงได้ง่ายขึ้น

ความท้าทายและการแก้ปัญหา (Challenges & Solutions)

• โจทย์ที่ท้าทาย: การทำ SEO ควบคู่ไปกับระบบ Privacy Gate เป็นโจทย์ที่ขัดแย้งกัน เพราะเราต้องการซ่อนข้อมูลผู้ใช้เพื่อความเป็นส่วนตัวสูงสุด แต่ในขณะเดียวกันก็ต้องให้ Google ค้นพบหน้าเว็บเพื่อดึงผู้ใช้งานใหม่ ๆ เข้ามาสมัครสมาชิก
• การแก้ปัญหา: เลือกแก้ปัญหาด้วยการแยกส่วนหน้าเว็บสาธารณะ (Public Pages) สำหรับทำ SEO ออกจากส่วนของระบบสมาชิก โดยสร้างหน้า /geo สำหรับแสดงข้อมูลสถิติแยกตามพื้นที่ และหน้า /blog สำหรับระบบบทความความรักที่เขียนด้วยไฟล์ MDX ซึ่งช่วยให้ Google ค้นเจอเว็บได้ง่ายขึ้น ในขณะที่หน้ารายชื่อสมาชิกและบอร์ดคอมมูนิตี้ทั้งหมดจะถูกล็อกไว้หลังระบบล็อกอิน (Middleware Protected) 100%

ผลลัพธ์เชิงเทคนิคและความปลอดภัย

• รูปภาพและข้อมูลปลอดภัย: รูปภาพของสมาชิกจะถูกเก็บไว้บน Supabase Storage โดยควบคุมสิทธิ์การเข้าถึงผ่าน Row Level Security (RLS) และเบลอรูปภาพอัตโนมัติหากผู้ใช้งานยังไม่ได้เข้าสู่ระบบ ป้องกันการส่องรูปภาพโดยไม่ได้รับอนุญาต
• ระบบแนะนำคู่แบบ Hybrid: ผสมผสานระบบบอร์ดคอมมูนิตี้ (Community Feed) เข้ากับระบบจัดการหลังบ้านสำหรับ Matchmaker (Admin Dashboard) เพื่อให้ทีมงานสามารถคัดกรองประวัติ ตรวจสอบความถูกต้องของสลิปโอนเงินผ่าน LINE OA และจับคู่แนะนำสมาชิกแบบตัวต่อตัวได้อย่างแม่นยำ
• ดีไซน์ที่ดูอบอุ่นและจริงใจ: เลือกใช้โทนสีครีม แดงกุหลาบ และน้ำตาลอบอุ่น (Rose & Warm Amber) สไตล์ Minimal เพื่อให้ผู้ใช้งานรู้สึกผ่อนคลาย ปลอดภัย และเป็นมิตรตั้งแต่วินาทีแรกที่เปิดหน้าเว็บ

เทคโนโลยีที่เลือกใช้ (Tech Stack Breakdown)

• Frontend: Next.js 16 (App Router), Tailwind CSS, TypeScript
• Backend & Database: Node.js, PostgreSQL (Supabase), Drizzle ORM
• Authentication & Storage: Supabase Auth & Storage (พร้อมตั้งค่า RLS Custom Rules)
• Code Quality & Tools: Knip (สำหรับคัดแยกไฟล์และโค้ดที่ไม่ได้ใช้งาน), ESLint, SVG Icons (หลีกเลี่ยงการฝัง Emoji ลงในโค้ดโดยตรง)