Marketing Homepage - API Integration

The marketing homepage can load courses, categories, and blogs from the Admin Panel’s public API so both apps share the same content.

Architecture

• Admin Panel: Serves public API (no auth):
  • GET /api/public/courses
  • GET /api/public/categories
  • GET /api/public/blogs
  • GET /api/public/blogs/categories
• Marketing site: Calls these endpoints and adapts responses to the format expected by components. Fallback to static data if the API fails.

Setup on the marketing site

1. Set API base URL

In fda-website-marketing-homepage/.env.local:

NEXT_PUBLIC_API_BASE_URL=http://localhost:3000

Use your Admin Panel URL (e.g. https://learn.fda.org.in) in production. Omit or leave blank to rely on static data only.

2. Use API-based data modules

The app can use either static data or API-backed data:

• Courses: Import from @/data/courses-api (API) instead of @/data/courses (static).
• Categories: Import from @/data/categories-api (API) instead of @/data/categories (static).
• Blogs: Use @/data/blogs if it’s wired to the public blogs API.

Example (server or client component):

import { getCourses } from '@/data/courses-api'
import { getCategories } from '@/data/categories-api'

The API client and base URL are typically centralized in src/lib/api.ts.

Data transformation

Admin Panel API responses may not match the marketing site’s internal shape. Adapters (e.g. in courses-api.ts, categories-api.ts) usually:

• Map API fields to the format expected by components (e.g. slug, instructor, price, duration, level).
• Apply defaults for missing fields (e.g. price 0, level "Beginner").
• Generate slugs from titles if the API doesn’t provide them.

Fallback behavior

• If the API is unreachable or errors, the API-based modules often fall back to static data so the site still renders.
• Check the browser console or server logs for API errors when debugging.

CORS

When the marketing site and Admin Panel run on different origins (e.g. different ports or domains), the Admin Panel must allow the marketing origin for /api/public/*. Example in Admin Panel’s next.config.mjs:

async headers() {
  return [
    {
      source: '/api/public/:path*',
      headers: [
        { key: 'Access-Control-Allow-Origin', value: '*' },
        { key: 'Access-Control-Allow-Methods', value: 'GET' },
        { key: 'Access-Control-Allow-Headers', value: 'Content-Type' },
      ],
    },
  ]
}

Tighten Access-Control-Allow-Origin in production if needed.

Testing

1. Start the Admin Panel and ensure courses/categories/blogs are Published.
2. From the marketing project root:

   curl http://localhost:3000/api/public/courses
   curl http://localhost:3000/api/public/categories
   curl http://localhost:3000/api/public/blogs
   

3. Run the marketing site with NEXT_PUBLIC_API_BASE_URL=http://localhost:3000 and open /courses, /categories (and blog pages if used); confirm data matches the API.

Missing or extra fields

If the Admin Panel API doesn’t yet expose fields the marketing site needs (e.g. price, duration, level, learningOutcomes, prerequisites), you can:

• Extend the Admin Panel schema and public API to include them (see Admin Panel - Marketing API), and/or
• Keep using defaults in the marketing adapters until the API is updated.

For full adapter and field details, see the project’s API_INTEGRATION_SETUP.md in the marketing-homepage repo.