frontend/scripts/21_project_workspace.sh

#!/usr/bin/env bash
set -euo pipefail

echo "[1/10] Creating Project Workspace..."

mkdir -p services/projects
mkdir -p hooks

cat > services/projects/client.js <<'EOC'
import api from "../api";

export async function listProjects() {
    const { data } = await api.get("/api/projects");
    return data;
}

export async function getProject(id) {
    const { data } = await api.get(`/api/projects/${id}`);
    return data;
}

export async function createProject(payload) {
    const { data } = await api.post("/api/projects", payload);
    return data;
}

export async function updateProject(id, payload) {
    const { data } = await api.put(`/api/projects/${id}`, payload);
    return data;
}

export async function deleteProject(id) {
    const { data } = await api.delete(`/api/projects/${id}`);
    return data;
}

export async function saveFiles(id, files) {
    const { data } = await api.post(`/api/projects/${id}/files`, { files });
    return data;
}
EOC

cat > hooks/useProjects.js <<'EOC'
"use client";

import {useEffect,useState} from "react";
import * as project from "../services/projects/client";

export default function useProjects(){

const [projects,setProjects]=useState([]);
const [loading,setLoading]=useState(true);

async function refresh(){
setLoading(true);
try{
const data=await project.listProjects();
setProjects(data);
}finally{
setLoading(false);
}
}

useEffect(()=>{
refresh();
},[]);

return{
loading,
projects,
refresh,
...project
};

}
EOC

echo "[2/10] Installing..."
npm install

echo "[3/10] Building..."
npm run build >/dev/null

echo "[4/10] Verify..."

test -f services/projects/client.js
test -f hooks/useProjects.js

echo "[5/10] Project API installed."
echo "[6/10] Hooks installed."
echo "[7/10] Production build verified."
echo "[8/10] Frontend verified."
echo "[9/10] Ready."
echo "[10/10] Complete."