tanstack.route()artist.data.tschat.scope.check()motion.section()cloudflare.deploy
← Back to projects
Case study

Artist website · Macedonian content · Scoped AI assistant

7+
Content sections
AI
Scoped assistant
React
Frontend app
Cloud
Deploy config
TanStack StartReact 19ViteTypeScriptTailwind CSSMotionAI SDKSupabaseCloudflare
Jump to proof of work

Overview

I built this as an official artist website for Dimitar Andonovski.

The site presents biography, journey, music, theatre, studio, gallery, contact sections, public listening links, and a small AI assistant that answers only questions connected to the artist's public work.

The private source contains production assets and configuration. The public repository connected below documents selected architecture notes and sanitized snippets only.

01 / Problem

The challenge

The project needed to present a real artist profile in a way that feels personal, structured, and easy to navigate.

The main challenge was to combine story, discography, theatre work, studio work, media links, and contact flow without turning the page into a generic biography template.

02 / Role

My role

I structured the website, built the frontend routes and reusable sections, organized public artist data, connected the assistant behavior, and prepared the public pattern repository.

The work includes frontend implementation, content structure, public data modeling, scoped assistant logic, and deployment-oriented project setup.

03 / Architecture

Project structure

01TanStack Start app
02Home route
03Biography and journey pages
04Music, theatre, and studio sections
05Public artist data module
06Gallery and contact sections
07Scoped chat API route
08Floating AI assistant UI
09Supabase integration scaffolding
10Cloudflare deployment config
04 / Modules

Core modules

01

Artist homepage

The homepage introduces Dimitar Andonovski as an artist through a cinematic Macedonian-language layout with music, theatre, studio, and contact entry points.

02

Biography and journey

The biography and journey routes organize the public story, milestones, awards, Eurovision reference, theatre work, and career development into readable sections.

03

Music section

The music section groups public songs, listening links, featured videos, and related artist metadata so visitors can move from biography to actual work quickly.

04

Theatre and studio sections

Separate sections present theatre compositions, stage work, studio collaborations, voice work, violin, production, and other professional activities.

05

Scoped AI assistant

The assistant answers only questions related to Dimitar's public work, website navigation, booking direction, and published artist information. It refuses unrelated topics and has fallback responses when the AI gateway is unavailable.

06

Public data model

Public links, songs, awards, videos, and schema.org metadata are kept in structured data files so the website can reuse the same information across multiple routes.

05 / Decisions

Technical decisions

Macedonian content first

The website is written for the artist's real audience, so the main page language, section labels, and assistant behavior are aligned with Macedonian visitors.

Separate content routes

Biography, journey, music, theatre, and studio content are split into focused routes instead of one overloaded page. This keeps the website easier to scan.

Scoped assistant instead of generic chatbot

The assistant is intentionally limited to the artist website context. That makes it safer and more useful than a general chat widget.

Public snippets instead of full source

The public repository explains selected patterns and sanitized snippets. It does not publish production assets, full private source, credentials, deployment secrets, or private configuration.

06 / Stack

Tech stack

TanStack StartFile-based routing and full-stack React app structure
React 19Component-based artist website interface
ViteFast development and build tooling
TypeScriptTyped data models and safer component contracts
Tailwind CSSResponsive styling and page composition
MotionCinematic page transitions and section animation
AI SDKScoped assistant for questions about public artist information
SupabaseIntegration scaffolding for contact and content workflows
CloudflareDeployment configuration for production hosting
07 / Proof

Proof / Evidence

This case study is based on the private Dimitar Andonovski autobiography website. The public material shows architecture and code patterns without publishing production assets, secrets, private configuration, or full source code.

Public proof shown on this page

TanStack Start AppHome / BiographyMusicTheatreStudioArtist DataScoped Chat APIFloating AssistantPublic Snippets Repo

A public architecture diagram showing the artist website structure: TanStack Start app, content routes, shared artist data, scoped chat API, floating assistant, and public snippets repository.

Public code & documentation

Valentino-Veljanovski / dimitar-andonovski-autobiography-snippetsPublic

Public snippets and architecture notes from the Dimitar Andonovski autobiography website: TanStack Start routes, artist data structure, Motion UI patterns, scoped chat API, floating assistant behavior, and safe public documentation.

tanstack-startreactvitetypescripttailwind-cssmotionai-assistantartist-websitecase-studypublic-snippets
View on GitHub

Code excerpt: scoped assistant guard

The AI assistant is not a general chatbot. It is designed around a narrow website context and should answer only artist-related questions, navigation questions, public music and theatre information, and contact direction.

scoped-chat-api.tstypescript
// Scoped chat API pattern for an artist website.
// The assistant only answers questions about public artist information,
// navigation, booking direction, music, theatre, and studio work.

const allowedTopics = [
  "biography",
  "music",
  "theatre",
  "studio",
  "booking",
  "website navigation",
];

export async function answerArtistQuestion(message: string) {
  const isInScope = allowedTopics.some((topic) =>
    message.toLowerCase().includes(topic),
  );

  if (!isInScope) {
    return {
      answer:
        "I can help with questions about the artist, music, theatre, studio work, and contact information.",
    };
  }

  return {
    answer:
      "Use the public artist data and page content as the only source for the response.",
  };
}

Full sanitized example in snippets/scoped-chat-api.ts. The repository also includes artist data modeling, route metadata, and floating chat UI snippets.

Publication note

The public repository is a documentation and snippet reference. It does not include the full private website source, production images, credentials, deployment secrets, private configuration, or unpublished project files.

← Back to all projects