ผลงาน
ผลงานทั้งหมด
Demo shop Shirt with custom
Demo shop Shirt with customเว็บไซต์นี้สื่อภาพลักษณ์ของโรงงาน/แบรนด์ที่รับผลิตเสื้อยูนิฟอร์ม โดยมีทั้งส่วนขายสินค้า, คอนเทนต์ให้ความรู้, และเครื่องมือออกแบบเสื้อในเว็บเดียวจุดเด่นของเดโมคือ visual style โทน premium, ระบบเลือกสินค้าแบบ category-based, และหน้า Custom Design ที่ให้ผู้ใช้เปลี่ยนผ้า สี ทรง ปก แขน กระเป๋า โลโก้ และข้อความได้Home Pageหน้าแรกเป็น landing page หลักของแบรนด์ ใช้เพื่อแนะนำบริการ “ออกแบบเสื้อยูนิฟอร์มแบบ Real-Time” พร้อม CTA ไปยังหน้า Design และ Shopเนื้อหาหลักประกอบด้วย hero section, จุดเด่นของบริการ, หมวดสินค้ายอดนิยม, free services, ขั้นตอนการใช้งาน, เหตุผลที่ควรเลือกแบรนด์, CTA section, บทความล่าสุด, และรีวิวลูกค้าAbout Pageหน้า About เป็นหน้าที่อธิบายตัวตน แนวคิด และจุดแข็งของแบรนด์ JustUchoice โดยวาง positioning ว่าเป็นผู้ช่วยให้การสั่งทำเสื้อยูนิฟอร์ม “ง่ายและสนุก” มากขึ้นส่วน hero ของหน้าจะสื่อว่าแบรนด์ช่วยให้องค์กรสร้างเสื้อทีมที่สะท้อนตัวตนได้ โดยไม่เสียเวลานานหรือมีต้นทุนเกินจำเป็น พร้อม bullet points เรื่องโรงงานในประเทศ, ทีมดีไซน์ช่วยฟรี, ระบบติดตามออนไลน์, และรับประกันคุณภาพ 60 วันกลางหน้ามี accordion section สำหรับอธิบายบริการหลัก เช่น ระบบออกแบบที่ใช้งานง่าย, การผลิตโดยโรงงานของบริษัทเอง, เทคนิคงานพิมพ์หลายรูปแบบ, และระบบ ERP/Order Tracking ที่ติดตามงานได้ทุกขั้นตอนด้านล่างมี service grid แสดง 9 บริการหลักของแบรนด์ เช่น Faulty-Proof, Free Sample, Overage Protection, 60 Days Warranty, Corporate Onsite, Online Status Check, Corporate Stylist, Instant Price Check, และ Online Designerหน้า About ปิดท้ายด้วย CTA ชวนผู้ใช้ไปเริ่มออกแบบเสื้อหรือปรึกษาทีมงาน เพื่อพาเข้าสู่ conversion flow ของเว็บShop Pageหน้า Shop เป็นหน้ารวมหมวดสินค้าทั้งหมด เช่น เสื้อโปโล เสื้อยืด เสื้อเชิ้ต ยูนิฟอร์ม แจ็กเก็ต ผ้ากันเปื้อน หมวก และถุงผ้าแต่ละการ์ดจะแสดงชื่อหมวด จำนวนสินค้า ราคาเริ่มต้น และขั้นต่ำในการสั่งซื้อ เพื่อพาผู้ใช้ไปยังหน้ารายละเอียดของหมวดนั้นShop Detail Pageหน้า Shop Detail คือหน้ารายละเอียดของแต่ละหมวดสินค้า เช่น /shop/polo โดยเน้นการเลือก Tier ผ้า ของหมวดนั้นหน้าแสดง hero ของหมวดสินค้า, ข้อความแนะนำ, badge ของลักษณะการใช้งาน, และรายการ tier แบบ accordion ที่แสดงชื่อผ้า ส่วนผสม คุณสมบัติ ราคา และขั้นต่ำ พร้อมปุ่มไปหน้าออกแบบ.Blog Pageหน้า Blog เป็นหน้ารวมบทความ ให้ผู้ใช้ดูความรู้และไอเดียเกี่ยวกับการออกแบบเสื้อ การเลือกผ้า เทคนิคการพิมพ์ และมุมมองทางธุรกิจมีระบบกรองตามหมวดบทความ เช่น ข่าวสาร, แนะนำสินค้า, ไอเดียดีไซน์, เคล็ดลับธุรกิจ, และเทคนิคการพิมพ์Blog Detail Pageหน้า Blog Detail ใช้แสดงบทความแบบเต็ม พร้อมหัวข้อ, excerpt, ผู้เขียน, วันที่, เวลาอ่าน, ภาพปก, เนื้อหาบทความ, และปุ่มแชร์ด้านข้างมี sidebar สำหรับชวนไปหน้าออกแบบเสื้อ, แสดงบทความยอดนิยม, และแสดงหมวดบทความอื่น รวมถึงมีส่วน “บทความที่เกี่ยวข้อง” ด้านล่างContact Us Pageหน้า Contact Us เป็นหน้าติดต่อทีมงาน แสดงข้อมูลที่อยู่ เบอร์โทร LINE อีเมล เวลาทำการ และมี mock map/showroom sectionผู้ใช้สามารถกรอกฟอร์มชื่อ นามสกุล อีเมล หัวข้อ และข้อความ เพื่อส่งคำถามหรือสอบถามราคาเบื้องต้นได้Custom Design Pageหน้า Custom Design เป็นหน้าหลักของระบบ designer ให้ผู้ใช้ปรับแต่งเสื้อแบบ interactive และเห็น preview ทันทีผู้ใช้สามารถเลือกประเภทสินค้า, เนื้อผ้า, ทรงเสื้อ, ปก, สาบ, แขน, กระเป๋า, โซนสี, อัปโหลดโลโก้, เพิ่มข้อความ, จัดตำแหน่ง overlay, ดูรหัสแบบ, คัดลอกลิงก์, ดูราคา/ตัว, ปรับจำนวน, ดูส่วนลดตามจำนวน, และกดบันทึกหรือขอราคาClick here to visit https://d2d-demo-shop-shirt.vercel.app
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
Demo Luxury Real Estate by D2D
Demo Luxury Real Estate by D2Dเป็นเว็บไซต์แลนดิ้งเพจอสังหาริมทรัพย์แบบหน้าเดียว สำหรับโครงการบ้านระดับพรีเมียม ใช้เพื่อสื่อสารแบรนด์ นำเสนอแบบบ้าน บรรยากาศโครงการ จุดเด่นด้านทำเล โปรโมชั่น และการนัดชมโครงการพร้อมระบบเก็บรายชื่อลูกค้าและหน้าแอดมินเบื้องต้นHeroส่วนเปิดหน้าเว็บที่สื่อภาพลักษณ์หลักของโครงการด้วยภาพลักชัวรี จุดขายสำคัญ ปุ่มกระตุ้นการตัดสินใจ และฟอร์มลงทะเบียนรับสิทธิพิเศษStatBar & HighlightSectionแถบสถิติที่ช่วยเพิ่มความน่าเชื่อถือของโครงการ เช่น ยอดจอง รางวัล จำนวนครอบครัวลูกบ้าน และระดับความปลอดภัยส่วนจุดเด่นของโครงการ เน้นคุณค่าด้านการอยู่อาศัยและฟังก์ชัน เช่น สมาร์ทโฮม ระบบความปลอดภัย รองรับรถ EV และสิ่งอำนวยความสะดวกระดับพรีเมียมMortgageCalculatorเครื่องคำนวณสินเชื่อเบื้องต้นแบบโต้ตอบ ช่วยให้ผู้ใช้ประเมินราคาบ้าน เงินดาวน์ ดอกเบี้ย ระยะเวลากู้ และค่างวดรายเดือนUnitsSectionส่วนแสดงผังโครงการและแบบบ้านที่มีให้เลือก พร้อมรายละเอียดตำแหน่งทางการตลาด ขนาดบ้าน จำนวนห้องนอน/ห้องน้ำ และราคาเริ่มต้นGallerySectionแกลเลอรีภาพที่ใช้โชว์บรรยากาศของพื้นที่สำคัญในโครงการ เช่น ห้องนั่งเล่น พื้นที่ทานอาหาร คลับเฮ้าส์ และห้องนอนใหญ่LocationSectionส่วนที่สื่อจุดเด่นด้านทำเลและการเดินทาง โดยอธิบายสถานที่สำคัญใกล้เคียงและมีแผนที่ฝังในหน้าเว็บAppointmentSectionส่วนสำหรับนัดเข้าชมโครงการ ลูกค้าสามารถกรอกข้อมูลติดต่อ วันที่ เวลา และจำนวนผู้เข้าชมเพื่อจองนัดหมายได้Promotion Sectionส่วนโปรโมชั่นที่เน้นข้อเสนอแบบจำกัดเวลาและสิทธิพิเศษสำหรับการจอง เพื่อเร่งการตัดสินใจของลูกค้าFooterส่วนท้ายเว็บไซต์ที่สรุปแบรนด์อีกครั้ง พร้อมข้อมูลติดต่อ เวลาเปิดทำการ ช่องทางโซเชียล และช่องรับข่าวสารทางอีเมลClick here to visit https://d2d-real-estate-luxury-demo.vercel.app/Tech stackFrontend: React 19 + TypeScriptBuild tool: Vite 6Styling: Tailwind CSS 4Animation: Framer Motion และ motionIcons: lucide-reactBackend entry/server: Express ผ่าน server.tsDatabase / Auth: Firebase โดยใช้ Firestore และ Firebase AuthForm/data handling: ฟอร์มใน React state โดย submit เข้า FirestoreUtility libs: clsx, tailwind-merge, date-fns
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
Demo The Grande Residenc by D2D
Demo The Grande Residenc by D2DThe Grande Residence คือเดโมเว็บไซต์แนว landing page ระดับพรีเมียมสำหรับโครงการอสังหาริมทรัพย์ บ้านจัดสรร และแคมเปญการตลาดด้านที่อยู่อาศัย โดยมีเป้าหมายเพื่อสื่อสารภาพลักษณ์แบรนด์ นำเสนอจุดเด่นของโครงการ เก็บข้อมูลผู้สนใจ รองรับการนัดหมายเข้าชม และมีมุมมอง CRM แบบเบื้องต้นสำหรับเดโมหรือการใช้งานฝั่งขายโปรเจกต์นี้เป็นเว็บไซต์การตลาดอสังหาริมทรัพย์แบบหน้าเดียว ที่ออกแบบมาเพื่อจำลองประสบการณ์ของแคมเปญบ้านหรือโครงการที่อยู่อาศัยสไตล์ modern luxury โดยรวมการเล่าเรื่องแบรนด์ การนำเสนอภาพลักษณ์ การเก็บ lead การนัดหมายเข้าชม และแดชบอร์ดแอดมินแบบง่ายไว้ในแอป frontend เดียว เหมาะสำหรับใช้เป็นตัวอย่างงาน พรอตोटाइป์ หรือฐานตั้งต้นสำหรับงานเว็บโครงการจริง.Hero & Lead FormHero section คือส่วนเปิดการขายหลักของหน้า ใช้สื่อสารตัวตนของโครงการ จุดขายสำคัญ ราคาเริ่มต้น ความสะดวกของทำเล โปรโมชั่น และปุ่มกระตุ้นการลงทะเบียน โดยมีฟอร์มเก็บข้อมูลผู้สนใจวางอยู่ในส่วนนี้ทันทีเพื่อเพิ่มโอกาสในการเปลี่ยนผู้ชมเป็น leadส่วนนี้ใช้เก็บข้อมูลผู้สนใจ เช่น ชื่อ เบอร์โทร และช่วงเวลาที่สะดวกให้ติดต่อกลับ ออกแบบมาเพื่อให้กรอกได้เร็วและรองรับการบันทึกทั้งไปยัง Firestore และ local fallbackHighlightsส่วน Highlights ใช้นำเสนอจุดเด่นหลักของโครงการ เช่น การเดินทาง ความปลอดภัย พื้นที่สีเขียว หรือระบบ smart home เพื่อสื่อสารคุณค่าด้านการอยู่อาศัยที่มากกว่าสเปกของบ้านUnit Cardsส่วน Unit Cards ใช้นำเสนอแบบบ้านหรือยูนิตที่มีในโครงการ โดยแต่ละการ์ดสรุปข้อมูลสำคัญ เช่น ขนาด จำนวนห้อง ราคา และภาพลักษณ์ของแบบบ้าน เพื่อให้ผู้ชมเปรียบเทียบตัวเลือกได้ง่ายGalleryส่วน Gallery ใช้แสดงภาพโครงการที่คัดมาเพื่อเสริมภาพลักษณ์ความพรีเมียมของแบรนด์ ช่วยสร้างอารมณ์ร่วมและทำให้ผู้ชมเห็นภาพประสบการณ์การอยู่อาศัยได้ชัดขึ้นLocationส่วน Location ใช้อธิบายตำแหน่งที่ตั้งของโครงการและเหตุผลที่ทำเลนั้นมีคุณค่า โดยมักเชื่อมกับประเด็นเรื่องการเดินทาง การเข้าถึงเมือง โรงเรียน หรือแหล่งไลฟ์สไตล์Mortgage Calculatorส่วน Mortgage Calculator ช่วยให้ผู้ชมประเมินความสามารถในการซื้อหรือค่างวดโดยประมาณ ทำให้หน้าเว็บมีประโยชน์เชิงใช้งานจริงมากกว่าการเป็นโบรชัวร์แบบนิ่งFooterFooter เป็นส่วนปิดท้ายของหน้า ใช้รองรับข้อมูลแบรนด์และข้อมูลประกอบอื่น ๆ ช่วยให้โครงสร้าง landing page สมบูรณ์และเป็นจุดอ้างอิงสุดท้ายก่อนผู้ใช้จะออกจากหน้าหรือทำ conversionClick here to visit https://d2d-real-estate-demo.vercel.app/Tech stackFrontend: React 19 + TypeScript + Vite 6 package.json src/main.tsxStyling: Tailwind CSS 4 @tailwindcss/vite และ custom theme/fonts src/index.cssAnimation/UI: motion (motion/react) lucide-reactForm/validation: react-hook-form + zod + @hookform/resolversData layer: Firebase Firestore src/lib/firebase.tsFallback persistence: localStorage CRM fallback src/lib/crmStorage.ts
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