sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
abd322871b
folx-tv/replit.md
sebastjanartic abd322871b Restored to '7aa09373aacdcc1083018c718e608e30b6be2b33' 
Replit-Restored-To: 7aa09373aa
2026-02-28 20:34:36 +00:00

2.5 KiB
Raw Blame History

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