เป็นเว็บที่มีแค่หน้าเดียวคือหน้า homepage และมีโฟลเดอร์ชื่อ cards อยู่ข้างๆไฟล์ homepage ข้างในมีภาพการ์ดหน้าหลัง ที่มันจำไว้เป็นข้อมูลเรียบร้อยแล้วว่าไฟล์ไหนจับคู่กับไฟล์ไหนเป็นหน้าหลัง
เมื่อเข้ามาแล้วมันจะสุ่มมาใบนึงจากคลังข้อมูล แล้วแสดงด้านหลัง คลิกทีนึงกลายเป็นด้านหน้า คลิกอีกทีกลายเป็นด้านหลังของใบใหม่
- UI วาดโดย : React
- Framework สำหรับ build เป็นเว็บ : Next.JS
- เว็บที่ build ออกมาจาก Next.JS เอาไป host ที่ : ที่ไหนดี
- ตัวจัดการ Package :
npm
ก่อนอื่นต้องลง npm ก่อน เป็นเครื่องมือที่จะหาของจำเป็นสำหรับโปรเจคมาเสริมให้เราอัตโนมัติจากเน็ต ตามที่กำหนดไว้ใน package.json มันคือส่วนนี้
"dependencies": {
"react": "^19.0.0",
"react-dom": "^19.0.0",
"next": "15.3.4"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"@tailwindcss/postcss": "^4",
"tailwindcss": "^4",
"eslint": "^9",
"eslint-config-next": "15.3.4",
"@eslint/eslintrc": "^3"
}
แค่รัน npm install จาก Terminal ขณะที่กำหลังอยู่ที่โฟลเดอร์นี้ แล้วมันจะเห็นทั้งหมดแล้วไล่โหลดให้เราหมดเลย แล้วจะเห็นว่าโฟลเดอร์ node_modules โผล่มา มีไฟล์มากมาย
ไปดูใน package.json จะมีส่วนนี้อยู่ อันนี้แปลว่าออกแบบคำสั่งสำเร็จรูปไว้ 4 อันให้พิมพ์ง่ายๆ ไม่งั้นจะต้องพิมพ์แบบทางขวาของแต่ละคำสั่ง
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"lint": "next lint",
"update-cards": "node scripts/update-cards.js"
},
ในโฟลเดอร์ src เป็นไปตามกฏของ Next.JS คือ โฟลเดอร์ src/app จะมีไฟล์ layout.tsx + page.tsx ที่เป็นตัวกำหนดว่าเข้ามาหน้าแรกของเว็บจะเห็นอะไร
ใน page.tsx จะเห็นว่า มาหน้าแรกปุ๊บจะเห็นแค่ component <CardFlip /> สิ่งเดียว สิ่งนี้คืออะไร ก็ต้องดู import CardFlip from '../components/CardFlip'; ข้างบน แปลว่าเราควรจะตามไปดูไฟล์นั้น
ใน src/components/CardFlip.tsx ก็จะเห็นว่ามีโค้ดที่คุมนิสัยทั้งหมดของเว็บนั่นเอง มีโค้ดสุ่มการ์ดจากคลังการ์ด คลิกทีแรกแค่พลิก คลิกอีกทีสุ่มใหม่
ส่วนคลังการ์ดที่ว่าอยู่ไหน ก็ดูข้างบนอีก มันว่า import cardsData from '../data/cards.json'; ก็ต้องตามไปดูไฟล์นั้น
จะเห็นว่าเป็นไฟล์ JSON ที่ไล่จับคู่การ์ดหน้าหลังไว้เป็นใบๆ เว็บมันถึงได้รู้ว่าอะไรคู่กับอะไร
ภาพการ์ดจริงๆไม่ได้อยู่ใน src แต่อยู่ใน public โฟลเดอร์นี้เป็นโฟลเดอร์พิเศษที่ Next.JS จะนำไปวางข้างๆไฟล์ homepage ให้หลังจากเรากด build เว็บเราแล้ว เพราะฉะนั้น ถ้าข้างในมีโฟลเดอร์ cards อยู่ อยากแสดงภาพไหนจากในนั้นก็อ้างถึงมันด้วย URL /cards/ชื่อภาพ.png แบบนี้ได้