Build custom newsroom frontends on Fanvaiy

Build a single page magazine frontend with Vite, React, TypeScript, React Router and Tailwind, reading everything from the Fanvaiy public API described below.

Routes
- / for the latest stories, with the featured one pulled out on top.
- /category/:slug for one category.
- /story/:id for the full story, including the narration audio when the response carries it.
- /search for a debounced search box wired to the search parameter.

Data layer
- TanStack Query for every call, staleTime five minutes, retry once, with a small typed wrapper around fetch rather than raw calls in components.
- The site call runs once at startup and its branding is shared through a context, so components read the publication name, logo and colour without refetching.
- A Load more button that increments page and appends results, stopping when page reaches meta.totalPages.

Polish
- Skeleton cards while loading, an empty state when a category or search has no stories, and an error state with a retry button.
- Update document.title and the meta description on every route change.
- The story page shows the cover image with its caption, the byline when an author is present, and a share button that uses the post url field.

Rules
- Type every shape from the contract below, with nullable fields marked nullable.
- Render body with dangerouslySetInnerHTML inside a prose wrapper.
- Never render an author block without checking that author exists.

Fanvaiy public API, read only, no authentication, no SDK, CORS open to every origin.

Base URL
https://fanvaiy.com/api/public/v1

Site key
Anywhere SITE appears below, use the publication's site id, its subdomain, or its custom domain.

Endpoints, all GET, all returning JSON

GET /sites/SITE
  { "data": site }

GET /sites/SITE/categories
  { "data": [category] }

GET /sites/SITE/posts?category=&featured=&search=&page=&limit=
  { "data": [post without body], "meta": { "page", "limit", "total", "totalPages" } }
  category takes a category slug, featured takes true or false, search matches title and summary,
  limit runs 1 to 50 and defaults to 20, page defaults to 1.

GET /sites/SITE/posts/POST_ID
  { "data": post with body }

Shapes

site = {
  id, name, name_en, slogan, description, color, logo, favicon, theme, lang, domain, subdomain, url,
  social: { twitter, instagram, facebook },
  contact: { email, phone, address },
  legal: { terms, privacy, codeOfConduct },
  seo: { ogTitle, ogDescription, ogImage, ogKeywords },
  categories: [category]
}

category = {
  id, name, name_en, slug, description, image,
  categoryStyle, isPromoted, layoutWeight, externalUrl, hideFromHome
}

