PONDER

PONDER is a layered story aggregation platform that lets you curate, reflect, and share who you really are in greater depth—one layer at a time.

Comment

Inspiration

PONDER was born from a moment of quiet reflection beside a serene pond. As I watched the gentle ripples undulate over lily pads and koi, it struck me how much our inner and outer lives resemble the layers of a pond, or how humanity thrive and progress in general.

On the surface, we present concise reflections—our immediate thoughts and stories - what we want to show to others. Beneath that lies a deeper current of hidden insights and emotions - our curious and amused self-predilections - and even further down, the full, rich narrative that shapes who we are - our critical wisdom, knowledge and wishful dreams we keep only to ourselves.

This layered metaphor inspired PONDER: an app that maps personal and news stories across concentric depths. By blending human storytelling with AI-powered reflections, PONDER invites users to explore their narratives at their own pace—whether skimming surface summaries, pondering AI-generated insights, or diving into the full story beneath.

It’s a new way to engage with content that respects the complexity of thought and encourages deeper understanding.

What it does

  • Fetches news or personal “StoryPads” and displays them in concentric depth layers
  • Surface layer: concise excerpts
  • Ponder layer: AI-generated reflections or “Thoughts to Ponder”
  • Deep layer: Critical thoughts, deep dreams, personal and private musings
  • Filters and toggles let you show only excerpts, only YouTube sources, or only pads with AI analysis
  • Caches collections locally and provides toast-based confirm/remove UX

At its core, PONDER fetches and organizes news articles or personal “StoryPads” into three intuitive layers of depth. The surface layer offers concise excerpts, perfect for quick browsing. The Ponder layer reveals AI-generated reflections—thought-provoking insights that add context and spark curiosity. Finally, the deep layer presents the full content, complete with rich formatting and source highlights, allowing users to immerse themselves fully.

While these are ideal settings for PONDER depths, users are free to 'float' or 'sink' their StoryPads to different levels. When we eventually open PONDER to cross-sharing their "ponds" with other "Ponderers", the significance of what others can see on your Surface, versus what you reserve to show from your Ponder or Deep levels will become truly personal, private and precious.

With PONDER, users can customize their experiences with powerful filters and toggles, choosing to view only excerpts, YouTube-sourced stories, or those enriched with AI analysis. To ensure smooth browsing, PONDER caches collections locally and provides clear, toast-based confirmations for actions like refreshing or clearing the cache, making offline exploration seamless and intuitive.

How we built it

  • Frontend: React + TypeScript, Tailwind CSS, Framer Motion for smooth animations
  • Data & API: Supabase functions to scrape and sanitize stories; React hooks + context for global state
  • UX: react-hot-toast for notifications & inline confirmation modals; localStorage for offline cache
  • Architecture: Modular components (FilterPanel, ArticleGrid, StoryPad), hooks (useAuth, useDepthSettingsStore)
  • AI integration: Selection models like OpenAI API (GPT-4o and o3-mini), Gemini 2.5 Pro, DeepSeek, etc. for summarization and reflections, client-side hooks to batch prompts
  • Backend: Supabase functions for sanitization, caching, and credit tracking
  • Credits system for tiered AI model usage (GPT-4, etc.) with real-time cost tracking
  • Perplexity-powered discovery: Automated AI-assisted YouTube source finding and RSS feed generation
  • Auto-generation of Story Sources: Auto-generation of RSS feeds by theme, enabling dynamic StoryPad collections
  • Narration of StoryPad content: Choose different AI voices to narrate the StoryPad headlines, excerpts or the Thoughts to Ponder

PONDER’s frontend is crafted with React and TypeScript, styled elegantly using Tailwind CSS, and brought to life with Framer Motion’s smooth animations that make interactions feel fluid and engaging.

On the backend, Supabase powers our data storage and serverless functions, handling story scraping, sanitization, and credit tracking with robustness and scalability. We designed modular React components—such as FilterPanel, ArticleGrid, and StoryPad—that work in harmony with custom hooks like useAuth and useDepthSettingsStore to manage global state efficiently.

Our AI integration is a highlight: we leverage cutting-edge models including OpenAI’s GPT-4o and o3-mini, Gemini 2.5 Pro, and DeepSeek to generate summaries, reflections, and Perplexity Sonar's web search citation back-end to assist with content discovery.

The app’s credit system intelligently tracks usage across AI models, balancing cost and performance. The system is integrated with Stripe and provides users with opportunities to subscription on a monthly basis or top up credits whenever they like depending on how heavy of a user they are.

One standout feature is our Perplexity-powered discovery engine, which automatically finds relevant YouTube sources and generates thematic RSS feeds just from the user prompt, dynamically enriching StoryPad collections and keeping content fresh and relevant.

Another great feature is Ponder Narrator, powered by ElevenLabs. Choose from a list of voices to narrate the headlines, excerpts or thoughts to ponder.

