Portfolio
All Projects
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
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
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