ผลงาน
ผลงานทั้งหมด
Design to Deploy Cloud POS
Design to Deploy Cloud POSคือเว็บแอปพลิเคชันที่สร้างด้วย Next.js จำลองระบบขายหน้าร้าน (POS) บนคลาวด์แบบครบวงจร เหมาะสำหรับธุรกิจร้านกาแฟและร้านอาหารที่มีหลายสาขาหรือธุรกิจ SME ค้าขายPOS Terminal หน้าขายหน้าขายหลัก แบ่งซ้าย-ขวา ฝั่งซ้ายคือพื้นที่สินค้า — มีช่องค้นหา (พิมพ์หรือสแกนบาร์โค้ด), filter chip หมวดหมู่ และตารางสินค้าแบบ responsive พร้อมรูปภาพ, ราคา, SKU และ badge จำนวนคงเหลือ กดสินค้าเพื่อเพิ่มเข้าตะกร้า ฝั่งขวาคือตะกร้า แสดงรายการพร้อมปุ่ม +/− และลบทีละชิ้น ด้านล่างตะกร้ามี summary ยอดรวม, ส่วนลด (เปิด modal เลือก %), VAT 7% และยอดสุทธิ บริเวณปุ่มแอ็กชันมีสามปุ่มรอง — เลือกสมาชิก, พักบิล, ดูบิลพัก — และปุ่ม "ชำระเงิน" เต็มแถบพร้อมยอดรวม กดชำระเงินจะเปิด modal สี่ช่องทาง: เงินสด (มี chip เงินทอนด่วนและคำนวณเงินทอน), QR PromptPay, บัตรเครดิต และโอนเงิน บนมือถือ (≤ 768 px) ตะกร้าซ่อนไว้และแสดงเป็นแถบล่างแบบ sticky มี badge จำนวนสินค้าและปุ่มชำระเงิน กดแล้ว drawer จะ slide ขึ้นมาจากล่างDashboardหน้าภาพรวมหลักของสาขาที่เลือกอยู่ แบ่งเป็นสองแถว KPI — แถวแรกแสดงยอดขายวันนี้, จำนวนบิล, ยอดเฉลี่ยต่อบิล และจำนวนสาขาที่เปิดกะ แถวที่สองแสดงส่วนลดรวม, VAT ที่เก็บได้, ลูกค้าใหม่ และสินค้าใกล้หมด ถัดมาคือ panel เปรียบเทียบประสิทธิภาพทุกสาขาพร้อม progress bar และ spark chart จากนั้นเป็นกราฟคู่ — ยอดขาย 7 วันย้อนหลัง (area chart) และยอดขายรายชั่วโมงวันนี้ (bar chart) ด้านล่างสุดคือตารางบิลล่าสุดแบบ pagination และ donut chart สัดส่วนช่องทางชำระเงิน มีปุ่มรีเฟรชและส่งรายงานทางอีเมลที่ headerBranch Management จัดการสาขาหน้าสำหรับติดตามและบริหารจัดการทุกสาขา KPI 4 กล่องบนสุดแสดงยอดขายรวมทุกสาขาวันนี้, จำนวนสาขาที่เปิดกะ, บิลรวม และ % ความคืบหน้าเฉลี่ย ถัดมาเป็น card grid แต่ละสาขา — แสดงชื่อ, จำนวนพนักงาน, สถานะกะ (pill เปิด/ปิดพร้อม pulse animation), ยอดขายวันนี้, จำนวนบิล, badge เตือนสินค้าใกล้หมด, progress bar เป้าหมาย และ spark chart กดที่ card สาขาจะเปิด panel รายละเอียดด้านขวาแสดงที่อยู่, เบอร์โทร, ผู้จัดการ, วันที่เปิดสาขา, พื้นที่ร้าน, จำนวน terminal และ KPI tile สามช่อง (ยอดขาย, พนักงาน, สมาชิก) มีปุ่มเพิ่มสาขาที่ header และแสดงข้อความแจ้งเมื่อถึง limit สาขาของ demoInventory สต๊อกสินค้าติดตามระดับสต๊อกสินค้าของสาขาที่เลือก KPI 4 กล่องแสดงจำนวน SKU ทั้งหมด, มูลค่าสต๊อกรวม, จำนวนสินค้าต่ำกว่าเกณฑ์ (ไฮไลต์แดง) และการย้ายสินค้าระหว่างสาขา ส่วนหลักคือตารางค้นหา/กรองสินค้าทั้งหมด แสดง SKU, ชื่อ, หมวดหมู่, จำนวนคงเหลือ (badge สี — เขียว/เหลือง/แดง), ราคาต่อหน่วย และมูลค่าสต๊อกรวม ด้านข้างตารางมี panel สองกล่อง — รายการสินค้าใกล้หมดและสรุปมูลค่าสต๊อกแยกตามหมวดหมู่ ปุ่ม "เพิ่มสินค้า" เปิด modal ฟอร์มกรอก รูป, ชื่อ, SKU, หมวด, ราคา และสต๊อกเริ่มต้นStaff Management จัดการพนักงานหน้ารายชื่อพนักงานทุกคนในทุกสาขา KPI บนสุดแสดงพนักงานทั้งหมด, ที่ active วันนี้, คะแนนประสิทธิภาพเฉลี่ย และจำนวนที่กำลังเปิดกะอยู่ ตารางหลักแสดงชื่อพร้อม avatar, role badge (แคชเชีย, ซูเปอร์ไวเซอร์, ผู้จัดการ ฯลฯ), สาขาที่สังกัด, สถานะกะ, คะแนน performance และวันที่เริ่มงาน กดแถวพนักงานจะเปิด panel รายละเอียดด้านขวาสามแท็บ: Info (ข้อมูลติดต่อ, ที่อยู่, ผู้ติดต่อฉุกเฉิน), Permissions (toggle สิทธิ์แต่ละอย่าง — ใช้ POS, ยกเลิกบิล, อนุมัติส่วนลด, เข้า backoffice, ดูรายงาน) และ Activity (log การทำรายการล่าสุด) มีปุ่มเพิ่มพนักงานและ export รายชื่อSettingsหน้าตั้งค่าแบบ tab มีหกแท็บตั้งค่าหลัก ชื่อร้าน, ที่อยู่สำนักงานใหญ่, เบอร์โทร, เลขผู้เสียภาษี, อัปโหลดโลโก้, สกุลเงิน, timezone, รูปแบบวันที่, ภาษา และ VATระบบชำระเงิน เปิด/ปิดช่องทางชำระเงิน (เงินสด, QR, บัตร, โอน), ตั้ง PromptPay ID, กฎการปัดเศษและ service chargeอุปกรณ์หน้าร้าน รุ่นเครื่องพิมพ์ใบเสร็จ, ความกว้างกระดาษ, พิมพ์อัตโนมัติ, ลิ้นชักเงินสด, port สแกนเนอร์ และพอร์ตจอลูกความปลอดภัย OTP เมื่อสลับสาขา, PIN ผู้จัดการสำหรับส่วนลด, session timeout และการเข้าถึง audit logคลาวด์และซิงก์ ความถี่ซิงก์ข้อมูลระหว่างสาขา, schedule backup และระยะเวลาเก็บข้อมูลIntegration เชื่อมต่อ LINE OA (ส่งใบเสร็จ/โปรโมชัน), export ข้อมูลไปโปรแกรมบัญชี, webhook Delivery platform (Grab, Foodpanda, LINE MAN) และจัดการ API Key สำหรับ custom integrationClick here to visit https://designtodeploy-pos-mockup.vercel.app/ Tech Stack Framework & Runtime - Next.js 16.2.6 (App Router) - React 19.2.4 State Management - Zustand 5.0.13 Styling - Tailwind CSS v4 Language - TypeScript
Apple Music clone
Apple Music cloneโปรเจกต์นี้คือเว็บแอปพลิเคชันสำหรับฟังเพลงที่ได้รับแรงบันดาลใจจาก Apple Music พัฒนาด้วย React 19 และเชื่อมต่อกับ iTunes Search API เพื่อดึงข้อมูลเพลงและมิวสิกวิดีโอมาแสดงผล แอปพลิเคชันมีดีไซน์ที่ทันสมัย รองรับการใช้งานทุกหน้าจอ (Responsive) โดยใช้ Tailwind CSS ในการตกแต่ง และมีแอนิเมชันที่ลื่นไหลจาก Framer Motion.Key Featuresระบบค้นหาที่ครบถ้วน สามารถค้นหาเพลง ศิลปิน และวิดีโอ หรือเลือกดูตามหมวดหมู่แนวเพลงต่าง ๆ ได้เครื่องเล่นเพลงขั้นสูง ระบบควบคุมการเล่นเพลงที่สมบูรณ์ (เล่น/หยุด, เลื่อนเวลา, ปรับระดับเสียง, สุ่มเพลง, เล่นซ้ำ) และรองรับปุ่มลัด (Keyboard Shortcuts).ระบบสมาชิก เชื่อมต่อกับ Firebase Auth เพื่อให้ผู้ใช้เข้าสู่ระบบผ่าน Google เพื่อเข้าถึงฟีเจอร์ส่วนตัวการจัดการข้อมูลส่วนตัว มีระบบบันทึก "เพลงที่ชอบ" (Favorites), "เพลย์ลิสต์" (Playlists) และ "ประวัติการฟัง" (History) โดยบันทึกข้อมูลไว้ในเครื่องผู้ใช้ (LocalStorage)ดีไซน์ที่สวยงาม มีเอฟเฟกต์ Ambient Glow (แสงฟุ้ง) ที่เปลี่ยนสีตามหน้าปกเพลงโดยอัตโนมัติ พร้อมระบบปรับแต่งธีมสีและโหมดมืด/สว่าง.รองรับทุกอุปกรณ์ ออกแบบมาให้ใช้งานได้ดีทั้งบนคอมพิวเตอร์และมือถือ พร้อมแถบเมนูด้านข้างที่ปรับเปลี่ยนได้ตามขนาดหน้าจอHOME PAGEส่วนไฮไลท์ (Hero Section) แสดงศิลปินและอัลบั้มแนะนำด้วยแบนเนอร์ขนาดใหญ่ที่สวยงาม พร้อมพื้นหลังที่เปลี่ยนตามหน้าปกเพลงเนื้อหาแบบไดนามิก สลับการแสดงผลระหว่าง "เพลงฮิตติดเทรนด์" และ "ผลการค้นหา" ตามที่ผู้ใช้พิมพ์การจัดวางสองรูปแบบ ผสมผสานการแสดงผลแบบ ตาราง (Grid) สำหรับ 10 อันดับแรก และแบบ รายการ (List) พร้อมระบบแบ่งหน้าสำหรับดูเพลงทั้งหมดทางลัดอัจฉริยะ ผู้ใช้สามารถกดเล่นเพลง, ติดตามศิลปิน หรือกดดูรายละเอียดบน iTunes Store ได้ทันทีMUSIC MODEโหมดเพลง (Music Mode) เป็นโหมดเริ่มต้นที่เน้นการฟังเพลง มีเอฟเฟกต์ Ambient Glow (แสงฟุ้ง) ที่เปลี่ยนสีตามหน้าปกและจัดวางการ์ดขนาดพอดี (5 คอลัมน์)VIDEO MODEโหมดวิดีโอ (Video Mode) หน้าจอที่ออกแบบมาเพื่อมิวสิกวิดีโอโดยเฉพาะ ใช้การ์ดขนาดใหญ่ขึ้น (3-4 คอลัมน์) เพื่อให้เห็นภาพชัดเจน และสามารถเล่นวิดีโอได้ในแผงด้านขวาหรือหน้าต่างขยายระบบควบคุมร่วมกัน ทั้งสองโหมดใช้แถบควบคุม (Player Bar) เดียวกัน แต่หน้าจอจะปรับเปลี่ยนเพื่อแสดงผลเป็นตัวเล่นเสียงหรือตัวเล่นวิดีโอโดยอัตโนมัติSETTINGSระบบปรับแต่งธีม มีโทนสีให้เลือกถึง 7 สีหลัก (ม่วง, ชมพู, ฟ้า, เขียว, ส้ม, แดง และสีเริ่มต้น)สลับโหมดการแสดงผล สามารถเลือกใช้ โหมดมืด (Dark) หรือ โหมดสว่าง (Light) ซึ่งจะเปลี่ยนดีไซน์แบบกระจก (Glassmorphism) ให้เหมาะสมตามโหมดการควบคุมข้อมูล ผู้ใช้สามารถกำหนด จำนวนผลลัพธ์ (Track Limit) ต่อการค้นหาได้ เพื่อช่วยเรื่องความเร็วในการโหลดระบบจดจำค่า ทุกการตั้งค่าจะถูกบันทึกไว้ใน LocalStorage ทำให้แอปจดจำสไตล์ที่คุณชอบได้ทุกครั้งที่กลับมาใช้งานHISTORYระบบบันทึกอัตโนมัติ ทุกเพลงที่ถูกกดเล่นจะถูกเพิ่มเข้าไปในรายการประวัติการฟังโดยอัตโนมัติการจัดการข้อมูลอัจฉริยะ บันทึกเพลงล่าสุดได้สูงสุด 50 เพลง โดยเพลงเก่าจะถูกลบออกอัตโนมัติเมื่อเกินจำนวน เพื่อให้รายการทันสมัยอยู่เสมอเข้าถึงง่าย มีหน้า History แยกเฉพาะเพื่อให้ผู้ใช้กลับไปฟังเพลงที่เพิ่งค้นพบได้อย่างรวดเร็วความเป็นส่วนตัว ข้อมูลถูกเก็บไว้ในเครื่องของผู้ใช้ (Local) ทำให้โหลดข้อมูลได้ทันทีและมีความเป็นส่วนตัวสูงFAVORITES & PLAYLISTSเพลงที่ชอบ (Favorites) ระบบกดหัวใจเพื่อบันทึกเพลงที่ชอบไว้ในรายการโปรดได้ในคลิกเดียวเพลย์ลิสต์ส่วนตัว สามารถสร้างเพลย์ลิสต์ ตั้งชื่อ และจัดการรายการเพลงในแบบของตัวเองได้ระบบรักษาความปลอดภัย ฟีเจอร์เหล่านี้ต้อง เข้าสู่ระบบผ่าน Google (Firebase) เพื่อเข้าถึงข้อมูลส่วนบุคคลของคุณโดยเฉพาะของคุณเท่านั้นTechnical StackFrontend React 19, React Router 7, HeroUI (UI Components)Styling Tailwind CSS, Framer Motion (Animations)Backend/API iTunes Search API (Data), Firebase Authentication (Login)Icons Lucide React
GemiTrans AI Translator
GemiTrans AI TranslatorการทำงานหลักGemiTrans เป็นเว็บแอปพลิเคชันแปลภาษาที่ขับเคลื่อนด้วย AI (Google Gemini) ออกแบบมาเพื่อการแปลแบบเรียลไทม์ที่รองรับการแปลหลายภาษาพร้อมกันในหน้าจอเดียว (สูงสุด 3 รูปแบบการแปล) จุดเด่นคือผู้ใช้สามารถปรับระดับ ความสุภาพ (Formality) และ วัตถุประสงค์ (Objective) ของคำแปลได้เพื่อให้ได้ผลลัพธ์ที่แม่นยำตามบริบทการใช้งานการแก้ปัญหาความรวดเร็วและประสิทธิภาพ ลดความยุ่งยากในการสลับหน้าจอไปมาเพื่อแปลหลายภาษา โดยสามารถเปรียบเทียบผลลัพธ์แบบ Side-by-Side ได้ทันทีในคลิกเดียวบริบทและโทนของภาษา แก้ปัญหาคำแปลที่ "แข็ง" หรือไม่ตรงกับกาลเทศะ โดยการปรับระดับความสุภาพ (0-100) และระบุวัตถุประสงค์ (เช่น แปลแบบทั่วไป, เชิงเทคนิค, หรือเชิงกวี)การจัดเก็บข้อมูลอย่างเป็นระบบ มีระบบ Notebook (เครื่องมือเขียนโน้ต) และ ประวัติการแปล (History) ช่วยให้ผู้ใช้บันทึกและจัดการข้อมูลการแปลที่สำคัญได้ง่ายขึ้นการจัดการทรัพยากร มีระบบ Quota รายวัน (Token-based) เพื่อควบคุมปริมาณการใช้งาน AI และบริหารจัดการต้นทุนอย่างเป็นระบบLanding pageหน้าแรกที่ถูกออกแบบมาเพื่อนำเสนอฟีเจอร์เด่นของแอปพลิเคชัน มีหน้าตาที่ทันสมัยและใช้แอนิเมชัน (Framer Motion) เพื่อสร้างความน่าสนใจ โดยจะแนะนำจุดเด่นอย่างการแปลด้วย AI และการแปลหลายภาษาพร้อมกัน เพื่อกระตุ้นให้ผู้ใช้ใหม่เริ่มต้นใช้งานหรือศึกษาข้อมูลราคาและสิทธิประโยชน์Log in & sign inระบบความปลอดภัยและการยืนยันตัวตนที่ทำงานผ่าน Firebase Authentication ผู้ใช้สามารถสมัครสมาชิกหรือเข้าสู่ระบบเพื่อเชื่อมต่อข้อมูลประวัติการแปล, คำที่บันทึกไว้ และสมุดโน้ต ให้เข้าถึงได้จากทุกอุปกรณ์ ระบบรองรับการตรวจสอบข้อมูลและการแจ้งเตือนข้อผิดพลาดที่ใช้งานง่ายMain productหัวใจหลักของแอปพลิเคชัน เป็นพื้นที่ทำงานที่ผู้ใช้สามารถพิมพ์ข้อความเพื่อแปลแบบเรียลไทม์ โดยมีฟีเจอร์สำคัญคือMulti-Card UI แปลข้อความเป็นหลายภาษาพร้อมกันได้สูงสุด 3 ภาษาCustomization ปรับระดับความสุภาพและกำหนดวัตถุประสงค์การแปลผ่าน AIDrag & Drop จัดลำดับการ์ดคำแปลใหม่ได้ตามต้องการเพื่อการเปรียบเทียบที่สะดวกขึ้นAction Tools คัดลอกข้อความ, ฟังเสียงอ่าน (TTS), หรือส่งข้อมูลไปยัง Notebook ได้ทันทีSettingศูนย์รวมการตั้งค่าส่วนบุคคลที่ช่วยให้ผู้ใช้จัดการการใช้งานได้ตามต้องการ เช่น การตั้งค่า ภาษาเริ่มต้น ที่ใช้บ่อย, การตรวจสอบ โควตาการใช้งานรายวัน (Token) ที่เหลืออยู่ (จัดการโดย Firebase) และการอัปเดตข้อมูลโปรไฟล์ เพื่อให้แอปพลิเคชันพร้อมใช้งานตามสไตล์ของแต่ละคนNotebookเครื่องมือช่วยจัดการข้อมูลที่มีระบบ Rich Text Editor (Tiptap) ผู้ใช้สามารถสร้าง แก้ไข และจัดการโน้ตของตนเองได้อย่างอิสระ โดยสามารถดึงผลการแปลจากหน้าหลักมาบันทึกต่อท้ายในโน้ตได้ทันที เหมาะสำหรับผู้ที่ต้องการรวบรวมข้อมูลหรือจดบันทึกเพื่อการศึกษาและการทำงานอย่างเป็นระบบClick here to visit https://gemitrans-d2d.vercel.appTech StackFrontend React 19, Tailwind CSS, HeroUI (Component Library), Framer Motion (Animations), Tiptap (Rich Text Editor), dnd-kit (Drag-and-Drop UI).Backend Node.js (Serverless API), Google Generative AI (Gemini 1.5 Flash / 3.1 Flash-Lite).Infrastructure Firebase (Authentication, Firestore Database, Hosting).
CHAT AI DEMO
CHAT AI DEMOD2D-AI Chat คือแพลตฟอร์ม AI Chat ที่พัฒนาโดยใช้ Next.js 16 (App Router) และ TypeScript โดยเน้นสร้างประสบการณ์การใช้งานที่พรีเมียมและจัดการข้อมูลได้อย่างเป็นระบบระบบห้องแชท (Persistent Sessions) รองรับการสร้างหลายห้องแชทพร้อมกัน โดยข้อมูลจะถูกเก็บไว้ในเครื่องผ่าน Zustand ทำให้ประวัติการสนทนาไม่หายไปเมื่อปิดเบราว์เซอร์.การจัดการโปรเจกต์ ผู้ใช้สามารถจัดกลุ่มห้องแชทแยกตามโปรเจกต์ (Projects) เพื่อความเป็นระเบียบในการทำงาน.ดีไซน์ที่สวยงาม ใช้ HeroUI และ Tailwind CSS 4 ในการสร้างหน้าจอที่ทันสมัย รองรับการแสดงผลทุกอุปกรณ์ (Responsive) และมีอนิเมชั่นที่นุ่มนวลจาก Framer Motionฟีเจอร์ครบครัน รองรับการแก้ไขข้อความที่ส่งไปแล้ว (และตัดบทสนทนาต่อจากนั้น), การแนบไฟล์, การจัดการโปรไฟล์ผู้ใช้ และหน้าตั้งค่าที่ละเอียดมาก (ปรับธีม, การแจ้งเตือน, ความปลอดภัย)โครงสร้างแอปฯ มีระบบสมาชิก (Login/Register) และหน้าเฉพาะทางอื่นๆ เช่น ส่วนจัดการเอกสาร (Documents), คลังภาพ (Gallery), และหน้าราคา (Pricing)Main pageหน้าแรกเมื่อยังไม่มีการเริ่มแชท จะแสดงคำทักทายตามช่วงเวลา (เช่น "Good morning") มีช่องป้อนคำสั่ง (Chat Input) ตรงกลางที่โดดเด่น พร้อมด้วย "Quick Prompts" หรือคำแนะนำด่วนเพื่อช่วยให้ผู้ใช้เริ่มบทสนทนาได้ทันที ส่วนแถบด้านบนจะแสดงชื่อว่า "New Chat"Chat pageเมื่อเริ่มการสนทนา หน้าจอจะเปลี่ยนเป็นรูปแบบเธรดการแชท (Chat Thread) ที่เลื่อนดูได้โดยแสดงข้อความโต้ตอบระหว่างผู้ใช้และ AI ช่องป้อนคำสั่งจะถูกปรับให้เล็กลง (Compact) และตรึงไว้ที่ด้านล่าง ผู้ใช้สามารถแก้ไขข้อความที่เคยส่งไปแล้วได้ ซึ่งระบบจะตัดประวัติการแชทที่ตามมาออกเพื่อให้การสนทนาต่อเนื่องอย่างสมเหตุสมผลLogin pageหน้าเข้าสู่ระบบที่ออกแบบมาอย่างทันสมัยและปลอดภัย ประกอบด้วยช่องกรอกอีเมลและรหัสผ่าน (ที่สามารถเปิด-ปิดการมองเห็นได้) มีลิงก์สำหรับลืมรหัสผ่าน และปุ่ม "Sign In" สีไล่เฉดที่โดดเด่น พร้อมทั้งมีทางเลือกให้ผู้ใช้ใหม่กดไปหน้าสมัครสมาชิกได้ง่ายPricing pageหน้าแสดงแพ็กเกจราคาที่โปร่งใส แบ่งเป็น 3 ระดับ: Basic (ฟรี), Pro (คุ้มค่าที่สุด) และ Enterprise (สำหรับองค์กร) แต่ละบัตรจะระบุฟีเจอร์ที่ได้รับอย่างชัดเจน โดยแผน "Pro" จะถูกเน้นด้วยขอบสีไล่เฉดที่เคลื่อนไหวได้และติดป้าย "Best Value" เพื่อดึงดูดความสนใจNew Project managementส่วนจัดการพื้นที่ทำงานสำหรับจัดระเบียบการแชท ผู้ใช้สามารถสร้าง "Project" ใหม่ผ่านหน้าต่าง Modal และจะแสดงผลเป็นตาราง (Grid) ส่วนนี้ช่วยให้ผู้ใช้จัดกลุ่มการสนทนาที่เกี่ยวข้องกันไว้ในโฟลเดอร์เดียวกัน ช่วยให้การจัดการหลายงานหรือหลายหัวข้อทำได้ง่ายขึ้นอย่างเป็นระบบClick here to visit https://d2d-ai-chat-demo.vercel.app/Technical StackFramework Next.js 16 (App Router)Language TypeScriptStyling Tailwind CSS 4 & HeroUIState Management Zustand (with Persistence)Animations Framer MotionIcons React Icons
Contact us
Location
Bangkok, Thailand
2024 — Present
Office hours
จันทร์ – ศุกร์: 9:00 – 18:00
09 AM — 06 PM
Drop us a line
design2deploy.work@gmail.com