SocialTrack is a comprehensive social media analytics platform demo that showcases advanced data visualization, campaign management, and sentiment analysis capabilities. This React-based application demonstrates how modern web technologies can be used to create sophisticated analytics dashboards for social media marketing campaigns.
SocialTrack is a full-featured social media campaign analytics platform that showcases:
- Multi-Platform Campaign Management - Track campaigns across Instagram, TikTok, YouTube, Twitter, Facebook, and LinkedIn
- Real-Time Sentiment Analysis - Advanced sentiment tracking with positive, neutral, and negative classifications
- Influencer Performance Monitoring - Track individual influencer contributions and engagement metrics
- Comprehensive Analytics Dashboard - Interactive charts, graphs, and data visualizations
- Campaign Creation Workflow - Step-by-step campaign setup with platform verification
- PDF Report Generation - Professional campaign reports with charts and insights
- Modern React Architecture - Uses React 19+ with functional components and hooks
- Advanced Data Visualization - Recharts integration for interactive charts and graphs
- Responsive Design - TailwindCSS for beautiful, responsive UI components
- Real-time Filtering - Dynamic data filtering by platforms, date ranges, and metrics
- Export Functionality - PDF generation with charts and comprehensive analytics
- Mock Authentication - Demonstrates login/logout workflow
- Client-side Routing - React Router for seamless navigation
- Campaign Overview Cards - Visual summary of all active, completed, and scheduled campaigns
- Sentiment Visualization - Color-coded sentiment bars and percentage breakdowns
- Platform Performance - Multi-platform engagement and reach comparisons
- Engagement Metrics - Likes, comments, shares, and view tracking
- Sentiment Over Time - Line charts showing sentiment trends throughout campaign duration
- Content Type Analysis - Performance breakdown by content type (Reels, Stories, Posts, Videos, Livestreams)
- Platform Comparison - Side-by-side platform performance analysis
- Word Cloud Visualization - Tag cloud showing trending keywords and hashtags
- Audience Demographics - Geographic and demographic breakdowns
- Influencer Leaderboards - Top performer rankings and statistics
- Individual Post Tracking - Detailed view of each social media post's performance
- Platform-Specific Metrics - Tailored analytics for each social platform
- Content Preview - Visual post previews with engagement data
- Sentiment Classification - AI-powered sentiment analysis for each post
- Multi-Step Workflow - Guided campaign setup process
- Platform Selection - Choose target social media platforms
- Budget Management - Campaign budget allocation and tracking
- Influencer Management - Add and manage campaign influencers
- Account Verification - Platform account verification system
- Viral Coefficient Tracking - Measure content virality and reach expansion
- Completion Rate Analysis - Campaign goal achievement metrics
- Hashtag Performance - Trending hashtag analysis with usage statistics
- Geographic Insights - Audience location and sentiment by region
- Age Demographics - Audience age group analysis with engagement patterns
- React 19.1.0 - Latest React with improved performance and features
- Vite 7.0.0 - Next-generation frontend build tool for fast development
- TailwindCSS 4.1.11 - Utility-first CSS framework for rapid UI development
- React Router 7.6.2 - Declarative routing for React applications
- Recharts 3.0.2 - Composable charting library built on D3
- Chart.js 4.5.0 - Chart generation for PDF exports
- React TagCloud 2.3.3 - Word cloud visualization component
- jsPDF 3.0.1 - Client-side PDF generation
- jsPDF AutoTable 5.0.2 - Table generation for PDF reports
- html2canvas 1.4.1 - HTML to canvas conversion for chart exports
- Lucide React 0.525.0 - Beautiful hand-crafted SVG icons
- React DOM 19.1.0 - React DOM rendering library
- Node.js 18+
- npm or yarn package manager
-
Clone the repository
git clone <repository-url> cd socialtrack
-
Install dependencies
npm install
-
Start the development server
npm run dev
-
Open your browser Navigate to
http://localhost:5173to view the application
- View campaign overview cards with sentiment analysis
- Filter campaigns by status (Active, Completed, Scheduled)
- Click on campaigns to view detailed reports
- Access detailed analytics for each campaign
- Use platform filters to focus on specific social media channels
- Export comprehensive PDF reports with charts and insights
- Explore sentiment trends over time
- Analyze influencer performance and hashtag effectiveness
- Browse individual posts from campaigns
- View detailed engagement metrics for each post
- Filter posts by platform or sentiment
- Access post-specific analytics and performance data
- Start new campaigns with the step-by-step wizard
- Select target platforms and configure settings
- Add influencers and verify social media accounts
- Set campaign budgets and objectives
- Modern Gradient UI - Purple to pink gradient theme throughout
- Glassmorphism Effects - Backdrop blur and transparency effects
- Smooth Animations - Hover effects and transitions for enhanced UX
- Responsive Layout - Mobile-first design that works on all devices
- Interactive Charts - Hover effects and dynamic data display
- Color-Coded Metrics - Intuitive color schemes for different sentiment types
- Progressive Data Loading - Smooth data transitions and updates
- Multi-format Charts - Line charts, bar charts, pie charts, and custom visualizations
- ESLint Configuration - Comprehensive linting rules for code quality
- Modern JavaScript - ES6+ features and modern React patterns
- Component Architecture - Reusable, modular component design
- Performance Optimization - Efficient rendering and state management
- Vite Build System - Fast development and optimized production builds
- Hot Module Replacement - Instant updates during development
- GitHub Pages Ready - Configured for easy deployment to GitHub Pages
The demo includes comprehensive sample data showcasing:
- 4 Different Campaigns spanning various industries (Fashion, Education, Holiday, Fitness)
- Multiple Social Platforms with realistic engagement metrics
- Diverse Content Types (Reels, Stories, Posts, Videos, Livestreams)
- Global Audience Data with geographic and demographic insights
- Trending Hashtags with usage statistics and sentiment scores
- Influencer Profiles with follower counts and engagement rates
This project is configured for easy deployment to GitHub Pages:
npm install --save-dev gh-pages
npm run build
npm run deployFor detailed deployment instructions, see the deployment guide in the project documentation.
This demo is perfect for showcasing:
- Social Media Analytics Platforms
- Marketing Campaign Management Tools
- Sentiment Analysis Applications
- Influencer Marketing Platforms
- Social Media Monitoring Solutions
- Brand Reputation Management Systems
Built using React, TailwindCSS, and modern web technologies
SocialTrack demonstrates the power of modern web development for creating sophisticated analytics platforms that can handle complex data visualization and user interaction requirements.