Project Info
Inspiration
Tech develops at a rapid pace and there is a need to stay updated for professionals. Reading tech newsletters like TLDR feels like homework. The information is useful but nobody actually has time to sit down and read paragraphs. We wanted to see if we could make the same content more watchable and honestly more fun.
What it does
NewsReel pulls daily stories from TLDR and turns each one into a short AI-generated cartoon video. Swipe right to save a story and link to the full article, swipe left to skip.
How we built it
Scraped TLDR for daily stories, used Claude to write a video script for each one, then called the Pika 2.2 API via fal.ai to generate the cartoon video. FastAPI backend, Next.js frontend, stories stored in a JSON file. Videos are pre-generated in a batch so the feed loads instantly.
Challenges we ran into
Getting Pika to consistently match a visual style took a lot of prompt iteration. More time was spent than we should have figuring out that pika.art and fal.ai are two different things, one is the consumer app, the other is the actual API.
Accomplishments we're proud of
Getting the full pipeline working end to end scraping a real newsletter, generating a script with Claude, and producing an actual cartoon video with Pika
What we learned
Writing good prompts for video generation is harder than it looks. Specificity is important, vague prompts get generic videos that might not match the actual news content.
What's next
Support for any newsletter URL, more theme options, and a mobile app where the swipe feels more natural.
Newsreel
Tech news as a Tinder-style video feed. TLDR newsletter → Claude scripts → Pika videos → swipe through in 5 minutes.
Stack
| Layer | Tech |
|---|---|
| Scraper | Python + BeautifulSoup → tldr.tech/tech |
| Scripts | Claude Sonnet 4.6 |
| Videos | Pika (fal.ai or pika.me dev API) |
| Backend | FastAPI — 2 endpoints |
| Storage | stories.json (no database) |
| Frontend | Next.js + Tailwind — full viewport mobile feel |
Quick start
1. Backend
cd backend
python -m venv .venv && source .venv/bin/activate
pip install -r requirements.txt
cp .env.example .env
# Set ANTHROPIC_API_KEY
uvicorn app.main:app --reload --port 8000
Demo stories are pre-loaded in data/stories.json — frontend works immediately (shows scripts until videos are generated).
2. Generate scripts (Hours 1–4)
# Scrape TLDR + Claude scripts, print to terminal
python scripts/scrape_and_script.py --limit 5
# Write to stories.json
python scripts/scrape_and_script.py --limit 5 --write
# Fallback if TLDR blocks scraping
python scripts/scrape_and_script.py --demo --write
3. Generate videos (Hours 4–7, at Pika booth)
# Set FAL_KEY or PIKA_API_KEY in .env
python scripts/generate_videos.py
python scripts/generate_videos.py --id 1 # one story
4. Frontend
cd frontend
npm install
npm run dev
API
GET /stories → all stories from stories.json
POST /stories/{id}/save → flip saved: true
Frontend controls
| Action | How |
|---|---|
| Skip | ← key, ✕ button, swipe/drag left |
| Save | → key, ✓ button, swipe/drag right |
| Saved library | Top-right link or /saved |
Build order (from guide)
- Hours 1–4 —
scrape_and_script.py, get 5 good scripts in terminal - Hours 4–7 — Pika booth,
generate_videos.py, tweak pika_prompts - Hours 7–12 — Frontend (done), polish animations
- Hours 12–15 — Deploy, rehearse demo
Demo script
"Tech news is exhausting. TLDR sends 20 stories a day and reading it feels like homework. So we automated the part everyone actually wants — the video explainer."
Let first video play 10 seconds. Click right → next slides in. Click left on one. Open Saved → Read Article.
"Newsreel. Tech news you'll actually watch."
Risks
| Risk | Fix |
|---|---|
| TLDR blocks scraping | --demo flag + hardcoded stories.json |
| Pika slow | Pre-generate before demo, never on-demand |
| Videos look bad | Tune pika_prompt quality, test 10+ |
| No API keys yet | Frontend shows script text overlay (works without video) |
Analysis
View
Metric
- 1
- 1
Figures cover GitHub contributors during the hackathon window. A co-authored commit counts in full for each author, so per-member totals add up to more than the whole-team figures.
Technology
- AnthropicIn code
- CSSIn code
- FastAPIIn code
- JavaScriptIn code
- Next.jsIn code
- PythonIn code
- ReactIn code
- Tailwind CSSIn code
- TypeScriptIn code
9 of 9 appear in the indexed code.
AI coding agents
- CursorCommits
Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.
Codebase size
Source size
123 KB
Source files
39
Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.
Repository
Wilson730/Newsreel
180 files · 112.7 MB · @ e04e3d1
Structure
Interface
25 files · 14%Screens, components and styles rendered to the user.
Application logic
5 files · 3%Domain rules, services and shared utilities.
Supporting
Layers are inferred from where files sit in the tree, not from reading the code. A project that names its directories unconventionally will read oddly here — open the file browser to check anything the diagram implies.
Languages
- Python49%
- TypeScript48%
- Markdown2%
- CSS0%
- JavaScript0%
Share of indexed source by file size. Binary and vendored files are excluded.
Dependencies
frontend/package.json
npm · 10- next
- react
- react-dom
- +7 more
backend/requirements.txt
pypi · 6- anthropic
- beautifulsoup4
- fastapi
- httpx
- python-dotenv
- uvicorn[standard]
Declared in the repository’s manifests at the indexed commit. A declared package is not proof it is used, and runtime dependencies are listed first.
Export this project's context (description, README, evidence, key source files) to chat with an AI agent elsewhere.