# news.folx.tv - Blog Platform ## Overview A clean, modern blog/news platform for Folx Music Television (news.folx.tv). Dark-themed, content-first design inspired by Medium and The Verge, with support for video embeds from bunny.net, Facebook, Instagram, and TikTok. ## Architecture - **Frontend**: React + Vite + TailwindCSS + shadcn/ui (dark mode) - **Backend**: Express.js + Node.js - **Database**: PostgreSQL with Drizzle ORM - **Routing**: wouter (frontend), Express (backend API) ## Key Features - Article listing with featured carousel, grid layout, and popular sidebar - Individual article pages with full HTML content rendering - Category filtering (News, Star-News) - HTML content supports embedded iframes (bunny.net, YouTube, Facebook, Instagram, TikTok) - DOMPurify sanitization for safe HTML rendering - Image upload endpoint (multer) for article images - Responsive design with mobile navigation - SEO meta tags ## Data Model - `articles`: id (serial), title, slug (unique), excerpt, content (HTML), coverImage, category, author, featured, views, publishedAt ## API Endpoints - `GET /api/articles` - All articles - `GET /api/articles/featured` - Featured articles - `GET /api/articles/popular` - Popular articles by views - `GET /api/articles/category/:category` - Filter by category - `GET /api/articles/:slug` - Single article (increments views) - `POST /api/articles` - Create article - `PATCH /api/articles/:id` - Update article - `DELETE /api/articles/:id` - Delete article - `POST /api/upload` - Upload image file ## File Structure - `shared/schema.ts` - Drizzle schema + Zod validation - `server/db.ts` - Database connection (pg Pool) - `server/storage.ts` - Storage interface + DatabaseStorage implementation - `server/routes.ts` - API routes + file upload (multer) - `server/seed.ts` - Seed data for initial articles - `client/src/pages/home.tsx` - Homepage - `client/src/pages/article.tsx` - Article detail page - `client/src/pages/category.tsx` - Category listing page - `client/src/components/header.tsx` - Site header with nav - `client/src/components/footer.tsx` - Site footer ## Video Embeds Article content (HTML) supports iframe embeds. Allowed domains: - iframe.mediadelivery.net / video.bunny.net (Bunny.net) - www.facebook.com, www.instagram.com, www.tiktok.com - www.youtube.com, player.vimeo.com ## Branding - Dark theme by default (class="dark" on html) - Primary color: crimson/red (hsl 342 85% 53% light, hsl 9 75% 61% dark) - Font: Poppins - Logo: Folx TV branding image in header