ThinkTok

Swipe smarter. Learn with Everything Accurately.

Comment

ThinkTok - AI-Powered Learning App

Inspiration

Education should be as engaging as entertainment. Watching millions of people spend hours scrolling through TikTok, we wondered: what if we could harness that same addictive, swipe-based interaction for learning? Traditional educational platforms often feel like work, but learning should feel natural and fun. We envisioned transforming any topic into bite-sized, interactive learning experiences that you can't stop consuming, making education as addictive as social media.

The power of Perplexity's real-time internet search and trusted citations made this vision possible. We wanted to create the "Perplexity for Education" - where every learning card is backed by real, up-to-date information with verifiable sources.

What it does

ThinkTok transforms any topic into an infinite, TikTok-style learning experience powered by Perplexity's Sonar API. Users simply enter what they want to learn, and our AI generates multiple interactive card types:

  • Quiz Cards: Multiple choice questions with detailed explanations
  • Flashcards: Traditional flip-to-reveal format for memorization
  • Concept Cards: In-depth explanations with key takeaways
  • Mind Maps: Visual relationship diagrams between concepts
  • Podcast Cards: AI-generated audio discussions for auditory learners

The magic happens through vertical scrolling and swipe navigation, just like TikTok. Each card is full-screen, immersive, and designed for mobile-first learning. Users can dive deeper with our AI research assistant, which provides streaming responses with real citations from Perplexity's knowledge base.

Key features include:

  • Infinite scroll through AI-generated learning content
  • Real-time content generation using Perplexity Sonar API
  • Mobile-optimized touch gestures and animations
  • Smart topic recommendations based on learning history

How we built it

Tech Stack:

  • Next.js 14 with App Router for the frontend framework
  • Perplexity Sonar API for AI-powered content generation
  • Tailwind CSS + shadcn/ui for mobile-first design
  • PWA capabilities with service worker and web manifest

Perplexity Integration: We leverage multiple Sonar endpoints:

  • sonar-pro for main educational content generation
  • sonar-deep-research for the AI research assistant
  • Real-time internet search for up-to-date information
  • Citation extraction for verifiable learning sources

Key Technical Implementations:

  1. TikTok-Style Scroll Handler: Custom React component managing smooth vertical navigation with auto-snap functionality
  2. Dynamic Content Renderer: Adaptive card system that renders different learning formats based on AI-generated content
  3. Touch Gesture Detection: Mobile-optimized swipe and tap interactions for seamless UX
  4. Streaming AI Responses: Real-time chat interface powered by Perplexity's streaming API

The content generation flow works as follows:

User Input → Perplexity Sonar API → Structured Learning Content → Mobile-Optimized Cards → TikTok-Style Interface

Challenges we ran into

Mobile UX Complexity: Creating a truly native-feeling mobile experience in a web app was challenging. We had to carefully implement touch gestures, scroll physics, and card transitions to match the smoothness users expect from native apps like TikTok.

Content Formatting: Transforming Perplexity's rich research responses into mobile-optimized, bite-sized learning cards required significant prompt engineering and content parsing. We had to balance comprehensiveness with the constraints of mobile screen real estate.

API Rate Limiting: Managing Perplexity API calls efficiently while providing a seamless user experience. We implemented smart caching and request batching to optimize API usage without compromising the learning flow.

Multi-Modal Content: Generating different types of learning content (quizzes, flashcards, concept maps) from the same source material required sophisticated prompt design and response parsing to ensure consistency and quality across all card types.

Accomplishments that we're proud of

Seamless Mobile Experience: We successfully created a web app that feels indistinguishable from a native mobile app, with smooth scrolling and natural gestures.

AI-Powered Personalization: Our implementation of Perplexity's Sonar API creates truly personalized learning experiences, with content that adapts to user preferences and provides real, verifiable sources for every piece of information.

Innovative Learning Format: We've created a new category of educational app that combines the engagement of social media with the depth of academic learning, backed by real-time internet knowledge.

Real Citations: Unlike many AI educational tools, every piece of content includes clickable, verifiable sources thanks to Perplexity's citation system.

What we learned

The Power of Real-Time AI: Working with Perplexity's Sonar API showed us how transformative real-time internet search can be for educational applications. Having access to current, cited information makes AI-generated content truly trustworthy.

Mobile-First Design Philosophy: Building for mobile taught us that constraints breed creativity. The limitation of small screens forced us to distill complex concepts into their most essential elements.

User Engagement Psychology: Implementing TikTok-style interactions revealed how powerful micro-interactions and smooth animations are for user engagement. Small details like auto-snap and progress dots significantly impact the learning experience.

API Optimization: We learned sophisticated techniques for managing AI API calls, including request batching, smart caching, and progressive content loading to create seamless user experiences.

Educational Content Design: Transforming raw information into engaging, digestible learning formats taught us about cognitive load, information hierarchy, and multi-modal learning preferences.

What's next for ThinkTok

Advanced Personalization: Implement machine learning to track learning patterns and optimize content difficulty, pacing, and format preferences for each user.

Social Learning Features: Add collaborative elements like shared learning paths, peer challenges, and group study sessions while maintaining the core individual learning experience.

Expanded Content Types: Integrate more interactive formats like AR visualizations, code playgrounds, and interactive simulations, all powered by Perplexity's expanding API capabilities.

Multi-Language Support: Leverage Perplexity's multilingual capabilities to create learning content in multiple languages, making quality education accessible globally.

Advanced Analytics: Implement learning analytics to help users understand their learning patterns, retention rates, and knowledge gaps, providing data-driven insights for improvement.

Integration Ecosystem: Connect with popular learning management systems, note-taking apps, and study tools to create a comprehensive learning workflow.

ThinkTok represents the future of education - where learning is as engaging as entertainment, as current as the internet, and as reliable as academic research. With Perplexity's powerful API as our foundation, we're building a new paradigm for how people discover, consume, and retain knowledge in the digital age.

Built With

Share this project:

Updates