Front-end Developer Case Study - Kerry

Evaluation Criteria

Explore

บททดสอบ Front-end Development

บททดสอบ

⁠

⁠

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.