Hampton Girl News

A modern, high-performance news media website for local township news and current events.

Overview

Hampton Girl News is an Astro-powered news platform designed for blazing-fast delivery of local news articles. Built with a headless CMS architecture and programmatic-first approach, the platform prioritizes performance, scalability, SEO, and developer experience with AI-ready workflows.

Tech Stack

• Frontend: Astro 4+ (Static Site Generator)
• UI Components: React (Islands Architecture)
• Styling: Tailwind CSS
• Language: TypeScript
• CMS: Payload CMS (Headless)
• Database: Supabase PostgreSQL
• Media Storage: Supabase Storage
• Deployment:
  • Frontend: Vercel
  • CMS: Railway

Core Principles

1. Performance First: Zero JavaScript by default, optimized for fast page loads and perfect Core Web Vitals
2. Scalability: Headless architecture designed to handle growing content and traffic
3. Developer Experience: Streamlined workflows for both manual and programmatic article creation
4. Type Safety: Full TypeScript implementation across the stack
5. SEO Optimized: Static generation, semantic HTML, and perfect metadata
6. AI-Ready: API-first CMS perfect for automated content workflows

Project Structure

hamptongirl/
├── astro-frontend/              # Astro static site
│   ├── src/
│   │   ├── pages/              # Astro pages (routes)
│   │   ├── components/         # React & Astro components
│   │   ├── layouts/            # Page layouts
│   │   ├── lib/                # Utilities
│   │   └── styles/             # Global styles
│   ├── public/                 # Static assets
│   └── astro.config.mjs        # Astro configuration
│
├── payload-cms/                 # Payload CMS (separate deployment)
│   ├── src/
│   │   ├── collections/        # Content collections (Articles, Authors, etc.)
│   │   ├── access/             # Access control
│   │   └── hooks/              # Lifecycle hooks
│   ├── payload.config.ts       # Payload configuration
│   └── server.ts               # Express server
│
├── docs/                        # Project documentation
│   ├── ARCHITECTURE.md
│   ├── DATABASE_SCHEMA.md
│   ├── ARTICLE_WORKFLOW.md
│   ├── SETUP.md
│   └── DEVELOPMENT.md
│
└── scripts/                     # Deployment and utility scripts

Key Features

• 📰 Headless CMS with admin UI for manual content management
• 🤖 API-first architecture for programmatic content creation (AI workflows)
• ⚡ Zero JavaScript by default (fastest possible page loads)
• 🖼️ Automatic image optimization and CDN delivery via Supabase
• 🔍 SEO optimized with static generation, proper metadata, and Open Graph tags
• 📱 Fully responsive design with Tailwind CSS
• 🏝️ Islands Architecture (React components only where needed)
• 🏷️ Category and tag system for content organization
• 🔗 Related articles and content discovery
• 📊 Built-in analytics and view tracking
• 🔐 Secure admin interface with role-based access control

Getting Started

See docs/SETUP.md for detailed setup instructions.

Documentation

• Architecture Overview
• Database Schema
• Article Workflow
• Development Guide

Article Management

Articles can be managed in two ways:

1. Manual: Via Payload CMS admin UI at /admin
2. Programmatic: Via Payload REST/GraphQL API for AI workflows and scripts

See docs/ARTICLE_WORKFLOW.md for the complete workflow.

Environment Variables

Frontend (Astro)

# Payload CMS API
PAYLOAD_API_URL=https://your-payload-instance.railway.app

# Site Configuration
PUBLIC_SITE_URL=https://hamptongirl.com
PUBLIC_SITE_NAME=Hampton Girl News

CMS (Payload)

# Database (Supabase)
DATABASE_URI=postgresql://postgres:[password]@[host]/postgres

# Supabase Storage
SUPABASE_URL=https://[project-id].supabase.co
SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_KEY=your-service-key
SUPABASE_BUCKET_NAME=hamptongirl-media

# Payload Configuration
PAYLOAD_SECRET=your-secret-key
PAYLOAD_PUBLIC_SERVER_URL=https://your-payload-instance.railway.app

# Optional: Webhooks
VERCEL_DEPLOY_HOOK_URL=https://api.vercel.com/v1/integrations/deploy/...

License

All rights reserved.