---
title: "Vibe-coding a Headless News Website with Arc XP's View API in 2 hours"
description: "A vibe-coding session demonstrating the construction of a news website using Arc XP's View API, Astro, and AI-powered tools is presented."
slug: vibe-coding-a-news-site-with-arcxp-view-api-in-2hrs
date: 2025-06-17
tags:
  - arc xp
  - astro
  - headless cms
  - api
  - vibe coding
---

import YouTube from "@components/YouTube.astro";

I recently recorded a long-form vibe-coding session where I built a headless news website using Arc XP's View API in just a few hours. The full walkthrough is published on the [Arc XP Developer Blog](https://dev.arcxp.com/blog/creating-news-site-with-ai-editor/), but I wanted to share the video here as well.

<YouTube id="17zY9JcWAbI" />

## What I covered in the session

This was an experiment to see how quickly we could build a news site using our headless content retrieval API, modern tools and approaches:

- 🧠 Planning the architecture for a headless news site
- 🚀 Setting up the project with Astro, Tailwind, and Windsurf (AI code editor)
- 🔐 Creating and managing delivery API keys for View API
- 🗺️ Building dynamic site navigation from API data
- 📰 Fetching and displaying stories by collection
- 🗂️ Implementing multiple content collections on the homepage
- ▶️ Creating a video content section with custom styling
- 📜 Building article detail pages with dynamic routing

The combination of Arc XP's structured content APIs, Astro's component model, and AI-assisted development made for mostly-smooth workflow. We hit some road blocks but were able to solve them. What would normally take days or weeks, compressed into few hours while maintaining clean, maintainable code.

If you're interested in headless CMS approaches, modern frontend frameworks, or just curious about how far AI-assisted development has come, check out the full video above.
