NewsSite Final Project

A full-stack, real-time news platform featuring AI capabilities, user management, article chat, push notifications, and text-to-speech.

---

Table of Contents

• Overview
• Key Features
• System Architecture
• Frontend Architecture
  • Technology Stack
  • Project Structure
  • Features and Patterns
• Backend Architecture
  • ASP.NET Core Web API
• Configuration Reference
• API Reference
• Security Posture
• License

---

Overview

The Problem

Modern news consumption is often isolated and passive. Readers skim articles but lack embedded community discussion, localized discovery features, or built-in accessibility tools like text-to-speech options for prolonged reading.

The Solution

NewsSite Final Project is a full-stack platform that transforms a standard news website into an interactive community. Users can read articles, listen to them via Text-to-Speech (TTS), engage in real-time article-specific chat, and locate top stories using an interactive world map. In addition, it integrates extensive AI, Scraping, and Social capabilities to augment content automatically seamlessly.

How It Works

1. Browse an extensive archive of global articles fetched via NewsAPI or locate regional trending Twitter hashtags using the interactive JQVMap.
2. Listen & Summarize articles on-the-go with built-in Text-to-Speech or generate an AI summary via HuggingFace models.
3. Discuss real-time events in article-specific Firebase chat rooms.
4. Manage a personalized profile (including generating custom AI avatars via HuggingFace texts-to-image integration before uploading directly to Cloudinary), save articles, and receive live Push Notifications (FCM).

---

Key Features

---

System Architecture

The application operates fundamentally split across three tiers: Edge (Frontend), API (Backend), and Data/External Services.

flowchart TD
    Client["Client (HTML/JS/CSS + Bootstrap)"]

    subgraph Frontend_App["Frontend Layer"]
        Pages["Static Pages (index, article, admin)"]
        SW["Service Worker (FCM)"]
    end

    subgraph Backend_App["API Layer (.NET 6)"]
        API["ASP.NET Core Web API"]
        BL["Business Logic Layer (BL)"]
        DAL["Data Access Layer (DAL)"]
    end

    subgraph External["External Services"]
        FirebaseFirestore["Firebase Firestore (Chat)"]
        FCM["Firebase Cloud Messaging"]
        Cloudinary["Cloudinary (Images)"]
        HuggingFace["HuggingFace (AI image & summary)"]
        NewsAPI["NewsAPI.org (Global News)"]
        TwitterAPI["Twitter API (Trends)"]
    end

    subgraph Data_Stores["Data Stores"]
        SQL["SQL Server"]
    end

    Client --> Pages
    Pages <--> API
    Pages <--> FirebaseFirestore
    SW <--> FCM
    API <--> BL
    BL <--> DAL
    DAL <--> SQL
    API <--> Cloudinary
    API <--> FCM
    API <--> HuggingFace
    API <--> NewsAPI
    API <--> TwitterAPI

---

Frontend Architecture

Technology Stack

Project Structure

Following a vanilla separation of concerns pattern:

• \client/news-moty/css/\ - Modular cascading stylesheets.
• \client/news-moty/js/\ - Page-specific logic scripts and shared utilities.
• \client/news-moty/pages/\ - Application views mapping to features.
• \client/firebase-messaging-sw.js\ - Service worker for background push operations.

Features and Patterns

• AJAX Modules: Specialized \jaxCalls.js\ for generic API fetching and error tracking.
• Progressive Enhancement: Using modern web APIs (Web Speech, Push API) safely falling back when unsupported.

---

Backend Architecture

ASP.NET Core Web API

The server operates on .NET 6 via an N-Tier architecture (Controllers > BL > DAL):

• Controllers: Thin controllers strictly focused on HTTP routing, request parsing, and delegating execution formatting to the Business Logic layer.
• Data Access Layer (DAL): Operates heavily via custom robust SQL Stored Procedures, providing transactional safety and fast query resolution over an MS SQL database.
• External Integrations: Centralized logic across \HuggingFaceService, \TwitterService, \NewsApiService\ and \ArticleExtractorService.

---

Configuration Reference

Setting Up

---

API Reference

A sample of core backend endpoints handling state operations.

---

Security Posture

---

License

This project is an educational final project. All rights reserved.