หน้าแรก/ผลงาน/Design Kit - Component Marketplace & Export Engine
Full-stack⭐ Featured

Design Kit - Component Marketplace & Export Engine

Design Kit คือแพลตฟอร์ม Component Marketplace ที่รวม UI ชิ้นงานระดับพรีเมียมจากครีเอเตอร์ทั่วโลก ให้ดีไซเนอร์อัปโหลด/ตั้งราคา และให้นักพัฒนา Browse → Preview → Export ไป HTML, React, Next.js ได้ทันที พร้อมระบบ Dual Layout (Modern & Retro), Presenter Pattern, Supabase-ready Data Layer, และ Export Engine ที่ต่อยอดได้หลายสไตล์ชี้ชัดตามหลัก Clean Architecture + Atomic Design

ลูกค้า
Design Kit
วันที่
มิถุนายน 2568
หมวดหมู่
Full-stack
Views
0
🚀
Design Kit - Component Marketplace & Export Engine thumbnail

ฟีเจอร์หลัก

Component Marketplace Core

ระบบจัดการ Component เต็มรูปแบบ (metadata, preview, tags, props/variants) พร้อมหมวดหมู่/แท็ก ค้นหา และ featured listing สำหรับทีม dev, designer, startup

Design-to-Code Export Engine

เลือก platform (HTML, React, Next.js) + style system (CSS, Tailwind, CSS Module) สร้างโค้ดทันทีจาก template-based generator พร้อมแผนขยาย Vue/Svelte/Flutter

Creator Economy Workflow

ครีเอเตอร์สร้าง component, ตั้งราคา/แจกฟรี, ดูสถิติ download, และเตรียมเชื่อม Stripe + Supabase Profiles เพื่อรายได้ recurring ของ community

Dual Layout Experience

MainLayout สมัยใหม่ + RetroLayout IE5 ที่สลับได้ real-time ผ่าน Zustand + next-themes, ครบทั้ง Header/Footer/Widget, animation จาก React Spring และ retro CSS assets

Marketplace & Licensing

รองรับ Free/One-time/Bundle ราคาพร้อม License (Personal/Commercial), Cart/Checkout flow, Purchase history และระบบ access download/export รายผู้ใช้

Clean Architecture + Presenter Pattern

แบ่ง domain / infrastructure / presentation, presenter & mock repository, server/client hooks, Atomic Design components, Supabase SSR client, พร้อม analytics stats (components, creators, downloads)

แกลเลอรี่

📸
Design Kit - Component Marketplace & Export Engine screenshot 1
📸
Design Kit - Component Marketplace & Export Engine screenshot 2
📸
Design Kit - Component Marketplace & Export Engine screenshot 3
📸
Design Kit - Component Marketplace & Export Engine screenshot 4

เทคโนโลยี

Next.js 16TypeScriptReact 19Tailwind CSS 4ZustandSupabaseReact Hook FormZodnext-themesReact SpringLocalForageAxiosHTML2Canvas

สนใจทำโปรเจคแบบนี้?

ปรึกษาฟรี! เราพร้อมช่วยคุณสร้างโซลูชันที่ตอบโจทย์

รับคำปรึกษา