ข้ามไปยังเนื้อหา
โปรเจกต์ทั้งหมด

เผยแพร่แล้วแนะนำ

ตลาดรถมือสองที่ผ่านการรับรอง

ตลาดรถมือสองที่ผ่านการรับรองจากผู้ผลิต ค้นหารถจากสต๊อกจริงของดีลเลอร์ทั่วประเทศตามยี่ห้อ รุ่น จังหวัด และงบประมาณ เปรียบเทียบแบบเคียงข้าง คำนวณค่างวด แล้วส่งข้อมูลถึงดีลเลอร์ที่ถือรถคันนั้น

  • Next.js
  • React
  • TypeScript
  • TanStack Query
  • Zustand
  • MUI
  • Jest
  • Docker

ภาพรวม

การซื้อรถมือสองเริ่มจากการกรอง และจบที่การโทรหาคนขาย เว็บที่อยู่ตรงกลางจึงต้องเร็ว ต้องหาเจอในเสิร์ช และต้องบอกความจริงว่ารถคันไหนยังอยู่ ซึ่งแปลว่าทุกหน้าถูกประกอบจากสต๊อกที่ดีลเลอร์อัปเดตกันเอง

ผู้เข้าชมค้นหาได้โดยไม่ต้องสมัคร เปรียบเทียบรถที่สนใจ คำนวณสินเชื่อ และหาดีลเลอร์บนแผนที่ ส่วนสมาชิกได้รายการที่ถูกใจซิงก์ข้ามอุปกรณ์ เบื้องหลังมีชั้นเนื้อหาให้ทีมงานลงข่าว โปรโมชัน และหน้าแคมเปญเต็มจอ

ส่วนที่ท้าทายในการสร้าง

URL คือคำค้น หน้าค้นหาอยู่ที่เส้นทางเดียวซึ่งแต่ละช่วงของ path มีความหมายตามตำแหน่ง ทั้งยี่ห้อ รุ่น เกรด ปี จังหวัด ประเภทตัวถัง และช่วงราคา พร้อมคำเฉพาะสำหรับ "ทั้งหมด" เมื่อมีคำขอเข้ามา ระบบจะโหลดพจนานุกรมข้อมูลหลักแล้วแปลแต่ละช่วงกลับเป็นรหัสตัวเลขที่ API ต้องการ โดยไล่เป็นชั้น รหัสยี่ห้อคือสิ่งที่ทำให้ดึงรายการรุ่นได้ รหัสรุ่นคือสิ่งที่ทำให้ดึงรายการเกรดได้ ช่วงที่ไม่ตรงกับอะไรเลยจะถูกแปลงเป็นรหัสที่ไม่มีอยู่จริงโดยตั้งใจ ไม่ใช่ถูกตัดทิ้ง URL ที่พิมพ์ผิดจึงคืนผลว่างแทนที่จะคืนทุกอย่างเงียบ ๆ หน้าเว็บถูกเรนเดอร์ที่เซิร์ฟเวอร์แล้วส่งแคชที่เตรียมไว้ให้เบราว์เซอร์ รายการแรกจึงไม่ต้องดึงข้อมูลซ้ำตอน hydrate

โทเคนที่เบราว์เซอร์ไม่เคยเห็น API สต๊อกรถยืนยันตัวตนของแอปพลิเคชัน ไม่ใช่ของผู้ใช้ ด้วยโทเคนอายุสั้น การสร้างโทเคนในเบราว์เซอร์จะเปิดเผยข้อมูลลับ จึงย้ายไปทำใน middleware ทุกคำขอจะอ่านคุกกี้เซสชันที่ปิดผนึกไว้ ถอดรหัสโทเคน ต่ออายุถ้าหมดแล้ว แล้วปิดผนึกใหม่ ในเส้นทางดึงข้อมูล คำขอหลายรายการที่เจอโทเคนหมดอายุพร้อมกันจะไม่ต่ออายุพร้อมกันทั้งหมด ตัวแรกต่ออายุ ที่เหลือเข้าคิวรอแล้วยิงซ้ำ นั่นคือความต่างระหว่างการต่ออายุครั้งเดียวกับสามสิบครั้ง

รายการที่ถูกใจซึ่งใช้ได้ก่อนสมัครสมาชิก ผู้เข้าชมที่ยังไม่ล็อกอินเก็บรายการไว้ในเบราว์เซอร์ตัวเอง จัดกลุ่มตามดีลเลอร์ และเติมข้อมูลรถกลับมาแบบขนาน เมื่อล็อกอิน ชุดคำสั่งเดิมจะสลับไปใช้ API ของสมาชิก รายการจึงตามไปกับผู้ใช้ข้ามอุปกรณ์ โดยที่หน้าจอไม่ต้องแยกโค้ดตามโหมด

โครงสร้างระบบ

แอปพลิเคชันเดียวที่เรนเดอร์ฝั่งเซิร์ฟเวอร์ พร้อม backend-for-frontend เล็ก ๆ ของตัวเองสำหรับสร้างและต่ออายุโทเคน อ่านเซสชัน จัดการคุกกี้ และสร้าง sitemap ที่ไล่ทั้งดีลเลอร์ บทความ และชุดตัวกรองที่ควรถูกจัดทำดัชนี ข้อมูลธุรกิจทั้งหมดมาจาก API ต้นทางสองระบบ

ขนาด

  • 23 เส้นทาง · 628 ไฟล์ · 15 โมดูลฟีเจอร์ · 297 ไฟล์เทสต์
  • ราว 31 endpoint จากสองระบบต้นทาง · 2 ภาษา ภาษาละ 726 คำแปล
  • หน้ารายการรีเฟรชทุกชั่วโมง ส่วนหน้าที่ต้องสดกว่านั้นเลือกไม่แคชเป็นราย ๆ
สถานะ
เผยแพร่แล้ว
เผยแพร่เมื่อ
12 ก.ย. 2026
เทคโนโลยี
Next.js · React · TypeScript · TanStack Query · Zustand · MUI · Jest · Docker

ดูต่อ

โปรเจกต์อื่น ๆ

โปรเจกต์ทั้งหมด