Build a web page for The Product Space to showcase student projects, where each project entry includes: a title, short description, n8n workflow link, documentation (PDF or Notion link), demo/explainer video, and team/creator details. The page should be visually engaging, responsive, and easy to update. Include filters by topic or tech stack if possible.
I'll create a responsive, visually engaging web page to showcase student projects for The Product Space with all the required elements and filtering capabilities.
This web page for The Product Space includes all the requested elements in a visually engaging and responsive design:
Each project card includes:
data/projects.ts that makes it simple to add new projectsTo use this showcase, you can simply update the projects array in the data file with your actual student projects, and the page will automatically display them with all the filtering functionality working.
An error occurred during deployment. Please fix:
⨯ useSearchParams() should be wrapped in a suspense boundary at page "/". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
at a (/vercel/path1/.next/server/chunks/825.js:17:69004)
at d (/vercel/path1/.next/server/chunks/825.js:15:13880)
at n0 (/vercel/path1/.next/server/app/page.js:1:183557)
at nL (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:46773)
at nF (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:48548)
at nF (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:64360)
at nq (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:67434)
at nH (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:65009)
at nV (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:70865)
at nz (/vercel/path1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:69548)
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Export encountered an error on /page: /, exiting the build.
⨯ Next.js build worker exited with code: 1 and signal: null
error: script "build" exited with code 1
Error: Command "bun run build" exited with 1
I'll fix the error that's occurring during deployment. The issue is related to using useSearchParams() without a proper Suspense boundary, which is required for client-side hooks in Next.js.
I've resolved the deployment error by wrapping the components that use useSearchParams() in Suspense boundaries:
import { Suspense } from "react" at the top of the file<ProjectFilters /> in a Suspense boundary with a loading fallback<ProjectGrid projects={projects} /> in a Suspense boundary with a loading fallbackThe error occurred because:
useSearchParams() is a client-side hook that requires client-side renderingBy wrapping the components in Suspense boundaries, we tell Next.js to:
This is a common pattern in Next.js when working with client components that use browser-specific APIs or hooks like useSearchParams().
The fallback content will be displayed briefly while the components are loading on the client side, providing a better user experience than an error or blank space.