Subchapter 20.73

INSTRUCTIONS

references/portfolio/INSTRUCTIONS.mdMarkdown15 KBView on GitHub

Wix Portfolio — ready-made client

The portfolio client is shipped as real files, not snippets to regenerate. It’s a complete collections gallery + collection page + project detail (media gallery + details[] rows), styled with your app’s design tokens (base44’s src/index.css — the shadcn palette the design phase already set). The install step copied it into ; you wire the routes — you generate almost none of the read/render code (return-object destructuring, media branching, the link shape all ship and are correct).

INSTRUCTIONS · Wix Vibe Headless · wix/skills · Skills Docs

src/

item.type

details[]

file	what it is
`hooks/usePortfolioGallery.js`	collections gallery data — first page + count + cursor paging
`hooks/useCollectionProjects.js`	one collection’s header + its projects (paged), by slug
`hooks/useProjectDetail.js`	project + its media gallery, by slug (null → not-found)
`components/CollectionCard.jsx`, `CollectionGrid.jsx`	collections listing UI (grid + card, with empty state)
`components/ProjectCard.jsx`, `ProjectGrid.jsx`	projects listing UI (grid + card, with empty state)
`components/ProjectMedia.jsx`	one gallery item — branches on `item.type` (IMAGE / VIDEO)
`components/WixManageBanner.jsx`	dev-only manage banner — drop it into your Layout (STEP 4)
`pages/Portfolio.jsx`	collections gallery route (`/portfolio`)
`pages/CollectionPage.jsx`	collection page route (`/collection/:slug`)
`pages/ProjectDetail.jsx`	project detail route (`/project/:slug`)
`rest/wix-config.js`	you set the ids here (STEP 2)
`rest/wix-client.js` + `rest/wix-portfolio.js`	REST transport + portfolio read helpers

import { useRef, useState, useEffect } from "react";
import { Routes, Route, Outlet } from "react-router-dom";
import WixManageBanner from "@/components/WixManageBanner";   // shipped, dev-only · default export, no props
import Portfolio from "@/pages/Portfolio";             // shipped · default export, no props
import CollectionPage from "@/pages/CollectionPage";   // shipped · default export, no props
import ProjectDetail from "@/pages/ProjectDetail";     // shipped · default export, no props
import Home from "@/pages/Home";        // YOU build
import Header from "@/components/Header";   // YOU build — plain in-flow markup, NOT position:fixed
import Footer from "@/components/Footer";   // YOU build

function Layout() {
  const topRef = useRef(null);
  const [offset, setOffset] = useState(0);
  useEffect(() => {                                  // measure the fixed region → pad content below it
    const ro = new ResizeObserver(() => setOffset(topRef.current?.offsetHeight ?? 0));
    if (topRef.current) ro.observe(topRef.current);
    return () => ro.disconnect();
  }, []);
  return (<>
    <div ref={topRef} style={{ position: "fixed", top: 0, left: 0, right: 0, zIndex: 50 }}>
      <WixManageBanner />                    {/* null in prod / when dismissed */}
      <Header />                             {/* your brand header, in-flow inside this fixed block */}
    </div>
    <div style={{ paddingTop: offset }}>     {/* clears the chrome; shrinks when the banner is dismissed */}
      <Outlet />                             {/* shipped pages render here, untouched */}
      <Footer />
    </div>
  </>);
}

<Routes>
  <Route element={<Layout />}>                                     {/* chrome wraps all */}
    <Route path="/" element={<Home />} />                          {/* yours */}
    <Route path="/portfolio" element={<Portfolio />} />            {/* shipped, as-is */}
    <Route path="/collection/:slug" element={<CollectionPage />} />{/* shipped, as-is */}
    <Route path="/project/:slug" element={<ProjectDetail />} />    {/* shipped, as-is */}
  </Route>
</Routes>

import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { queryCollections } from "@/rest/wix-portfolio";
import CollectionGrid from "@/components/CollectionGrid";

// Responsive header: choose ONE branch with a state flag — do NOT render a desktop nav AND a mobile
// nav toggled by `hidden md:flex` / `md:hidden`. These navs are inline-styled, and an inline
// `display` beats a Tailwind class, so `hidden` never applies — BOTH branches render. One branch.
export function Header() {
  const [mobile, setMobile] = useState(() => window.innerWidth < 768);
  useEffect(() => {
    const onResize = () => setMobile(window.innerWidth < 768);
    window.addEventListener("resize", onResize);            // keep it reactive to viewport changes
    return () => window.removeEventListener("resize", onResize);
  }, []);
  return (
    <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
      {/* brand/logo */}
      {mobile
        ? <YourMenu />                                       // your hamburger + a link to /portfolio
        : <div style={{ display: "flex", gap: 24 }}><Link to="/portfolio">Work</Link></div>}
    </nav>
  );
}
export function Featured() {                                // on your home page
  const [collections, setCollections] = useState([]);
  // NB: queryCollections returns { collections, nextCursor } — destructure the array.
  useEffect(() => { queryCollections({ limit: 6 }).then(({ collections }) => setCollections(collections)); }, []);
  return <CollectionGrid collections={collections} empty="Collections coming soon." />;
}

// listings — destructure the named array + the cursor:
const { collections, nextCursor } = await queryCollections({ limit: 24 });   // visible, dashboard order
const { projects } = await queryProjects({ limit: 24 });                     // all work, newest-first
const { projects: inCollection } = await queryProjectsByCollection(collectionId, { limit: 24 });
const { items, total } = await listProjectItems(projectId);                  // gallery — iterate `items`

// single fetches return the object or null (render a not-found/empty state, never invent one):
const collection = await getCollectionBySlug(slug);
const project = await getProjectBySlug(slug);   // or getProject(id) when you hold a GUID
const n = await countCollections();             // number → 0 means the empty state

// media item branches on item.type ("IMAGE" | "VIDEO" | "UNDEFINED") — the shipped ProjectMedia
// already does this: IMAGE → item.image.imageInfo.url; VIDEO → item.video.videoInfo.resolutions[0].url
// (poster item.video.videoInfo.posters[0]). details[] rows: { label, text? } OR { label, link: { text, url, target } }.

// An image you render yourself (hero / custom card): make the url https + keep a token bg so a
// just-generated url that 404s for a second reads as a surface, not a blank block.
function BrandImage({ url, alt }) {
  const src = url?.startsWith("//") ? `https:${url}` : url;      // the shipped cards already do this
  return <div className="bg-card"><img src={src} alt={alt} /></div>;
}

INSTRUCTIONS

Wix Portfolio — ready-made client

INSTRUCTIONS

Wix Portfolio — ready-made client

Prerequisites

STEP 1 — The client is already in `src/`

STEP 2 — Credentials

STEP 3 — Theme (nothing to style on the shipped components)

STEP 4 — Wire routes (surgical `find_replace` on `src/App.jsx`, never a rewrite)

What you build (not shipped)

Using the client from your own UI (hand-built lists, images)

Hard rules

Point the user to their dashboard

Seeding

Verify (before declaring done)