Inspiration

TimeScope was born from a personal frustration with "information decay" - the way news articles become outdated almost as soon as they're published. While reading a 2018 article about AI advancements during the hackathon brainstorming, I realized how dramatically the context had changed by 2024. The original predictions felt laughably conservative, yet there was no easy way to see this evolution visually.

I imagined a tool that would let readers "time travel" through news - instantly seeing both the original perspective and how history actually unfolded. This became particularly meaningful when testing with climate change articles, where the gap between projections and reality was often startling. The hackathon became an opportunity to turn this vision into something tangible that could help people develop more nuanced media literacy.

What it does

TimeScope transforms static news articles into dynamic timelines of understanding. Users input any article URL and receive:

• Original Summary: A faithful 5-sentence distillation of the 2018 perspective (for example)
• Modern Context: The same summary enhanced with 2024 updates in [brackets] and academic citations
• Interactive Timeline: 6-7 key events showing how the story evolved, with verified sources

The system handles everything from paywalled articles (via sophisticated extraction) to ambiguous publication dates (with multiple fallback strategies). What makes it special is the rigorous sourcing - every modern update includes proper citations, making it both informative and trustworthy.

How we built it

The architecture became more ambitious than originally planned:

Frontend:

• Next.js 15 with React Server Components for seamless transitions
• Framer Motion animations that make timeline events "pop" into place
• shadcn/ui components styled with Tailwind for professional aesthetics

Backend:

• Python FastAPI microservice for reliable article extraction (using newspaper3k with custom patches)
• Multi-layered date detection (analyzing metadata, URL patterns, and content)
• Perplexity Sonar API integration with a meticulously engineered prompt system

Key Innovation: The real magic happens in the prompt engineering - 27 iterations went into crafting instructions that force Perplexity to:

• Maintain strict JSON output format
• Balance original vs modern perspectives
• Include properly formatted citations
• Generate historically significant timeline events

I added a one-time Basic Auth at the API push point for this hackathon. User details have been shared to judges. This is only temporarily done to ensure the API is not abused.

Challenges we ran into

1. Date Detection Nightmares: Many articles either lack dates or bury them in obscure metadata fields. I have now made a four-stage fallback system (now handling 92% of test cases) emerged from a brutal debugging session.

2. JSON Parsing Wars: Perplexity would occasionally add Markdown syntax or truncate JSON. The solution was a JSON correction routine that carefully extracts and repairs malformed responses.

3. Animation Jank: Early timeline implementations caused layout shifts. I solved this with absolute positioning and Framer Motion's layout animations.

4. Ethical Sourcing: Ensuring modern updates were properly cited required building a citation validation system directly into the prompt structure.

Accomplishments that we're proud of

• The Timeline Component: Watching test users instinctively scroll through historical events with audible "wow" moments validated our design choices.

• Citation System: Achieving properly formatted academic citations from an LLM (something even major platforms struggle with) through prompt engineering.

• Error Recovery: When The Guardian changed their HTML structure during final testing, the system gracefully fell back to alternative parsing methods without failing.

Most importantly - creating something that makes people say "I never thought about news this way before."

What we learned

• The Power of Constraints: Forcing Perplexity into a strict JSON schema taught me more about prompt engineering than any tutorial.

• Defensive Coding Matters: Real-world web scraping requires anticipating dozens of failure modes we'd never considered in theory.

Perhaps the biggest lesson was emotional - learning to embrace "good enough" for an MVP rather than chasing perfection (my initial planned timeline had 11 event types before we simplified).

What's next for TimeScope

• Browser Extension: For one-click analysis while reading any article
• Comparative Mode: Side-by-side views of how different outlets covered the same story over time
• Educational Toolkit: AI generated lesson plans helping teachers use TimeScope for media literacy education

The dream is to make TimeScope THE tool for uncovering not just what was said, but how it held up over time. I'm particularly excited about potentially collaborating with newsrooms to create "living articles" that automatically update with new context.

This hackathon was just the beginning - I have barely scratched the surface of what temporal context can do for public understanding.

Built With

• fastapi
• framer-motion
• javascript
• json
• newspaper3k
• next.js-15-(and-api-routes)
• perplexity
• perplexity-sonar-api-(sonar-pro)
• python
• react-19
• render
• shadcn/ui
• sonar
• tailwind-css
• typescript
• uvicorn
• vercel