Connect Home Page to GET /api/artworks | Cheng & Vicky

[jpuka01]

Objective

Replace the hardcoded artwork array on the home page with real data from the backend. Implement the GET /api/artworks endpoint and connect it to the frontend.

Tasks

• Implement GET /api/artworks (/app/api/artworks/route.ts):

  export async function GET(req: Request) {
    try {
      const artworks = await prisma.artwork.findMany({
        where: { status: 'APPROVED' },
        include: { 
          author: { 
            select: {
              id: true,
              username: true,
              profile: {
                select: {
                  display_name: true,
                  profile_image_url: true
                }
              }
            }
          }
        },
        orderBy: { created_at: 'desc' }
      });
  
      return NextResponse.json({ artworks }, { status: 200 });
    } catch (error) {
      return NextResponse.json({ message: 'Failed to fetch' }, { status: 500 });
    }
  }

• Update Home Page (/app/page.tsx):

  • Remove the hardcoded const artwork = [...] array
  • Add useEffect to fetch from /api/artworks on mount
  • Update state with fetched artworks
  • Map over fetched data to display in carousel and gallery
  • Handle loading state ("Loading artwork...")
  • Handle empty state ("No artwork to display")

• Test:

  • Create some APPROVED artworks in database (use Prisma Studio)
  • Visit home page and verify artworks load dynamically
  • Check that carousel and gallery both show real data
  • Verify author names display correctly

Acceptance Criteria

• ✅ GET /api/artworks returns all approved artworks
• ✅ Home page fetches data on load
• ✅ Carousel displays real artwork from backend
• ✅ Masonry gallery displays real artwork from backend
• ✅ Author information displays correctly
• ✅ Loading and empty states work
• ✅ No hardcoded artwork data remains