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