Vibe-coding a Headless News Website with Arc XP's View API in 2 hours
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, but I wanted to share the video here as well.
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.
Related Posts
- 8 min readI moved my blog from WordPress to Astro
- 4 min readWordPress Headless + CPT + ACF: Building a Flexible Content Platform
- 5 min readWhy People Are Moving from Next.js
- 3 min readSingle JavaScript file node/express/Instagram authentication (OAuth) and get user photos
- 6 min readSmart client-side rendered Mermaid Charts on Astro Blogs
- 3 min readFastify + Vercel: Single-File APIs in Minutes
Share