DESYN

DESYN – BROWSER-BASED INTERIOR DESIGN TOOL

Browser-based 2D/3D interior design tool for furniture retailers and designers.

YEAR

2026

ROLE

Frontend Developer

TYPE

WEB

ORIGIN

UNIVERSITY

STACK

Next.js · React · TypeScript

DESYNWEB / 2026

(OVERVIEW)

Desyn is a browser-based interior design tool built for furniture retailers and interior designers. It enables authenticated users to create 2D floor plans and 3D room visualisations, manage a design portfolio, and share or export layouts — all without installing any software.

THE PROBLEM

Professional CAD tools like AutoCAD are too expensive and complex for freelance designers and showroom staff, while simpler alternatives lack the depth needed for real client consultations. There was no accessible middle ground that supported both 2D planning and 3D spatial preview in a single, browser-ready tool.

THE SOLUTION

We built a full-stack web application using Next.js and Firebase that lets designers create room layouts with drag-and-drop furniture placement, preview them in an interactive 3D view, and share high-resolution exports directly with clients — all within a secure, session-managed workspace.

THE OUTCOME

Delivered a fully functional interior design tool validated through think-aloud usability sessions and a post-task questionnaire averaging 4.2/5 satisfaction. Three real design iterations came directly from user feedback, including camera centring fixes, 3D export quality improvements, and one-click design duplication.

(KEY FEATURES)

01Firebase Authentication with automatic session timeout and inactivity warnings
02SVG-based 2D floor plan editor with drag-and-drop, AABB collision detection, zoom, and pan
03Real-time 3D visualisation using React Three Fiber with GLB furniture models and four camera presets
04Zustand-powered state sync between 2D and 3D views
05Design portfolio dashboard with search, category filtering, and sort controls
06Multi-format export (PNG, JPEG, WebP, SVG) and client sharing via email, clipboard link, and print
07154 end-to-end Playwright tests across 5 test suites — all passing on the production build

NEXT.JSREACTTYPESCRIPTFIREBASEREACT THREE FIBERTHREE.JSZUSTANDPLAYWRIGHT

(SCREENSHOTS — DRAG TO EXPLORE)

06 FIGS

Design portfolio with search, category filters, and sort controls — DESIGN PORTFOLIO WITH SEARCH, CATEGORY FILTERS, AND SORT CONTROLS

Drag-and-drop furniture placement with AABB collision detection — DRAG-AND-DROP FURNITURE PLACEMENT WITH AABB COLLISION DETECTION

Real-time 3D visualisation powered by React Three Fiber — REAL-TIME 3D VISUALISATION POWERED BY REACT THREE FIBER

Corner camera preset for full room preview — CORNER CAMERA PRESET FOR FULL ROOM PREVIEW

Multi-format export and client sharing options — MULTI-FORMAT EXPORT AND CLIENT SHARING OPTIONS

Dark mode workspace with 3D visualisation — DARK MODE WORKSPACE WITH 3D VISUALISATION

GITHUB REPO→

LIVE WEB APP→

BUILT WITH

@dizzpy · @yenulitharandi01 · @mrakiyaaa · @djdJANU · @matheesha2000

(NEXT PROJECT — 02)

SWAPTUNES

→