Beirut Scope - Local News Agency Website
Date
March 2026 - April 2026
Service
Web Development
Client
Beirut Scope Agency
Stack
Introduction
BeirutScope is a full-stack digital news platform inspired by leading regional outlets like Al Jazeera, and CNN. Built as a modern media product, it delivers categorized breaking news, featured articles, and live quick updates in a clean, fast, and bilingual-ready interface.
The platform is powered by Next.js with the App Router, TypeScript, Prisma 6, and PostgreSQL hosted on Neon. The site is divided into two sections: the public-facing site which is designed for speed and readability, while the admin side features a fully custom CMS for managing content without any third-party dependency.
BeirutScope's platform demonstrates end-to-end product ownership — from database schema and API design to editorial workflow and public UI.
Core Features
• Categorized News Feed
Articles are organized into named categories each with a unique slug, allowing readers to filter and browse content by topic. The homepage surfaces featured articles prominently while keeping the feed structured and navigable.
• Quick Updates Ticker
A live quick-updates system allows admins to push short-form breaking news — tagged as BREAKING or NORMAL — that appears as a scrolling ticker at the top of the page, mirroring real newsroom workflows.
• Full-Featured Admin CMS
The admin dashboard provides a complete content management experience: rich text article editing via TipTap, cover image uploads with Vercel Blob, draft/publish workflow, category management, and article reordering. No external CMS is used.
• Rich Text Editor with Media Support
Articles are written using a custom TipTap v3 editor with support for headings, lists, blockquotes, inline links, image uploads, and embedded media (YouTube, PDFs). Content is stored as structured JSON and rendered server-side.
• SEO-Optimized Public Pages
Every article page includes dynamic metadata, Open Graph tags, Twitter cards, and JSON-LD structured data for Google News and search discoverability.
• Secure Admin Authentication
Access to the CMS is protected by NextAuth v5 with a Credentials provider, JWT sessions, and a login rate limiter (5 attempts per 15 minutes) to prevent brute-force attacks.
Technical Architecture
BeirutScope follows a clean separation between public-facing pages and the protected admin layer using Next.js route groups:
(public)— homepage, article pages, category pages(dashboard)— admin CMS, editor, content management
Server Actions handle all mutations (create, update, delete), while React.cache() deduplicates database reads within the same request cycle. Security headers, CORS policies, and rate limiting are applied at the middleware level.
Database Design
The relational schema is managed with Prisma 6 and PostgreSQL, with models for:
categories
articles
quick updates
Articles carry a foreign key to their category, support featured flagging, view tracking, and JSON-based rich content. Indexes are applied on publishedAt, categoryId, and createdAt for query performance.
UI and User Experience
The public interface is built with TailwindCSS and designed to feel editorial — clean typography, structured grids, and a news-native layout. The homepage features a hero article, a featured strip, and a paginated feed with category filters.
The admin dashboard uses a distinct design system, minimal, functional, and distraction-free, so editors can focus entirely on content without the visual noise of the public site.
Collaboration
BeirutScope is a solo project. I handled the full scope of work: product design, database architecture, backend API, admin CMS, public UI, security configuration, and deployment infrastructure.
The platform is built to production standards and serves as a blueprint for how a real newsroom platform can be built independently.
