LIVING — Interior Design Studio
Spaces made personal. A portfolio project by DAVID.
LIVING is a premium interior-design storefront with a working design studio. Visitors plan a single room or a whole apartment to real dimensions, furnish it from a 209-piece catalogue, build kitchens and bathrooms, see the result in real-time 3D with time-of-day lighting ("4D"), and leave with an itemised estimate, images and a PDF presentation.
Ukrainian is the default language; English is one click away. Prices are illustrative demo prices in EUR.
Features
Choosing a space
- «Обрати приміщення» in the site header and the Studio top bar: 10 room types (living room, bedroom, kitchen, bathroom, home office, dining room, kids room, hallway, walk-in wardrobe, guest WC) or a whole apartment/house.
- For a room, pick a ready-made design or an empty room, and a preset or custom size. For an apartment, pick a layout (studio to four rooms, single-storey house, custom), ready or blank, and an optional total area.
Architectural plan (apartments)
- All rooms share one coordinate system. A wall between two rooms is one object with two sides; exterior walls have one.
- Tools: select, add room, add wall (splits a room), move wall (one room grows, its neighbour shrinks, the contour stays), door, open passage, window (exterior walls only), merge rooms, measure, undo/redo, zoom, pan and resize handles.
- Room areas can be typed in (the neighbour gives or takes the difference). Two separately labelled measures: usable area (sum of rooms) and area inside the exterior walls. The plan is checked for overlaps, gaps and broken doors.
- Double-click a room to furnish it; changes are mirrored back into the plan.
Room constructor
- Ceiling height, wall thickness, units in m/cm/mm, and room metrics.
- Floors: 23 materials with laying patterns, real tile/board scale, sheen and waste allowance.
- Walls and ceilings: finishes per wall, skirting and cornice.
- Windows, doors and passages by type and exact size; curtains and blinds tied to each window.
- Kitchen generator for seven layouts, plus fronts, worktops, backsplashes and handles.
- Bathroom fittings: baths, showers, WCs, basins, vanities, mirrors and accessories. Appliances, climate and lighting.
- Clash, door, window, passage and ceiling warnings with clear messages. Nothing is removed automatically.
3D & 4D (three.js, lazy-loaded)
- The whole apartment or a single room in real-time 3D, with corner, top and eye-level cameras. Before/After slider. Cinematic tour that visits every room.
- 4D adds a time-of-day slider (06:00–23:00, an artistic approximation, not a solar simulation), opening and closing curtains and doors, per-lamp switches with brightness and colour temperature, design stages from the empty room to the final interior, a 4D tour, and quality levels (Auto, High, Balanced, Performance). All settings are saved with the project.
Saving & export
- Save to My Projects with a plan image and a 3D render, an itemised estimate (per room for apartments), a JSON export/import, share links, PNG and a branded PDF (Cyrillic fonts included, marked as a conceptual design project).
Tech stack
Next.js 15 (App Router) · React 19 · TypeScript (strict) · Tailwind CSS v4 · Zustand · Zod · three.js · jsPDF · motion · lucide-react · Vitest · Playwright.
There are no external images, models or APIs. Furniture, materials, plan symbols and catalogue renders are drawn procedurally (SVG and three.js).
Getting started
Requires Node.js 20 or newer (developed on 22).
npm install
npm run dev # http://localhost:3000
Scripts
npm run typecheck # TypeScript
npm run lint # ESLint
npm test # unit and integration tests (Vitest)
npm run build # production build
npm start # serve the production build
npm run test:e2e # browser tests (Playwright, runs against a production build)
If Playwright can't download its own browser (for example on macOS 12), point it at a local Chromium: PW_CHROMIUM_PATH=/path/to/Chromium npm run test:e2e. Set E2E_PORT to change the test server port (default 3200).
Where projects are stored
LIVING has no backend and no accounts:
- Project data lives in the browser's
localStorage. Plan images and 3D renders live in IndexedDB.
- Saved projects are therefore per browser and per device. They don't sync between devices and disappear if the browser's site data is cleared. Use JSON export or a share link to move a project.
- The language preference is stored in the
living-locale cookie.
Deployment
The app runs on Vercel with default settings: framework Next.js, npm run build, no environment variables, no vercel.json. Pages render on demand because the language comes from a cookie. Product and collection pages are prerendered.
Project structure
src/app routes (home, collections, products, inspiration, projects, studio, …)
src/components/studio Studio UI: plan editor, apartment editor, constructor panels
src/components/preview3d 3D/4D preview
src/lib/editor store, geometry, apartment model, estimate, saving, PDF
src/lib/three scene builder, procedural models, materials and textures
src/lib/data catalogue, rooms and templates, finishes
src/lib/i18n Ukrainian and English dictionaries and content
tests/unit, tests/e2e Vitest and Playwright suites
