FocusFetch

FocusFetch is a full-stack content discovery app for technical and professional reading. It lets a user enter one or more keywords, pull matching posts from multiple sources, rank the results, and refine future ordering through lightweight interaction feedback.

The current MVP combines a Next.js frontend with a Flask backend and supports Reddit, Stack Overflow, and Medium out of the box.

What It Does

• Searches across multiple content sources from one query flow
• Scores results with lexical relevance, freshness, and source preference signals
• Stores interaction history in MongoDB when available, with a local JSON fallback for simpler setup
• Proxies frontend API calls through Next.js route handlers for cleaner browser-to-backend communication

Tech Stack

• Frontend: Next.js 14, React 18, TypeScript, Tailwind CSS
• Backend: Flask, scikit-learn, requests, BeautifulSoup
• Persistence: MongoDB or local JSON storage fallback
• Deployment helpers: Docker and Docker Compose

Repository Layout

.
|-- backend/    Flask API, ranking logic, source adapters, tests
|-- frontend/   Next.js UI and server-side proxy routes
|-- docker/     Dockerfiles and docker-compose setup
|-- README.md
|-- .gitignore
|-- .dockerignore

Architecture Overview

1. The user enters keywords and selects sources in the Next.js UI.
2. The frontend sends requests through local API routes in frontend/src/app/api/*.
3. Those routes proxy requests to the Flask backend.
4. The backend fetches content from enabled sources, ranks it, and returns normalized items.
5. Favorite interactions are stored and later reused as lightweight preference signals.

Core Features

Multi-source search

The backend currently queries:

• reddit
• stackoverflow
• medium

The source list is configurable through the backend environment.

Ranking

Each result can include:

• lexical relevance
• freshness score
• preference score

The combined ranking is designed to keep the MVP explainable while still feeling personalized.

Storage fallback

If MONGODB_URI is configured, FocusFetch uses MongoDB. Otherwise it falls back to a local JSON store, which keeps local development simple.

Local Development

1. Start the backend

cd backend
python3 -m venv .venv
. .venv/bin/activate
pip install -r requirements.txt
python -m app.main

Default backend URL: http://127.0.0.1:5050

2. Start the frontend

cd frontend
npm install
cp .env.local.example .env.local
npm run dev

Default frontend URL: http://localhost:3000

The frontend expects BACKEND_API_URL in frontend/.env.local. The example file points to the default local Flask server.

Docker

To run the full stack with Docker Compose:

docker compose -f docker/docker-compose.yml up --build

This starts:

• frontend on http://localhost:3000
• backend on http://localhost:5050
• MongoDB on mongodb://localhost:27017

Environment Configuration

Backend

Example file: backend/.env.example

Common settings:

• PORT
• MONGODB_URI
• DB_NAME
• ENABLED_SOURCES
• REQUEST_TIMEOUT
• SOURCE_LIMIT
• MAX_CONTENT_LENGTH
• FRESHNESS_HALF_LIFE_DAYS
• ENABLE_BERT_RERANK
• BERT_MODEL
• SEMANTIC_TOP_N

Frontend

Example file: frontend/.env.local.example

Common setting:

• BACKEND_API_URL

API Endpoints

The Flask backend exposes these main routes under /api:

• GET /api/health
• GET /api/sources
• POST /api/search
• POST /api/user/interact
• GET /api/content/<content_id>

The Next.js app also exposes proxy routes for the UI:

• GET /api/sources
• POST /api/search
• POST /api/interactions

Validation

Backend tests

cd backend
python -m pytest

Frontend checks

cd frontend
npm run typecheck
npm run lint
npm run build

Current MVP Notes

• Semantic reranking is present behind configuration but is not the primary default path.
• Source adapters are intentionally modular so more providers can be added later.
• The app is optimized for a readable MVP workflow rather than a production search cluster.