post = {
  id, title, latin, summary, image, imageCaption, videoUrl, isFeatured,
  publishedAt (ISO 8601 string), likes, tags (array or null), url (canonical page on the publisher's own site),
  body (HTML, single post responses only),
  audio: { url, duration } (present only when the story has a narration),
  category, author: { id, name, name_en, profilePicture }
}

Rules to code against
- The author key is absent, not null, when the publisher hides the byline, so guard for it everywhere.
- Paid, draft and unpublished stories are never returned, so everything you receive is safe to show.
- name_en and latin are Latin script companions of name and title, used by publications writing in Dhivehi. Fall back to name and title.
- body is publisher authored HTML and is meant to be rendered as HTML, not escaped.
- Posts come back newest first. There is no sort parameter.
- Any missing site or story answers 404 with a JSON body. Nothing else is thrown.
- image, videoUrl, imageCaption, tags, slogan, logo and most site fields can be null, so type them as nullable.
- Every response carries ETag and Cache-Control. The safety limit is 300 requests a minute per IP, so cache on your side and never call the API once per rendered card.

Build a statically generated publication with Astro and Tailwind that reads the Fanvaiy public API described below at build time and ships almost no JavaScript.

Build
- getStaticPaths for every story and every category, paging through the posts endpoint until page equals meta.totalPages so no story is ever missed.
- A shared src/lib/fanvaiy.ts with typed helpers, called only from frontmatter, never from the browser.
- The site key comes from an environment variable read through import.meta.env.

Output
- Home page with the featured story, the latest stories and a category rail.
- Category pages with static pagination.
- Story pages rendering body with set:html inside a prose wrapper, plus the cover image, its caption, the byline when present and the narration audio when present.
- An RSS feed at /rss.xml built with @astrojs/rss from the newest fifty stories, and a sitemap through @astrojs/sitemap.
- Open Graph and Twitter tags on every page from the site seo block, overridden per story.

Client side
- Exactly one island, a search box that queries the posts endpoint live with the search parameter and renders results below itself. Everything else stays static HTML.

Rules
- Remote images need their host allowed in the Astro image config, so list the hosts the API returns.
- Guard every nullable field, especially author, image and tags.
- Add a short README note explaining that the site needs a rebuild to pick up newly published stories, and suggest a scheduled rebuild or a deploy hook.

Fanvaiy public API, read only, no authentication, no SDK, CORS open to every origin.

Base URL
https://fanvaiy.com/api/public/v1

Site key
Anywhere SITE appears below, use the publication's site id, its subdomain, or its custom domain.

Endpoints, all GET, all returning JSON

GET /sites/SITE
  { "data": site }

GET /sites/SITE/categories
  { "data": [category] }

GET /sites/SITE/posts?category=&featured=&search=&page=&limit=
  { "data": [post without body], "meta": { "page", "limit", "total", "totalPages" } }
  category takes a category slug, featured takes true or false, search matches title and summary,
  limit runs 1 to 50 and defaults to 20, page defaults to 1.

GET /sites/SITE/posts/POST_ID
  { "data": post with body }

Shapes

site = {
  id, name, name_en, slogan, description, color, logo, favicon, theme, lang, domain, subdomain, url,
  social: { twitter, instagram, facebook },
  contact: { email, phone, address },
  legal: { terms, privacy, codeOfConduct },
  seo: { ogTitle, ogDescription, ogImage, ogKeywords },
  categories: [category]
}

category = {
  id, name, name_en, slug, description, image,
  categoryStyle, isPromoted, layoutWeight, externalUrl, hideFromHome
}

post = {
  id, title, latin, summary, image, imageCaption, videoUrl, isFeatured,
  publishedAt (ISO 8601 string), likes, tags (array or null), url (canonical page on the publisher's own site),
  body (HTML, single post responses only),
  audio: { url, duration } (present only when the story has a narration),
  category, author: { id, name, name_en, profilePicture }
}

Rules to code against
- The author key is absent, not null, when the publisher hides the byline, so guard for it everywhere.
- Paid, draft and unpublished stories are never returned, so everything you receive is safe to show.
- name_en and latin are Latin script companions of name and title, used by publications writing in Dhivehi. Fall back to name and title.
- body is publisher authored HTML and is meant to be rendered as HTML, not escaped.
- Posts come back newest first. There is no sort parameter.
- Any missing site or story answers 404 with a JSON body. Nothing else is thrown.
- image, videoUrl, imageCaption, tags, slogan, logo and most site fields can be null, so type them as nullable.
- Every response carries ETag and Cache-Control. The safety limit is 300 requests a minute per IP, so cache on your side and never call the API once per rendered card.

Build a mobile news reader with Expo, expo-router and TypeScript, reading from the Fanvaiy public API described below.

Screens
- A Latest tab with an infinite feed, pull to refresh and a large card for the featured story.
- A Categories tab listing the categories from the site payload, each opening a filtered feed.
- A Search tab with a debounced query against the search parameter.
- A Saved tab listing stories the reader kept.
- A story screen rendering body with react-native-render-html, the cover image with its caption, the byline when present and the published date.

Behaviour
- Fetch through a typed client with an in memory cache plus AsyncStorage, so the last loaded feed and any opened story still render with no connection.
- Saved stories persist in AsyncStorage and survive a restart.
- When the story carries audio, show a play control that streams it with expo-av and keeps a mini player visible while the reader scrolls.
- The share action uses the post url field so readers land on the publisher's own page.
- Branding comes from the site call on launch, with the colour driving accents and the logo shown in the header.

Rules
- Use FlashList for the feeds and paginate with page and meta.totalPages.
- Show skeletons while loading, an empty state per feed and a retry on failure.
- Guard every nullable field, especially author, image and tags.

Fanvaiy public API, read only, no authentication, no SDK, CORS open to every origin.

Base URL
https://fanvaiy.com/api/public/v1

Site key
Anywhere SITE appears below, use the publication's site id, its subdomain, or its custom domain.

Endpoints, all GET, all returning JSON

GET /sites/SITE
  { "data": site }

GET /sites/SITE/categories
  { "data": [category] }

GET /sites/SITE/posts?category=&featured=&search=&page=&limit=
  { "data": [post without body], "meta": { "page", "limit", "total", "totalPages" } }
  category takes a category slug, featured takes true or false, search matches title and summary,
  limit runs 1 to 50 and defaults to 20, page defaults to 1.

GET /sites/SITE/posts/POST_ID
  { "data": post with body }

Shapes

site = {
  id, name, name_en, slogan, description, color, logo, favicon, theme, lang, domain, subdomain, url,
  social: { twitter, instagram, facebook },
  contact: { email, phone, address },
  legal: { terms, privacy, codeOfConduct },
  seo: { ogTitle, ogDescription, ogImage, ogKeywords },
  categories: [category]
}

category = {
  id, name, name_en, slug, description, image,
  categoryStyle, isPromoted, layoutWeight, externalUrl, hideFromHome
}

post = {
  id, title, latin, summary, image, imageCaption, videoUrl, isFeatured,
  publishedAt (ISO 8601 string), likes, tags (array or null), url (canonical page on the publisher's own site),
  body (HTML, single post responses only),
  audio: { url, duration } (present only when the story has a narration),
  category, author: { id, name, name_en, profilePicture }
}

Rules to code against
- The author key is absent, not null, when the publisher hides the byline, so guard for it everywhere.
- Paid, draft and unpublished stories are never returned, so everything you receive is safe to show.
- name_en and latin are Latin script companions of name and title, used by publications writing in Dhivehi. Fall back to name and title.
- body is publisher authored HTML and is meant to be rendered as HTML, not escaped.
- Posts come back newest first. There is no sort parameter.
- Any missing site or story answers 404 with a JSON body. Nothing else is thrown.
- image, videoUrl, imageCaption, tags, slogan, logo and most site fields can be null, so type them as nullable.
- Every response carries ETag and Cache-Control. The safety limit is 300 requests a minute per IP, so cache on your side and never call the API once per rendered card.

Build one self contained index.html, no framework, no build step and no dependencies, that renders a whole publication from the Fanvaiy public API described below.

Structure
- A single file with the CSS in a style block and the JavaScript in a script block at the end.
- Hash routing, so #/ shows the latest stories, #/category/SLUG shows one category and #/story/ID shows a full story.
- The site key sits in one clearly marked constant at the top of the script.

Rendering
- Header with the publication logo, name and category links, all read from the site call made once on load.
- The latest stories as cards showing image, title, summary, category and date.
- A story view with the cover image, its caption, the byline when an author is present, the date and the body inserted as HTML.
- A Load more button that pages through the results.

Style
- A system font stack, a readable measure of around 70 characters, generous white space, borders rather than shadows, and light and dark handled with prefers-color-scheme.
- Responsive down to a narrow phone with plain CSS grid.

Rules
- Handle loading, empty and error states in every view.
- Escape text you insert, apart from body, which is publisher HTML and goes in as HTML.
- Keep the whole thing readable, commented, and under roughly four hundred lines, so someone can open it and understand it in a sitting.

Fanvaiy public API, read only, no authentication, no SDK, CORS open to every origin.

Base URL
https://fanvaiy.com/api/public/v1

Site key
Anywhere SITE appears below, use the publication's site id, its subdomain, or its custom domain.

Endpoints, all GET, all returning JSON

GET /sites/SITE
  { "data": site }

GET /sites/SITE/categories
  { "data": [category] }

GET /sites/SITE/posts?category=&featured=&search=&page=&limit=
  { "data": [post without body], "meta": { "page", "limit", "total", "totalPages" } }
  category takes a category slug, featured takes true or false, search matches title and summary,
  limit runs 1 to 50 and defaults to 20, page defaults to 1.

GET /sites/SITE/posts/POST_ID
  { "data": post with body }

Shapes

site = {
  id, name, name_en, slogan, description, color, logo, favicon, theme, lang, domain, subdomain, url,
  social: { twitter, instagram, facebook },
  contact: { email, phone, address },
  legal: { terms, privacy, codeOfConduct },
  seo: { ogTitle, ogDescription, ogImage, ogKeywords },
  categories: [category]
}

category = {
  id, name, name_en, slug, description, image,
  categoryStyle, isPromoted, layoutWeight, externalUrl, hideFromHome
}

post = {
  id, title, latin, summary, image, imageCaption, videoUrl, isFeatured,
  publishedAt (ISO 8601 string), likes, tags (array or null), url (canonical page on the publisher's own site),
  body (HTML, single post responses only),
  audio: { url, duration } (present only when the story has a narration),
  category, author: { id, name, name_en, profilePicture }
}

Rules to code against
- The author key is absent, not null, when the publisher hides the byline, so guard for it everywhere.
- Paid, draft and unpublished stories are never returned, so everything you receive is safe to show.
- name_en and latin are Latin script companions of name and title, used by publications writing in Dhivehi. Fall back to name and title.
- body is publisher authored HTML and is meant to be rendered as HTML, not escaped.
- Posts come back newest first. There is no sort parameter.
- Any missing site or story answers 404 with a JSON body. Nothing else is thrown.
- image, videoUrl, imageCaption, tags, slogan, logo and most site fields can be null, so type them as nullable.
- Every response carries ETag and Cache-Control. The safety limit is 300 requests a minute per IP, so cache on your side and never call the API once per rendered card.