React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

recommsys

Repository for our Recommendation System project (UCL COMP 2025).
It contains the frontend, backend, and shared code in one repository.

Project Structure

│
├── web/ # React + Vite frontend (TypeScript + Axios)
├── worker/ # Express + TypeScript backend (feeds API)
├── shared/ # Shared TypeScript types and Zod schemas
├── package.json # Root workspaces + scripts
├── package-lock.json
└── README.md

Worker

Backend service for recommsys.

Setup

npm install

Run the project

npm run dev

Frontend → http://localhost:5173 Backend → http://localhost:8787

Run only the frontend:

npm run dev:web

Run only the backend:

npm run dev:worker

Build (for deployment)

Builds both frontend + backend:

npm run build

Lint (frontend only):

npm run lint

Dependencies

Backend (worker/)

• express → web server framework
• cors → allow cross-origin requests (frontend ↔ backend)
• rss-parser → fetch and parse RSS feeds
• zod → schema validation
• Dev: typescript, ts-node, nodemon, @types/node, @types/express

---

Frontend (web/)

• react, react-dom → UI framework
• axios → HTTP client for API requests
• Dev: vite, @vitejs/plugin-react, typescript, eslint, typescript-eslint

---

Root

• concurrently → run frontend + backend in parallel (npm run dev)

API Contract

GET /health

• Description: Health check endpoint
• Response:

{ "ok": true }

---

GET /feeds

• Description: Returns a list of normalized feed items
• Response (array of FeedItem):

{
  id: string,
  title: string,
  source: string,
  link: string,
  authors: string[],
  summary?: string,
  type: "paper" | "blog" | "repo",
  date: string, // ISO format
  tags: string[]
}

---

Development Notes

• CORS → allows frontend to fetch from backend
• Nodemon → restarts backend automatically when files change
• Axios → used in frontend for API requests
• Shared schemas → in /shared, keep frontend + backend in sync

---

Authors