🚀 Jejak Sosial - Enterprise Business Intelligence Platform

A comprehensive social media ecosystem mapping and business intelligence platform with advanced analytics, interactive visualizations, and AI-powered insights.

✨ Features

📊 Analytics & Visualization

• Analytics Dashboard - Platform distribution, niche analysis, growth projections, tier comparison
• Network Graph - Interactive D3.js force-directed visualization with zoom, pan, drag
• Trending Topics - Real-time trending analysis with heatmap
• Competitor Comparison - Side-by-side seed comparison with radar charts

🔍 Discovery & Search

• Advanced Search - Multi-filter search with real-time results
• Command Palette - Cmd+K quick navigation
• Advanced Data Table - Sortable, filterable table with CSV export

📅 Planning & Prediction

• Content Calendar - Weekly/monthly view with event scheduling
• Performance Predictor - AI-powered content performance prediction

🎨 UX & UI

• Page Transitions - Smooth Framer Motion animations
• Toast Notifications - User feedback system
• Keyboard Shortcuts - Power user navigation
• Responsive Design - Mobile-first approach

🔧 Technical

• SEO Optimized - Complete meta tags, sitemap.xml, robots.txt
• PWA Ready - Web app manifest, offline capable
• Static Export - 115 pre-rendered pages
• TypeScript - Full type safety

🏗️ Architecture

sosmed/
├── app/                    # Next.js App Router
│   ├── page.tsx           # Dashboard with all BI components
│   ├── seeds/[slug]/      # Seed detail pages
│   ├── accounts/[slug]/   # Account detail pages
│   ├── niches/[slug]/     # Niche pages
│   └── layout.tsx         # Root layout with SEO
├── components/
│   ├── bi/                # Business Intelligence components
│   │   ├── AnalyticsDashboard.tsx
│   │   ├── NetworkGraph.tsx
│   │   ├── TrendingAnalysis.tsx
│   │   ├── PerformancePredictor.tsx
│   │   ├── AdvancedSearch.tsx
│   │   ├── AdvancedDataTable.tsx
│   │   ├── ContentCalendar.tsx
│   │   ├── CompetitorComparison.tsx
│   │   └── ExportData.tsx
│   ├── ui/                # UI components
│   │   ├── CommandPalette.tsx
│   │   ├── Toaster.tsx
│   │   ├── KeyboardShortcuts.tsx
│   │   └── PageTransition.tsx
│   └── ...
├── lib/
│   ├── data.ts            # Data access layer
│   └── types.ts           # TypeScript definitions
├── data/                  # JSON data files
│   ├── seeds/             # 7 seed accounts
│   ├── accounts/          # 100+ accounts
│   ├── niches/            # 7 niches
│   └── networks/          # Network data
└── public/               # Static assets
    ├── manifest.json     # PWA manifest
    ├── robots.txt        # SEO robots
    └── sitemap.xml       # SEO sitemap

📈 Stats

• 7 Seed Accounts across different niches
• 100+ Discovered Accounts with similarity scoring
• 7 Niches mapped with ecosystem data
• 115 Static Pages pre-rendered at build time
• 77MB Build Output optimized for deployment

🚀 Deployment

Cloudflare Pages (Recommended)

1. Fork/push this repository to GitHub

2. Connect to Cloudflare Pages:

   # Using Wrangler CLI
   npx wrangler login
   npx wrangler pages project create jejak-sosial
   npx wrangler pages deploy out --project-name=jejak-sosial
   

3. Or use GitHub Actions (already configured in .github/workflows/deploy-cloudflare.yml):

   • Add CLOUDFLARE_API_TOKEN to GitHub Secrets
   • Add CLOUDFLARE_ACCOUNT_ID to GitHub Secrets
   • Push to main branch

Manual Deploy

# Build static export
npm run build

# Deploy to Cloudflare Pages
npx wrangler pages deploy out --project-name=jejak-sosial

🎮 Keyboard Shortcuts

Shortcut	Action
Cmd/Ctrl + K	Open Command Palette
?	Show Keyboard Shortcuts
Esc	Close modals/panels
G + D	Go to Dashboard
G + S	Go to Seeds
G + A	Go to Accounts
G + N	Go to Niches

📊 Data Model

Seed Account

• Profile info (handle, platform, followers)
• Content DNA (themes, format, voice, behavior)
• Business Intelligence (engagement, pinned posts, competitor insights)
• Linked accounts with relationship tiers

Discovered Account

• Similarity scoring across 8 dimensions
• Relationship tier (twin/sibling/cousin/neighbor)
• Discovery vector and confidence score

Niche

• Platform distribution
• Keywords and seasonal peaks
• Content gaps

🛠️ Tech Stack

• Framework: Next.js 16 with App Router
• Language: TypeScript 5
• Styling: Tailwind CSS 4
• Animations: Framer Motion
• Charts: Recharts + D3.js
• Icons: Lucide React
• Build: Static Export (output: 'export')

📝 License

MIT License - feel free to use and modify!

---

Built with ❤️ for the Indonesian social media ecosystem 🇮🇩