PERSONAL PORTFOLIO PROJECT

SCG Website Studio

A working browser prototype with twelve distinct multi-page templates across six categories, live editing and portable images.

Next.js
React
TypeScript
CSS container queries
Playwright

Actual capture of the working SCG Website Studio editor — Actual capture of the working application built in this project. Sample businesses, products and prices are fictional.

Project overview

An interactive product demo built for SCGENCO. It is not a commercial client delivery or published customer website.

The need

Helping visitors turn website ideas into a live multi-page design and prepare an actionable inquiry.

The approach

Twelve distinct compositions, brand and content editors, device previews, local drafts, validated JSON packages and email inquiry summaries.

Application architecture

Static localized pages → lazy-loaded editor → validated WebsiteDesign v1 → scoped React previews. Images live in session memory; full packages include local image bytes.

Key features

Six categories and twelve distinct templates
Multi-page desktop, tablet and mobile previews
Brand, color, typography, section, content and image editors
Bounded undo/redo, local drafts and versioned packages
Demo cart, menu and property filters
Inquiry summaries with a custom design or without the editor

Engineering focus

Preserving template diversity, isolating editor styles, managing image references across history and validating imported configurations.

Outcome and boundaries

A working local prototype. It provides no real payments, orders, inquiry submission, accounts, server or website publishing. The exported package transfers design and images, rather than finished website code.