⚡ CreatorPulse — Creator Discovery & Analytics Platform

A unified creator discovery, analytics, and campaign intelligence platform designed for modern brands and marketing agencies. Built with React 19, TypeScript, Tailwind CSS v4, and Zustand.

---

🌟 Overview & Problem Statement

The Problem

Marketing teams and brands spend countless hours jumping between fragmented social networks (Instagram, YouTube, TikTok), manually aggregating follower counts, calculating true engagement rates, and juggling messy spreadsheets. When initiating campaign collaborations, sending individual outreach emails and direct messages to dozens of creators one-by-one is tedious and error-prone.

The Solution: CreatorPulse

CreatorPulse consolidates creator discovery into a single, high-performance web platform. Brands can search across multiple platforms simultaneously, analyze and compare deep engagement metrics (Engagement Rate, Avg Likes, Avg Views, Total Engagements), curate persistent campaign shortlists with duplicate protection, and export collaboration-ready datasets in one click.

---

✨ Core Features (Currently Live)

• 🌐 Multi-Platform Creator Hub: Search and filter influencers seamlessly across Instagram, YouTube, and TikTok in a single interface.
• 🔍 Real-Time Fuzzy Search & Filtering: Instant search across usernames, channel handles, and creator full names with resilient schema fallbacks.
• 🔗 URL-Driven State Synchronization: Selected platforms and search terms synchronize with browser URL query parameters (?platform=...&q=...), allowing instant sharing and bookmarking.
• 📊 Deep Creator Analytics: Detailed breakdown of creator health metrics, including Followers, Engagement Rate (ER %), Average Likes, Average Comments, Video Views, and Total Engagements.
• ⭐ Persistent Shortlist Management: Global state management powered by Zustand with localStorage persistence, duplicate prevention, and a collapsible drawer.
• 📥 1-Click CSV Campaign Export: Download curated influencer lists directly into a formatted .csv spreadsheet ready for marketing and outreach workflows.
• ⚡ High-Performance Dark Theme UI: Responsive glassmorphic layout styled with Tailwind CSS v4, custom SVG brand badges, and avatar placeholder fallbacks.
• 🛡️ Strict Type Safety: 100% TypeScript coverage ensuring robust data contracts and zero runtime type errors.

---

🚀 Product Roadmap & Future Vision

To transform CreatorPulse into a full end-to-end influencer marketing CRM, the following features are planned for future releases:

1. 🤖 1-Click Automated Campaign Outreach:
   • Instead of reaching out to each creator manually, brands can compose a single unified campaign brief and automatically dispatch customized, personalized collaboration messages/emails to all shortlisted influencers in bulk.
2. ⚖️ Creator Comparison Matrix:
   • Side-by-side metric comparison to benchmark creator performance and forecast campaign ROI before signing contracts.
3. 📑 Collaboration & Deal Pipeline CRM:
   • Visual Kanban pipeline tracking creators through stages: Shortlisted → Pitched → Negotiating → Contract Signed → Content Delivered → Paid.
4. 📈 Historical Performance Tracking:
   • Track follower growth trends and engagement stability over 30, 60, and 90-day intervals.

---

🛠️ Tech Stack

Technology	Role / Purpose
React 19	Modern component-driven UI architecture
TypeScript	Strict static typing, compile-time safety, and interfaces
Vite	Lightning-fast development server, HMR, and production bundler
Tailwind CSS v4	Modern utility-first CSS styling and dark theme tokens
React Router v7	Client-side routing, dynamic parameters, and query state
Zustand	Lightweight global state management with persist middleware
ESLint 10	Code quality enforcement and React 19 hook validation

---

📁 Project Architecture

src/
├── assets/
│   └── data/
│       ├── search/              # Mock search datasets (Instagram, YouTube, TikTok)
│       └── profiles/            # In-depth creator analytics & profile JSON reports
├── components/
│   ├── Layout.tsx               # Reusable shell with navigation bar & global shortlist
│   ├── PlatformFilter.tsx       # Platform tab switcher with brand SVGs & search input
│   ├── ProfileCard.tsx          # Creator preview card with metric chips & shortlist action
│   ├── ProfileList.tsx          # Responsive grid renderer with empty state handling
│   ├── ShortlistPanel.tsx       # Persistent shortlist drawer with CSV export & controls
│   ├── SearchBar.tsx            # Standalone modular search input
│   └── VerifiedBadge.tsx        # Verification checkmark indicator
├── pages/
│   ├── SearchPage.tsx           # Primary discovery page with search & filter controls
│   └── ProfileDetailPage.tsx    # Comprehensive creator analytics & performance view
├── store/
│   └── shortlistStore.ts        # Zustand store with localStorage persistence
├── types/
│   └── index.ts                 # TypeScript data models and platform definitions
├── utils/
│   ├── dataHelpers.ts           # Data aggregation, platform mapping, and fuzzy search
│   ├── formatters.ts            # Metric formatters (K/M abbreviations, percentage ER)
│   └── profileLoader.ts         # Async profile loader using dynamic import.meta.glob
├── App.tsx                      # Root route configuration
├── index.css                    # Tailwind CSS imports & theme variables
└── main.tsx                     # React application entry point

---

🚀 Getting Started

Prerequisites

• Node.js (v18.0.0 or higher recommended)
• npm (v9.0.0 or higher)

1. Clone the Repository

git clone https://github.com/your-username/creator-pulse.git
cd creator-pulse

2. Install Dependencies

npm install

3. Start Development Server

npm run dev

Open http://localhost:5173 in your browser.

4. Build for Production

npm run build

Generates production-ready assets in the dist/ folder.

5. Run Linter

npm run lint

---

💡 Engineering Highlights & Interview Talking Points

• State Optimization (No Cascading Renders): Eliminated unnecessary useEffect state synchronization in favor of deriving state directly from URL search parameters, reducing re-renders and complying with React 19 best practices.
• Zustand over Redux/Context: Chose Zustand for global state to avoid Redux boilerplate while preventing the broad re-render cascading typical of React Context API.
• Dynamic Module Loading: Implemented Vite's import.meta.glob to load detailed creator profile datasets on-demand with case-insensitive fallback resolution.
• Edge-Case Resilience: Handled platform-specific schema differences (e.g. YouTube channels using handle vs Instagram using username) with fallback chains (username ?? handle ?? "") to prevent runtime crashes.
• Client-Side CSV Generation: Implemented dynamic CSV spreadsheet generation in the browser without requiring external heavy export libraries.