YapRecap 🎬💬

Your Group Chat Has a Story. Let's Tell It.

YapRecap is a premium, privacy-first web application that transforms exported WhatsApp group chats into beautiful, animated recap stories. Inspired by modern digital yearbooks and story formats, it parses raw chat logs entirely in-browser, analyzes group metrics, and outputs a cinematic slide deck highlighting the group's yappers, night owls, milestones, vocabulary, and peaks.

---

🌟 Key Features

1. 🔒 Privacy-First Architecture

• 100% Client-Side Processing: Chats are parsed and analyzed entirely inside the user's browser using the Web File API.
• No Database/Server Ingestion: Your private messages never leave your device.
• Context Preservation: Seamless client-side navigation (next/navigation + React Context) preserves data safely in-memory and caches state in sessionStorage for F5 resilience.

2. ⚡ Multi-Stage WhatsApp Parser (features/parser/)

• Auto-Format Detection: Automatically handles Android (DD/MM/YYYY, HH:MM - Author: Msg) and iOS ([DD/MM/YYYY, HH:MM:SS] Author: Msg) timestamp patterns.
• Multiline Reconstruction: Folds multiline messages and system events split across export lines back into singular chronological entities.
• Deduplication Engine: Normalizes participant entries using a stable djb2 name-hashing ID registry.
• Event Classification: Isolates system actions (participant entries, invite joins, icon changes, encryption notices) from user chat messages.

3. 📊 Analytics & Awards Engine (features/analytics/)

• Group Metrics: Total messages, words, characters, emojis, links, questions, active calendar days, and averages.
• Interactive Datasets: Computes 24×7 hour/day-of-week heatmaps and monthly timeline summaries.
• Awards Calculator: Computes statistical winners for 10 unique accolades:
  • Biggest Yapper: Most messages sent.
  • Word Machine: Most words typed.
  • Night Owl: Most active between midnight and 6:00 AM.
  • Early Bird: Most active between 5:00 AM and 9:00 AM.
  • Emoji Champion: Highest emoji count.
  • Wall of Text: Highest average message length.
  • Question Master: Most questions asked.
  • Link Sharer: Most URLs shared.
  • Ghost: Lowest participation.
  • Speed Texter: Fastest average response time.

4. 🎬 Story Engine & Presentation Deck (features/recap/)

• Registry Pattern: Card layouts map to modular template builders for clean extensibility.
• Cinematic Experience: Implements a full-screen card viewer with smooth gesture swiping, mouse splits, keyboard shortcuts (←/→/Space/Enter), and top progress bars.
• Responsive Visualizations:
  • Heatmap Grid: Optimized 24×7 hour-day activity grids.
  • Activity Bars: Hourly columns displaying group engagement peaks.
  • Word Cloud: Visual weight indicators highlighting the group's common vocabulary.
  • Participation Share: Progress bars representing message share contribution per user.
• Ambient Backdrop: Radial gradients paired with floating, drifting particles that shift based on the card's accent color.

---

🛠️ Tech Stack

• Framework: Next.js 16 (App Router)
• Runtime: React 19 & TypeScript
• Styling: Tailwind CSS v4
• Animations: Framer Motion
• Charts: Recharts
• Icons: Lucide React

---

📂 Codebase Architecture

YapRecap/
├── app/                              # Next.js Pages & Layouts
│   ├── (marketing)/                  # Landing Page Route Group
│   ├── recap/                        # Cinematic Recap Story Deck Page
│   └── upload/                       # Upload & Parse Experience Page
├── components/                       # Shared UI and Layout Elements
│   ├── layout/                       # Header Navigation & Footer
│   └── shared/                       # Radial Gradients, Glass Panels, etc.
├── providers/                        # React Theme and Conversation Context
├── features/
│   ├── parser/                       # WhatsApp Parser & Line Normalizers
│   ├── analytics/                    # Multi-Module Metrics & Awards Computations
│   └── recap/                        # Story Engine, Card Registry, and Visual Charts
│       ├── cards/                    # Individual Card Templates
│       ├── components/               # Swiper, Segmented Progress, & Navigation
│       ├── data/                     # Story Copy & Registry Constants
│       ├── utils/                    # Formatters & Card Visibility Rules
│       └── viz/                      # HourBars, Heatmaps, WordClouds, & Charts
└── lib/                              # Animation variants, helpers, & theme tokens

---

🚀 Getting Started

Prerequisites

• Node.js v18.0.0 or higher
• npm, yarn, or pnpm

Installation

1. Clone the repository:

   git clone https://github.com/isthatpratham/YapRecap.git
   cd YapRecap

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Open http://localhost:3000 in your browser to view the application.

---

🏗️ Build & Production

To compile an optimized, production-ready static export:

npm run build

This runs:

1. next build (Next.js App compiler)
2. tsc --noEmit (TypeScript compiler validation)

---

📝 License

This project is open-source and available under the MIT License.