GitHub repository: Siregar/lofi-ds

A small Storybook playground replicating parts of the Spotify UI to demo component structure, theming with Tailwind, and docs via MDX.

• Conference talk on YouTube
• Figma file

• React + TypeScript (app + components)
• Vite (dev server & build)
• Tailwind CSS (styling)
• Storybook (component workshop + MDX docs)

Repo structure hints:

• vite.config.ts, tailwind.config.js, postcss.config.js, .storybook/, src/, public/ are present in the repo file list.
• GitHub’s language stats show primarily TypeScript with some MDX.

• Node 18+ recommended (compatible with modern Vite/Storybook)

Using npm (lockfile present):

npm ci

Run the app (Vite):

npm run dev

Run Storybook:

npm run storybook

Build Storybook (static export):

npm run build-storybook

If your local package.json uses different script names, adjust the commands accordingly.

.
├─ .storybook/         # Storybook main/preview config, decorators, MDX setup
├─ public/             # Static assets
├─ src/                # Components, stories (*.mdx / *.stories.*), utils
├─ index.html          # Vite HTML entry
├─ tailwind.config.js  # Tailwind setup
├─ postcss.config.js   # PostCSS plugins
├─ vite.config.ts      # Vite config
└─ package.json

• Tailwind is used for composable, utility‑first styling.
• Prefer inline utilities in stories; reserve @apply for small, repeated bundles.

• Use semantic elements and ARIA where appropriate in stories.
• Test keyboard navigation within Storybook (Canvas + Docs).

Add/confirm these in package.json:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  }
}

• Component tokens & dark mode theming
• Interactive states & keyboard specs in stories
• Visual regression in CI (e.g., Chromatic)
• Deploy Storybook to a static host

• Video inspiration: the YouTube link above (see header)
• Tooling: Storybook & Tailwind recipes from the official docs if needed later.