amal-thomas-dev/news-scraper-website

Purpose and entry points

Crewe News Scraper is a two-process application that collects current articles from Crewe Nub News and presents them in a Vue UI. The backend exposes GET /api/articles on port 5001; the frontend Vite app runs separately on port 5173.

• Backend startup and HTTP routing: backend/src/index.ts

• Frontend browser bootstrap: frontend/src/main.js

• Root UI composition: frontend/src/App.vue

Backend API boundary

The Express service is the sole boundary between the browser and the publisher’s site. It owns article retrieval, extraction, normalization, and API response behavior rather than exposing scraping implementation to the frontend.

• Server/API endpoint: backend/src/index.ts

• Shared article/request data shapes: backend/src/types.ts

Scraping pipeline

Article collection is centered in the scraper module. Its declared stack—Axios, Cheerio, and Puppeteer—indicates layered retrieval: lightweight HTTP/HTML parsing where possible, with browser automation available for pages requiring rendered content. The scraper transforms publisher markup into the backend’s article model before it reaches the API.

• Scraper orchestration and publisher integration: backend/src/scraper.ts

• Parsing/normalization support: backend/src/utils.ts

• Output contracts: backend/src/types.ts

External dependency and operational boundary

Crewe Nub News is an external, mutable upstream source. Scraping is therefore the main reliability boundary: upstream HTML changes, availability, anti-bot behavior, or JavaScript-rendered pages can affect /api/articles. Puppeteer also introduces a browser-runtime dependency beyond the normal Node/Express process.

• Backend package/runtime definition: backend/package.json

• Scraping integration: backend/src/scraper.ts

Frontend application flow

The Vue application mounts from main.js, composes the application shell in App.vue, and uses the Home view as the article-listing screen. The expected primary flow is browser load → Home fetches the backend endpoint → returned article records are rendered as reusable cards.

• Vue bootstrap: frontend/src/main.js

• Application shell: frontend/src/App.vue

• Primary data-fetching/listing view: frontend/src/views/Home.vue

Presentation components

The UI separates page-level article state from reusable presentation units. Header provides shared top-level chrome, while ArticleCard renders individual normalized article records. This keeps publisher-specific extraction details behind the API contract.

• Shared navigation/header: frontend/src/components/Header.vue

• Per-article renderer: frontend/src/components/ArticleCard.vue

• Global visual styles: frontend/src/index.css

Material runtime and build infrastructure

Backend execution is Node.js with Express and TypeScript compilation/runtime configuration. Frontend execution is Vue 3 through Vite, with Tailwind/PostCSS handling styling. There is no repository evidence of a database, queue, cache, authentication service, or deployment infrastructure; article data is retrieved from the upstream source at request-time or according to scraper behavior.

• TypeScript compiler settings: backend/tsconfig.json

• Vite runtime/build configuration: frontend/vite.config.js

• Tailwind styling configuration: frontend/tailwind.config.js