Portfolio
All Projects
Demo shop Shirt with custom
Demo shop Shirt with customThis website presents a factory-driven custom uniform brand, combining product browsing, educational content, and an in-browser apparel design tool in one experience.The main strengths of the demo are its premium visual direction, category-based product browsing, and the Custom Design page where users can change fabric, color, fit, collar, sleeves, pocket, logos, and text.Home PageThe home page is the main landing page for the brand, introducing the “real-time uniform design” service with strong CTAs leading to the Design and Shop pages.Its main content includes a hero section, service highlights, popular product categories, free services, how-it-works steps, reasons to choose the brand, a CTA block, latest articles, and customer reviews.About PageThe About page explains the identity, mindset, and strengths of the JustUchoice brand, positioning it as a service that makes custom uniform ordering easier and more enjoyable.The hero section communicates that the brand helps organizations create team apparel that reflects their identity without long delays or unnecessary cost, supported by bullet points about local production, free design assistance, online tracking, and a 60-day quality warranty.The middle section uses accordions to explain key service pillars such as the easy-to-use design system, in-house factory production, multiple printing methods, and ERP/order tracking for end-to-end visibility.The lower section presents a service grid highlighting 9 major brand benefits such as Faulty-Proof, Free Sample, Overage Protection, 60 Days Warranty, Corporate Onsite, Online Status Check, Corporate Stylist, Instant PriceCheck, and Online Designer.The About page ends with a CTA encouraging users to start designing or contact the team, guiding them into the site’s conversion flow.Shop Page-The Shop page is the category overview page for all product types such as polo shirts, t-shirts, shirts, uniforms, jackets, aprons, caps, and tote bags.Each card shows the category name, number of products, starting price, and minimum order quantity, leading users to that category’s detail page.Shop Detail PageThe Shop Detail page is the detail view for each product category, such as /shop/polo, focusing on selecting the available fabric tiers for that category.It includes a category hero section, descriptive copy, usage-style badges, and an accordion list of fabric tiers showing fabric name, composition, features, price, minimum quantity, and a CTA to continue into the design page.Blog PageThe Blog page is the article listing page where users can explore educational and inspirational content about apparel design, fabric selection, printing methods, and business tips.It includes category filtering for topics such as news, product highlights, design ideas, business tips, and printing techniques.Blog Detail PageThe Blog Detail page displays the full article with title, excerpt, author, publish date, reading time, cover image, article body, and share buttons.A sidebar promotes the design page, shows popular articles, and lists article categories, while the bottom section features related articles.Contact Us PageThe Contact Us page is the team contact page, showing address, phone, LINE, email, office hours, and a mock map/showroom section.Users can fill out a form with first name, last name, email, subject, and message to submit inquiries or request initial pricing information.Custom Design PageThe Custom Design page is the core designer experience, allowing users to customize apparel interactively and see a live preview instantly.Users can choose the product type, fabric, fit, collar, placket, sleeves, pocket, color zones, upload logos, add text, position overlays, view a design code, copy a design link, see unit pricing, adjust quantity, review volume discounts, and save or request a quote.Click here to visit https://d2d-demo-shop-shirt.vercel.app
Design to Deploy Cloud POS
Design to Deploy Cloud POSis a Next.js web application that simulates a complete cloud-based Point-of-Sale system targeted at café and restaurant businesses operating multiple branches.POS TerminalThe selling interface. The left panel is the product area: a search bar (text or barcode), category filter chips, and a responsive product grid with thumbnail images, price, SKU, and stock badge. Clicking a product adds it to cart. The right panel is the cart: it lists items with quantity controls (+ / −) and individual remove buttons. Below the cart items is a summary section showing subtotal, discount (editable via a quick-picker modal), VAT 7%, and grand total. The action row has three secondary buttons — select member, hold bill, and view held bills — then a full-width checkout button showing the total. Pressing checkout opens a payment modal with four methods: cash (with quick-amount chips and change calculator), QR PromptPay, card, and bank transfer. On mobile (≤ 768 px) the cart panel hides and becomes a sticky bottom bar with a cart icon badge and a checkout button; tapping it slides up a bottom sheet drawer.DashboardThe central overview screen for the selected branch. It shows two rows of KPI cards — the first covers today's revenue, bill count, average ticket value, and how many branches currently have an open shift. The second row shows total discounts given, VAT collected, new customers, and low-stock item count. Below that is a branch comparison panel with a progress bar and spark chart for each branch. The main chart area has two graphs side by side: a 7-day area chart and an hourly bar chart for today's peak hours. At the bottom is a paginated recent-bills table and a payment-method donut chart. A refresh button and an "email report" button sit in the page header.Branch ManagementA page for monitoring and managing all branches. Four KPI cards at the top show total daily revenue across all branches, number of branches with open shifts, total bills today, and average goal progress. Below is a card grid with one card per branch — each shows the branch name, staff count, shift status (open/closed pill with live pulse animation), today's revenue, bill count, a low-stock warning badge, a goal progress bar, and a spark chart. Clicking a branch card opens a slide-in detail panel on the right side with address, phone, manager name, opening date, floor area, terminal count, and three KPI tiles (revenue, staff, members). There is also an "add branch" button in the header that opens a creation modal, and a branch-limit notice appears when the demo cap is reached.InventoryTracks product stock levels for the selected branch. Four KPI cards show total SKU count, total stock value, number of items below the reorder threshold (highlighted in red), and the number of inter-branch transfers. The main area is a searchable, filterable table of all products showing SKU, name, category, stock level (with a colored badge — green for normal, amber for low, red for out), unit price, and total stock value. Alongside the table is a sidebar panel with two cards: a low-stock alert list, and a summary of stock value grouped by category. An "add product" button opens a modal form with fields for image, name, SKU, category, price, and starting stock.Staff ManagementA roster page for all staff across branches. KPI cards at the top show total staff count, active staff today, average performance score, and number of staff with open shifts. The main table lists each employee with their name and avatar initials, role badge (cashier, supervisor, manager, etc.), assigned branch, shift status, performance score out of 100, and a join date. Clicking a row opens a right-side detail panel with three tabs: Info (contact details, address, emergency contact), Permissions (toggle switches for POS access, void bills, discount approval, backoffice access, reports), and Activity (a recent transaction log). There are buttons to add a new staff member and to export the roster.SettingsA tabbed configuration page with six tabsStore name, head-office address, phone, tax ID, logo upload, currency (THB/USD), timezone, date format, language, and VAT rateToggle each payment method on/off (cash, QR PromptPay, card, transfer), set PromptPay ID, configure rounding rules and service chargeReceipt printer model, paper width, auto-print toggle, cash drawer settings, barcode scanner port, and customer display output portOTP requirement for branch switching, manager PIN for discounts, session timeout, and audit log accessData sync frequency between branches, cloud backup schedule, and data retention periodConnect LINE OA (send receipts/promotions via LINE), accounting software export, delivery platform webhooks (Grab, Foodpanda, LINE MAN), and API key management for custom integrationsClick 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 D2DA premium single-page real estate landing website for a luxury housing project. It is designed to present the brand, house types, project atmosphere, location advantages, promotions, and appointment booking, while also collecting sales leads and offering a simple admin dashboard.HeroThe main first-screen section that introduces the project with a luxury visual, key selling points, call-to-action buttons, and a lead registration form.StatBar & HighlightSectionA quick credibility strip showing headline project numbers such as booking rate, awards, resident families, and security level.A project highlight section focusing on lifestyle and functional benefits like smart home support, security, EV readiness, and premium facilities.MortgageCalculatorAn interactive payment estimator that helps users calculate home price, down payment, interest, loan term, and estimated monthly payment.UnitsSectionA section presenting the master plan and available house models, including positioning, house size, bedroom/bathroom counts, and starting prices.GallerySectionA visual gallery that showcases curated project spaces such as the living area, dining area, clubhouse, and master bedroom.LocationSectionA location-focused section explaining nearby landmarks and transport convenience, supported by an embedded map.AppointmentSection A visit-booking section where interested buyers can schedule a project tour by submitting contact details, date, time, and number of visitors.Promotion Section A campaign-focused section highlighting limited-time offers and special booking benefits to encourage faster conversion.FooterA closing section containing brand recap, contact information, operating hours, social placeholders, and an email subscription field.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
DEMO LOGISTICS by D2D
DEMO LOGISTICS by D2DThis project is a demo landing page for a logistics/transport business. It focuses on sales, trust-building, service presentation, pricing, fleet display, and lead generation, rather than being a full logistics platform with a real backend.Hero Section & Estimate / Track CardThe hero section uses a large background image and headline messaging such as fast delivery, quick booking, and fast pricing, with strong call-to-action buttons.The right-side card inside the hero has two tabs: price estimation and shipment tracking. The estimation logic is mocked.Trust MetricsA stats section showing completed trips, enterprise clients, on-time delivery rate, and available vehicles to build credibility.Services SectionThis section presents six core service offerings, including express delivery, contracted transport, moving services, industrial transport, labor support, and cargo insurance.Vehicle FleetShows available vehicle types such as pickup, box truck, 6-wheel truck, and trailer, along with load dimensions, weight, and usage highlights.Pricing SectionThe pricing section is split into Personal, Business, and Enterprise plans so visitors can match a package to their business size.How It WorksExplains the service flow in four steps: booking, pickup, delivery/tracking, and successful handoff.About Us & Why Choose UsDescribes the company as a trusted logistics partner, including experience, vision, and mission statements.Highlights four core selling points: safety, punctuality, professional team, and transparent pricing.FAQ SectionA FAQ section covering same-day delivery, insurance, tax invoices, and upcountry delivery coverage.FooterThe footer contains brand information, service links, main navigation, a promo email field, and policy links.Click here to visit https://d2d-fastmove-logistics-demo.vercel.app/Tech stack ViteReact 19TypeScriptTailwind CSS 4motionlucide-reactReact DOMGoogle FontsNode.js
Apple Music Clone
Apple Music CloneThis project is a modern, web-based music streaming application inspired by Apple Music. It is built with React 19 and utilizes the iTunes Search API to provide a rich catalog of songs and music videos. The application features a sleek, responsive user interface styled with Tailwind CSS and smooth animations powered by Framer Motion.Key FeaturesComprehensive Search Search for tracks, artists, and music videos, or browse by genres.Advanced Music Player A fully functional playback system with controls for play/pause, seek, volume, shuffle, and repeat, including keyboard shortcut support.User Authentication Integrated with Firebase Auth for Google Sign-In to secure personalized features.Personalization Manage "Favorites", "Playlists", and "Recently Played" history (stored locally).Immersive Design Dynamic Ambient Glow effects that adapt to the current track's artwork, along with customizable theme colors and dark/light modes.Responsive Layout Optimized for both desktop and mobile devices with a flexible sidebar and intuitive navigation.HOME PAGEHero Section Displays a featured artist and album with a high-impact visual banner that adapts its background to the artwork.Dynamic Content Switches between "Trending Songs" and "Search Results" based on user input.Dual View Layout Combines a visual Grid View (Top 10 tracks) for discovery and a List View (All results) with pagination for detailed browsing.Quick Actions Allows users to play, follow artists, or view tracks directly on the iTunes store.MUSIC MODEMusic Mode The default experience focusing on audio tracks. It features Ambient Glow effects that sync with the music's artwork and provides a compact grid (5 columns).VIDEO MODEVideo Mode A dedicated UI for music videos. It uses larger Video Cards (3-4 columns) to emphasize visual content and provides an integrated video player in the Right Panel or full-screen drawer.Unified Controller Both modes share the same Player Bar logic, but the UI adapts to show either an audio waveform or a video playback element.SETTINGSTheme Engine Offers 7 distinct color themes (Purple, Pink, Blue, Green, Orange, Red, and Default).Appearance Toggle Seamless switching between Dark Mode and Light Mode, affecting the entire UI including glassmorphism effects.Data Control Allows users to set the Track Limit per search (e.g., 20, 50, 100) to optimize loading speed and data usage.Persistence All settings are saved to LocalStorage, ensuring the app looks exactly how you left it on every visit.HISTORYAutomatic Tracking: Every song played is automatically added to the history list without requiring manual input.Smart Storage: Keeps track of the last 50 songs played, automatically removing older entries to keep the list relevant.Instant Access: Provides a dedicated page to quickly jump back to recently discovered music.Local Management: Data is stored locally on the device for privacy and instant loading without server delays.FAVORITES & PLAYLISTSFavorites A one-click "Heart" system to save preferred tracks for easy access.Custom Playlists Users can create, name, and manage their own collections of songs.Secure Access Requires Google Sign-In (Firebase) to access these personalized features, ensuring your library is unique to you.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 is a premium real estate landing page demo designed for housing projects, residential brands, and property marketing campaigns. Its purpose is to present the brand, highlight property value, capture leads, support visit bookings, and provide a lightweight CRM-style admin view for demo or sales use.This project is a single-page real estate marketing website built to simulate a modern luxury property campaign. It combines brand storytelling, visual presentation, lead generation, booking flow, and a simple admin dashboard in one frontend app. It is suitable as a showcase, prototype, or starter reference for property developers and real-estate-focused web builds.Hero & Lead Form- English: The hero section is the main sales introduction. It presents the project identity, key value proposition, pricing highlight, location convenience, promotional offer, and primary call-to- action. It also includes the lead capture form directly in the hero for immediate conversion.- English: This section collects potential customer information such as name, phone number, and preferred contact time. It is designed for fast conversion and feeds both Firestore and local fallback storage.HighlightsThis section presents the core project benefits, such as transit access, security, green space, or smart-home features. It is meant to communicate lifestyle value beyond basic property specs.Unit CardsThe unit section showcases available house types or product models. Each card summarizes size, room count, pricing, and visual identity, helping visitors compare options quickly.GalleryThe gallery displays curated project imagery to support the premium brand impression. It strengthens emotional appeal and helps visitors imagine the living experience.LocationThe location section communicates where the project is situated and why the location matters. It usually supports convenience messaging such as access to transit, city zones, schools, or lifestyle destinations.Mortgage Calculator- English: This section helps visitors estimate affordability or monthly payment expectations. It supports practical buying decisions and makes the page more useful than a static brochure.FooterThe footer closes the page with branding and supporting information. It helps complete the landing structure and gives users a final reference point before leaving or converting.Click 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 TranslatorWhat it doesGemiTrans is a high-performance web application designed for real-time translation powered by Google’s Gemini AI. It allows users to translate source text into multiple target languages simultaneously (up to 3 side-by-side translation cards). Unlike traditional translators, it offers granular control over the output's formality and specific objectives (e.g., technical, casual, or general).Problem SolvedWorkflow Efficiency Eliminates the need to manually switch between languages or tabs by providing a side-by-side comparison in one view.Nuance & Tone Control Addresses the "one-size-fits-all" translation problem by allowing users to adjust formality levels (0-100) and context, ensuring the output matches the intended audience.Knowledge OrganizationFeatures an integrated Notebook (Rich Text Editor) and Translation History, enabling users to save, edit, and organize important translations for long-term use.Resource Management Implements a token-based Daily Quota system to manage AI usage costs while providing a sustainable service to usersLanding pageThe entry point of the application designed to showcase value propositions. It features a modern, high-conversion UI with smooth animations (Framer Motion) to introduce key features like AI-powered translation and multi-language support. It guides new users to get started or learn about pricing and benefits.Log in & sign inA secure authentication system integrated with Firebase Authentication. Users can create accounts or log in to sync their translation history, saved words, and notebooks across devices. The interface includes validation, error handling, and a seamless transition between registration and login states.Main productThe core engine of the app. It provides a "workspace" where users input source text and receive real-time translations. Key features includeMulti-Card UI Translate into up to 3 languages simultaneously.Customization Adjust formality levels and specific translation objectives via AI.Drag & Drop Reorder translation cards using dnd-kit for better comparison.Action Tools Copy results, listen to speech (TTS), or save directly to the Notebook.SettingA personalization hub where users can manage their experience. It allows users to set Default Target Languages for the workspace, view their current Daily Token Quota (monitored by Firebase), and update profile information. This ensures the app adapts to each user's specific workflow.NotebookA productivity tool featuring a Rich Text Editor (Tiptap). It allows users to organize their thoughts by creating, editing, and managing notes. Users can append translations directly from the Main Product into their notes, making it an essential tool for language learners and researchers to store structured information.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 is a sophisticated AI Chat application built with Next.js 16 (App Router) and TypeScript. It provides a robust interface for interacting with AI, featuring:Persistent Chat Sessions Chat history is saved locally using Zustand with persistence, allowing users to resume conversations even after refreshing the page.Project Organization Users can group related chat sessions into "Projects" for better workflow management.Rich UI/UX Built with HeroUI and Tailwind CSS 4, featuring smooth animations from Framer Motion. It includes a Sidebar for navigation, a Topbar with editable titles, and a refined Chat Area.Comprehensive Features Includes message editing (with history truncation), media attachments, user profile management, and a detailed settings panel (Appearance, Notifications, Security).Structured Views Beyond the chat, it includes dedicated views for Documents, Gallery, Projects, and Pricing, along with a full Authentication system (Login/Register)Main pageThe entry point of the application when no chat is active. It features a personalized greeting (e.g., "Good morning, User"), a clean central interface with a prominent chat input, and "Quick Prompts" to help users start a conversation immediately. The Topbar displays "New Chat" by default.Chat pageOnce a conversation starts, the UI shifts to a functional chat thread. It features a scrollable "Chat Area" displaying messages from both the user and AI. The input field becomes "compact" and pinned to the bottom. Users can edit their previous messages, which will truncate the subsequent conversation history to maintain logical flowLogin page A modern, secure authentication interface. It includes fields for email and password with visibility toggling, a "Forgot password" link, and a prominent gradient "Sign In" button. It also provides a clear path for new users to navigate to the registration pagePricing pageA transparent pricing dashboard showcasing three tiers: Basic (Free), Pro (Best Value), and Enterprise (Custom). Each card lists specific features with checkmarks. The "Pro" plan is highlighted with a stunning animated gradient border and a "Best Value" badge to drive conversionsNew Project managementA dedicated workspace for organizing chat sessions. Users can create new "Projects" via a modal popup, which then appear in a grid view. This section allows users to group related conversations into specific folders, making it easier to manage multiple workflows or topics.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
Mon – Fri: 9:00 AM – 6:00 PM
09 AM — 06 PM
Drop us a line
design2deploy.work@gmail.com