Skip to content
Front-end Developer Case Study - Kerry
บททดสอบ Front-end Development
Evaluation Criteria
More
Share
Explore
บททดสอบ Front-end Development

icon picker
บททดสอบ

⁠
Screen Shot 2565-11-14 at 08.35.18.png
⁠
⁠

Challenge Statement

Kerry กําลังย้ายจากโลจิสติกส์ไปสู่ e-commerce ซึ่งโครงการแรกคือการเปิดแบรนด์น้ําผลไม้ใหม่ชื่อ Nolorn ทาง Kerry จึงว่าจ้างคุณเป็นนักพัฒนา front-end (front-end developer) เพื่อพัฒนาเว็บแอปพลิเคชั่น e-commerce
Product Manager ได้มีการจัดเตรียม API ที่คุณสามารถดึงข้อมูลเกี่ยวกับผลิตภัณฑ์ ราคา และ รายละเอียดอื่น ๆ มาใช้งานได้
ขณะนี้ทางทีม UX/UI กำลังยุ่งอยู่กับโปรเจกต์อื่นๆ มากเกินไป จึงได้แค่จัดเตรียมเทมเพลตให้คุณเท่านั้น
Product Manager แนะนําให้คุณใช้เทมเพลตนั้นเป็นจุดเริ่มต้น แต่คุณควรปรับเปลี่ยน เพิ่มคุณสมบัติและการออกแบบของคุณเองเพื่อให้สมบูรณ์แบบมากที่สุด Product Manager ยังแนะนําว่าคุณสามารถ re-design เว็บไซต์ทั้งหมดได้หากคุณต้อง
​API
ใช้ลิงก์นี้เพื่อเข้าถึง API ที่คุณจะใช้ โดยประกอบไปด้วย ผลิตภัณฑ์ ราคา และรายละเอียดอื่นๆ คุณสามารถอ่านได้จากเอกสารได้ที่นี่

Design Specification
นี่คือข้อกำหนดการ design (Design Specification) เป็นไฟล์ Figma
​
⁠
⁠
คุณสามารถดาวน์โหลดไฟล์ที่แก้ไขได้ที่นี่:
Figma
⁠
Nolorn - eCommerce.fig
95.5 MB
⁠
⁠
PSD
⁠
Nolorn - eCommerce-psd.psd
197.2 MB
⁠
⁠

Technical Requirements

โจทย์นี้ต้องการให้คุณใช้เครื่องมือที่นักพัฒนา front-end นิยมใช้มากที่สุด แม้ว่าสุดท้ายแล้วจะขึ้นกับการการตัดสินใจของคุณเกี่ยวกับเทคโนโลยีและ stack ที่คุณเลือกใช้ แต่เราขอแนะนําให้คุณใช้องค์ประกอบดังที่กล่าวด้านล่างนี้ เพื่อเป็นส่วนประกอบของเว็บแอปพลิเคชั่น e-commerce ของคุณ

เว็บแอปพลิเคชันของคุณควรมีคุณสมบัติดังต่อไปนี้:
มีการ Responsive ในขนาดหน้าจอต่าง ๆ รวมถึงในโทรศัพท์มือถือ
เฟรมเวิร์ก front-end ที่ทันสมัย เช่น React, Vue หรืออื่น ๆ
การจัดการสถานะหรือที่เก็บข้อมูลในเครื่องเพื่อจัดการคุณสมบัติของตระกร้าสินค้า
มีการจัดการ API ในกรณีต่าง ๆ
มีการทำ Unit test โดยใช้ Jest

คําแนะนํา
เตรียมพร้อมตลอดเวลา ที่จะตอบคําถามเสมอว่าทําไมคุณถึงเลือกใช้เทคโนโลยีนั้นโดยเฉพาะ ยกตัวอย่างเช่น ทําไมคุณถึงเลือกใช้ Bootstrap แทนที่ Tailwind CSS
แสดงให้เห็นถึงทักษะของคุณ! เราชื่นชอบที่จะเห็นเว็บไซต์ที่สร้างสรรค์และไม่เหมือนใครและเว็บแอปพลิเคชันที่น่าทึ่ง

Feature Requirements

เว็บแอปพลิเคชันของคุณควรมีคุณสมบัติดังต่อไปนี้:
หน้ารายการสินค้าพร้อมตัวกรองหมวดหมู่สินค้า
หน้าข้อมูลผลิตภัณฑ์
ตะกร้าสินค้าและปุ่มชำระเงิน
การแสดงปุ่มชำระเงิน
หน้าชำระเงิน

Optional Requirements

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







Challenge Statement
Technical Requirements
Feature Requirements
Optional Requirements
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.