TraceStudio-dev/web/SETUP.md

TraceStudio (frontend) — Setup notes

Quick install steps to get the UI running with expected dependencies:

1. Install UI & state deps

npm install reactflow zustand lucide-react uuid

2. Setup Tailwind CSS (if you want full styling + shadcn/ui)

Follow Tailwind docs (https://tailwindcss.com/docs/guides/vite) and install:

npm install -D tailwindcss postcss autoprefixer

Note: npx tailwindcss init -p may fail in some Windows environments; a tailwind.config.cjs and postcss.config.cjs are included in the repo as an alternative. Ensure your tailwind.config.cjs content paths include ./index.html and ./src/**/*.{js,ts,jsx,tsx}.

Then include ./src/styles/tailwind.css in your app (already imported in src/App.tsx).

3. Optional: install shadcn/ui and its peer deps for the polished components

(see https://ui.shadcn.com/docs/installation)

4. Run dev server

npm run dev

Notes:

• The code uses React Flow v11+ API. If you install a different major version, some API differences may apply.
• TypeScript may show missing type declarations until @types/* packages are installed for some libs (e.g., uuid). Install them as needed.