Art Studio

The idea

Daniela Tsvetkova Atelier is an online gallery for a fictional contemporary oil painter based in Marseille; the artist, her biography and the paintings are placeholder content generated during prototyping. Visitors browse works in three categories, check each painting's provenance and availability, read the artist's story and exhibition history, and send an inquiry about a work or a commission. The first version was generated with Base44, an AI app builder. I exported it and rebuilt it into a maintainable codebase where the artist edits paintings, categories, exhibitions and her profile in Sanity Studio.

Implementation

• Restructured the export into an npm-workspaces monorepo: a React 19 and Vite 8 website and a separately deployed Sanity Studio.
• Modelled paintings, categories, exhibitions and a singleton artist profile in Sanity, loaded from its CDN with parallel GROQ queries and no access token in the browser.
• Rebuilt the image component on Sanity's image pipeline: images sized to their container and screen density, automatic WebP/AVIF, focal-point cropping and blurred placeholders.
• Replaced 46 unused shadcn/ui components and 26 Radix packages with accessible React Aria controls styled with Tailwind CSS v4.
• Per-page titles, descriptions and canonical URLs through React 19's built-in metadata support, plus a post-build script that generates the sitemap and social card from CMS data.
• Per-route code splitting, self-hosted subset fonts, an error boundary and cookie-free analytics.
• Upgraded to React 19, React Router 7, Vite 8, Tailwind CSS 4 and Sanity 6, with JSDoc types checked by the TypeScript compiler.

Challenges

• Removing the Base44 SDK, its Vite plugin, a login system and a built-in admin whose login accepted any input, without losing content.
• Moving every painting and image into Sanity with a single import script that could be re-run safely without creating duplicates.
• Making a client-rendered site visible to search engines and to social crawlers that don't run JavaScript.
• Cutting runtime dependencies from 65 to 11 and tracking down silent failures, such as a blank home page whenever a category had fewer than three works.

Result

In four days the prototype became a two-workspace codebase with six routes, a four-type content model in a deployed Sanity Studio, a build-time sitemap and social card, and 11 runtime dependencies instead of 65. The public site isn't deployed yet: the contact form still needs a delivery service, and a Bulgarian version is planned.

Gallery

GalleryEvery painting with status and year filters, and the way into the viewing room.

HomeA serif-led hero introducing the atelier.

Artist introductionThe artist's statement and portrait, edited in Sanity.

CollectionsEach category shows its latest works with year and availability.

Painting pageA magnifier lens follows the cursor to show the brushwork, next to the artist's note and provenance.

Viewing roomA full-screen slideshow with keyboard controls and a fullscreen toggle.

Inquiry formInquiries can be tied to a specific painting, and a brushstroke effect follows the cursor.

Version history

CurrentLive now

Base44 prototypeAug 2026

The app as generated with Base44: shadcn/ui and Radix components, content stored in the browser, login and registration pages, and an in-app admin behind a login that accepted any input. Its design, copy and page layouts carried over into the rebuild.

• 65 runtime dependencies, many of them unused
• No CMS: content lived in the browser's storage

Stack at the time

Languages

JavaScript

Technologies

ReactViteTailwind CSSFramer Motion

From Prototype to Codebase

• Runtime dependencies cut from 65 to 11
• About 1,100 lines of authentication code removed
• Built-in admin replaced by Sanity Studio
• React 18 → 19, Tailwind CSS 3 → 4, Vite 6 → 8