Challenges we ran into

  • Replacing blocking window.confirm dialogs with non-intrusive toast-based confirmations
  • Ensuring the “excerpts only” toggle truly filters out pads without valid snippets
  • Balancing performance vs. animation fluidity in Framer Motion for hundreds of storypads
  • Managing cache invalidation and credit-check UX when refreshing large collections

Building PONDER was not without hurdles.

One major challenge was replacing the traditional, blocking window.confirm dialogs with non-intrusive, toast-based confirmations that maintain user flow without disruption. Ensuring the “excerpts only” toggle reliably filtered out StoryPads lacking valid snippets required precise logic and rigorous testing.

Another challenge we had was ensuring all elements work in concert - UI, technicals, third-party integrations - and ensuring both front-end and back-end work in sync, is truly an orchestration of magnificent proportions. When we tweaked a small part on the front-end, something might change (an import/export request, functional query, useeffect, etc.) and impact the rest of the function down the line. So there are a lot of back-and-forth just to ensure each element change we make does not impact other elements in the ecosystem.

Balancing high-performance animations with hundreds of StoryPads on screen pushed Framer Motion to its limits, demanding careful optimization. We then switched from relying on sessionStorage to indexDB, which is a better way to cache stories.

Additionally, managing cache invalidation and delivering smooth credit-check user experiences during large collection refreshes tested our backend and frontend coordination. We are still in early stages of enhancing and improving our code, but we are proud of what we have put together in the short amount of time we've had so far.

Accomplishments that we’re proud of

  • A seamless, layered UI that visually represents narrative depth
  • Robust client-side caching with clear, toast-driven controls
  • Accurate filtering logic for excerpts, AI thoughts, and YouTube content
  • Clean, reusable TypeScript components and hooks for rapid extension
  • Amazing integration of features with different AI models

We are proud to have created a seamless, layered user interface that visually embodies the concept of narrative depth, making complex content approachable and engaging.

Our client-side caching system is robust and user-friendly, with toast-driven controls that provide transparency and control. The filtering logic is finely tuned to deliver accurate results across excerpts, AI reflections, and YouTube content.

Architecturally, our clean, reusable TypeScript components and hooks enable rapid iteration and future expansion, laying a solid foundation for continued innovation.

What we learned

  • Advanced state management patterns in React (useMemo, context stores)
  • Integrating AI-driven insights (hasThoughts, hasValidExcerpt) into display logic
  • Crafting non-blocking, inline confirmation modals with react-hot-toast
  • Building with Supabase serverless functions and localStorage caching

Through this project, we deepened our expertise in advanced React state management patterns, mastering tools like useMemo and context stores to optimize performance and maintainability.

Integrating AI-driven insights into display logic challenged us to think critically about how to surface meaningful reflections without overwhelming users. We refined our approach to crafting non-blocking, inline confirmation modals using react-hot-toast, enhancing user experience.

Building with Supabase serverless functions and leveraging localStorage caching gave us practical experience in scalable, offline-capable architectures. We are impressed by what Supabase has to offer, especially in back-end logging, which has helped us to troubleshoot and understand how our back-end flows truly worked.

What’s next for PONDER

  • Add user-driven annotations and shared “ponder circles” to collaborate on StoryPads and Collections (a matchmaking algorithm to cross-match Ponderers who share like-minded StoryPad themes and topics across Surface, Ponder and Deep depth levels)
  • Expand AI models and prompt customization for deeper or more creative reflections
  • Mobile-first redesign and offline sync support
  • Social sharing, exportable “ponder journals,” and real-time StoryPad updates
  • Agentic AI-based news aggregation for 24/7 Story Collection updates

Looking ahead, we plan to introduce user-driven annotations (personal journaling) and collaborative “Ponder Circles,” enabling like-minded users to connect and co-curate StoryPads across surface, ponder, and deep layers.

If the first phase of PONDER is story discovery, the second phase will be social discovery. We believe when we have Ponderers come together, they can surface new stories and ideas, know each other better and help make our little Pond a little more peaceful and safer. It could essentially become a place where like-minded Ponderers find mutual love, discussion and perspective.

We aim to expand AI model options and offer prompt customization, allowing users to tailor reflections to their unique interests and creativity. A mobile-first redesign with offline sync will make PONDER accessible anytime, anywhere.

Social sharing features and exportable “Ponder Journals” will empower users to share their layered stories with friends and communities. Finally, we envision agentic AI-powered news and story aggregation that continuously updates Story Collections around the clock, making PONDER a living, breathing reflection of the world’s stories.

Built With

Share this project:

Updates

posted an update —

Do note that as we've submitted the latest build for the purpose of the Bolt Hackathon, we will not be updating or fixing any inherent bugs on the current live version at ponder.bookoora.com until the judging period ends (currently set as 26 July 2025). We will resume our updates and bug-fixing right after. Cheers.

Log in or sign up for Devpost to join the conversation.

Submission history