Implement Next.js frontend with full CRUD operations for MythAPI

[Copilot]

Implements Step 8: Wire up client interactions between frontend and backend. Server components handle initial data fetching; client components manage mutations and UI state transitions.

Architecture

Stack: Next.js 14+ App Router, TypeScript, Tailwind CSS, Axios

• Server components for data fetching (SEO, performance)
• Client components for interactivity (forms, search, delete actions)
• Type-safe API client with centralized error handling
• CORS-enabled backend integration

Changes

Frontend Application (src/frontend/)

API Layer

• lib/api/client.ts - Axios client with request/response interceptors
• lib/api/gods.ts - CRUD operations: getGods(), getGodById(), searchGods(), createGod(), updateGod(), deleteGod()
• lib/api/mythologies.ts - Mythology data fetching
• lib/types/index.ts - TypeScript interfaces matching API contracts

Pages (App Router)

• app/gods/page.tsx - Server component fetches initial data, passes to client wrapper for search state
• app/gods/[id]/page.tsx - Dynamic route with server-side data fetching, client delete button
• app/gods/new/page.tsx - Server fetches mythologies, client <GodForm /> handles submission
• app/gods/[id]/edit/page.tsx - Server fetches god + mythologies, client form handles update
• app/mythologies/page.tsx - Server component displays all mythologies
• loading.tsx files - Suspense boundaries for async route segments

Components

• components/gods/GodCard.tsx - Client component with delete handler
• components/gods/GodForm.tsx - Client component with Zod validation, form state management
• components/ui/SearchBar.tsx - Client component with 300ms debounce
• components/ui/{Button,Card,LoadingSpinner}.tsx - Reusable UI primitives
• components/layout/{Header,Footer}.tsx - Navigation and branding

Client Wrappers

• app/gods/GodsListClient.tsx - Manages search state, calls searchGods() on query change, restores full list on clear
• Delete actions call deleteGod(id) then router.refresh() to re-fetch

Backend (src/Program.cs)

Added CORS policy to allow http://localhost:3000:

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowFrontend", policy =>
    {
        policy.WithOrigins("http://localhost:3000")
              .AllowAnyHeader()
              .AllowAnyMethod();
    });
});

// ...

app.UseCors("AllowFrontend");

Key Features

• Search: Debounced client-side search with alias support, restores full list on clear
• Forms: Zod schema validation, error display, loading states during submission
• Error Handling: Try/catch blocks in all client components, toast notifications for user feedback
• Loading States: Suspense boundaries with loading.tsx files, skeleton states during data fetching
• Type Safety: Full TypeScript coverage, interfaces match API contracts

Screenshots

Homepage

Gods List - 20 gods with search, CRUD actions

Run Locally

# Backend (terminal 1)
cd src && dotnet run --urls "http://localhost:5280"

# Frontend (terminal 2)  
cd src/frontend && npm run dev

Navigate to http://localhost:3000

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• fonts.googleapis.com
  • Triggering command: /opt/hostedtoolcache/node/24.13.1/x64/bin/node /opt/hostedtoolcache/node/24.13.1/x64/bin/node /home/REDACTED/work/mythapi-training-demo/mythapi-training-demo/src/frontend/node_modules/next/dist/server/lib/start-server.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Wire Up Client Interactions</issue_title>
<issue_description># Step 8: Wire Up Client Interactions

Description

Connect the pages and components so that all CRUD operations work end-to-end. Server components handle initial data fetching; client components handle mutations and UI state transitions.

Implementation Steps

1. Gods list page (src/frontend/src/app/gods/page.tsx):

   • Fetch all gods and mythologies in the server component using getGods() and getMythologies().
   • Pass data to a client wrapper component that manages search state.
   • When SearchBar submits a query, the client wrapper calls searchGods() and replaces the displayed list.
   • When SearchBar is cleared, restore the full list.
   • Each GodCard delete action calls deleteGod(id), then calls router.refresh() to re-fetch.

2. God detail page (src/frontend/src/app/gods/[id]/page.tsx):

   • Fetch the god in the server component.
   • Render a "Delete" button as a client component.
   • On delete, call deleteGod(id) and router.push("/gods").

3. Create god page (src/frontend/src/app/gods/new/page.tsx):

   • Fetch mythologies server-side and pass to <GodForm />.
   • GodForm is a client component that handles form state and submission.

4. Edit god page (src/frontend/src/app/gods/[id]/edit/page.tsx):

   • Fetch both the god and mythologies server-side.
   • Pass both to <GodForm god={god} mythologies={mythologies} />.

5. Error handling:

   • Wrap API calls in try/catch blocks in client components.
   • Display user-friendly error messages (e.g., toast or inline alert) when API calls fail.
   • Handle 404 responses on detail/edit pages with a "God not found" message.

6. Loading states:

   • Add loading.tsx files in src/frontend/src/app/gods/ and src/frontend/src/app/gods/[id]/ for Suspense-based loading indicators.
   • Show a spinner or skeleton while search results are being fetched.

Files Modified

• src/frontend/src/app/gods/page.tsx
• src/frontend/src/app/gods/[id]/page.tsx
• src/frontend/src/app/gods/new/page.tsx
• src/frontend/src/app/gods/[id]/edit/page.tsx

Files Created

• src/frontend/src/app/gods/loading.tsx
• src/frontend/src/app/gods/[id]/loading.tsx

Acceptance Criteria

• Listing gods shows all gods on initial load.
• Searching filters the list; clearing search restores all gods.
• Creating a god via the form adds it and redirects to the gods list.
• Editing a god pre-populates the form, submits the update, and redirects to the detail page.
• Deleting a god from the list or detail page removes it and updates the view.
• Loading states appear while data is being fetched.
• API errors are caught and displayed to the user.
  </issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Wire Up Client Interactions #10

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.