{"id":32374697,"url":"https://github.com/erolleddev/tiangge-erolleddev","last_synced_at":"2025-10-24T22:42:06.155Z","repository":{"id":316695891,"uuid":"1064446577","full_name":"ErolledDev/tiangge-erolleddev","owner":"ErolledDev","description":"test","archived":false,"fork":false,"pushed_at":"2025-10-19T03:19:42.000Z","size":1330,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-19T04:04:49.544Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ErolledDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-26T03:48:35.000Z","updated_at":"2025-10-19T03:19:45.000Z","dependencies_parsed_at":"2025-09-26T07:05:54.181Z","dependency_job_id":"6890ca5b-7379-4435-b890-e3cb7b899119","html_url":"https://github.com/ErolledDev/tiangge-erolleddev","commit_stats":null,"previous_names":["erolleddev/tiangge-erolleddev"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ErolledDev/tiangge-erolleddev","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ErolledDev%2Ftiangge-erolleddev","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ErolledDev%2Ftiangge-erolleddev/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ErolledDev%2Ftiangge-erolleddev/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ErolledDev%2Ftiangge-erolleddev/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ErolledDev","download_url":"https://codeload.github.com/ErolledDev/tiangge-erolleddev/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ErolledDev%2Ftiangge-erolleddev/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280878345,"owners_count":26406642,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-24T02:00:06.418Z","response_time":73,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-24T22:42:03.979Z","updated_at":"2025-10-24T22:42:06.149Z","avatar_url":"https://github.com/ErolledDev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Affiliate Store Builder\n\nThis is a [Next.js](https://nextjs.org/) project for building affiliate stores. Users can create and customize their own affiliate stores to showcase products and earn commissions through affiliate links.\n\n## Features\n\n### 👥 User Roles \u0026 Permissions\nThe platform supports three distinct user roles with different access levels:\n- **Standard Users**: Core store functionality with product management (up to 30 products), basic customization, and analytics\n- **Premium Users**: Advanced features including unlimited products, bulk import, enhanced promotional tools, and data export\n- **Administrators**: Complete platform control including user management, sponsored products, and global broadcast system\n\nFor detailed information about user roles and their specific permissions, see [User Roles Documentation](role-users.md).\n\n### 🏪 Store Management\n- **Store Customization**: Personalize your store with custom branding, colors, layouts, and typography\n- **Advanced Theming**: Custom font families, color schemes, background gradients, and responsive design\n- **Social Integration**: Connect your social media accounts to drive traffic\n- **SEO Friendly**: Optimized for search engines with meta tags, Open Graph, and Twitter cards\n- **Header Layout Options**: Choose between left-right, right-left, or centered layouts\n- **Custom HTML**: Add sanitized custom HTML content sections to your store\n\n### 📦 Product Management\n- **Product Management**: Add affiliate products with images, descriptions, and affiliate links\n- **Product Scraping**: Auto-fill product details by scraping product URLs using external API\n- **Bulk Import**: Import hundreds of products at once using CSV files (Premium feature)\n- **Category Management**: Automatic category generation from products with filtering\n- **Click Tracking**: Monitor product performance with detailed click analytics\n- **Product Limits**: Standard users limited to 30 products, Premium users have unlimited products\n\n### 🎨 Promotional Features\n- **Slider Management**: Create promotional slides to highlight featured products or offers\n- **Floating Widget**: Engage visitors with customizable floating widgets (Premium feature)\n- **Pop-up Banner**: Promotional banners with custom images and descriptions (Premium feature)\n- **Auto-advancing Slideshow**: Slides automatically advance with manual navigation options\n\n### 📊 Analytics \u0026 Insights\n- **Analytics Dashboard**: Track store views, product clicks, slide clicks, social link engagement, search queries, and category filters\n- **Performance Metrics**: Detailed insights into user behavior and conversion tracking\n- **Export Capabilities**: Export subscriber and analytics data to CSV files (Premium feature)\n- **Real-time Tracking**: Persistent analytics storage in Firestore for reliable data\n\n### 💬 Customer Engagement\n- **Email Subscriptions**: Allow visitors to subscribe to your mailing list with popup forms\n- **Subscriber Management**: Manage your email subscribers with export capabilities\n- **Toast Notifications**: User-friendly feedback system for all interactions\n- **Search Functionality**: Product search with real-time filtering and tracking\n- **System Notifications**: Real-time broadcast notifications from administrators with read status tracking\n- **Notification Center**: Dashboard notification bell with unread count badges and persistent modal viewing\n\n### 🖼️ Advanced Image Optimization\n- **Automatic Compression**: All uploaded images compressed to 75% quality\n- **Format Conversion**: Automatic conversion to WebP format for better performance\n- **Smart Resizing**: Intelligent resizing based on image type (avatars: 200px, products/slides: 1200px)\n- **Storage Optimization**: Significant reduction in storage costs and faster loading times\n\n### 🔐 User Management \u0026 Security\n- **Authentication System**: Email/password authentication with strong password validation\n- **User Roles**: Admin and user roles with different permission levels\n- **Premium Features**: Tiered access to advanced features\n- **Row Level Security**: Comprehensive security with Firestore rules\n- **Notification System**: Secure broadcast messaging with per-user read status tracking\n\n### 🎯 Admin Features\n- **User Management**: Search users, manage roles, and grant premium access\n- **Global Broadcast**: System-wide announcement banners for all users\n- **Broadcast Notifications**: Dashboard notification system with Markdown support and read tracking\n- **Sponsored Products**: Passive income through sponsored product placement in user stores\n- **System Analytics**: Track global platform usage and performance\n\n## How It Works\n\n1. **Sign Up**: Create your account with a custom store URL\n2. **Customize Store**: Set up your store branding, colors, and layout preferences\n3. **Add Products**: Add affiliate products manually or use the bulk import feature (Premium)\n4. **Create Content**: Design promotional slides and add custom HTML sections\n5. **Configure Features**: Enable widgets, banners, and subscription forms (Premium features)\n6. **Share Your Store**: Share your unique store URL to start earning commissions\n7. **Monitor Performance**: Use analytics to track visitor behavior and optimize conversions\n\n## Store Structure\n\nEach store gets a unique URL: `yourdomain.com/your-store-slug`\n\nWhen visitors interact with your store:\n- Product clicks redirect to affiliate links where you earn commissions\n- Analytics track all user interactions for performance insights\n- Subscription forms collect email addresses for marketing\n- Sponsored products provide additional passive income opportunities\n\n## Tech Stack\n\n- **Frontend**: Next.js 14, React 18, TypeScript, Tailwind CSS\n- **Backend**: Firebase (Firestore, Authentication, Storage)\n- **Image Processing**: `image-resize-compress` library with WebP conversion\n- **Analytics**: Custom analytics system with Firestore persistence\n- **UI Components**: Lucide React icons, custom component library\n- **Deployment**: Netlify with optimized build configuration\n\n## Key Features Implemented\n\n### 🔐 Authentication \u0026 User Management System\n- **Strong Authentication**: Email/password with comprehensive validation (8+ chars, mixed case, numbers, special chars)\n- **Automatic Store Creation**: Each user gets a unique store with custom URL on signup\n- **User Roles**: Admin and user roles with different permission levels\n- **Premium Features**: Tiered access system with premium user benefits\n- **Protected Routes**: Dashboard routes protected with authentication checks\n- **Notification System**: Real-time broadcast notifications with read status tracking and persistent modal viewing\n\n### 🏪 Advanced Store Customization\n- **Typography**: Custom font families for headings and body text\n- **Colors**: Comprehensive color system with gradients and themes\n- **Layout**: Multiple header layouts and responsive design\n- **Branding**: Avatar, background images, and social media integration\n- **Custom Content**: Sanitized HTML editor for custom content sections\n\n### 📦 Product \u0026 Content Management\n- **Products**: Full CRUD operations with image optimization\n- **Categories**: Auto-generated from products with filtering capabilities\n- **Slides**: Promotional carousel with click tracking\n- **Product Scraping**: Auto-fill product details from URLs\n- **Bulk Import**: CSV import for premium users with validation\n\n### 📊 Analytics \u0026 Performance\n- **Event Tracking**: Store views, clicks, searches, and interactions\n- **Performance Metrics**: Top products, categories, and search terms\n- **Data Export**: CSV export for subscribers and analytics (Premium)\n- **Real-time Insights**: Live dashboard with actionable data\n- **Persistent Storage**: All analytics events stored in Firestore\n\n### 🎯 Monetization Features\n- **Affiliate Links**: Direct product linking with click tracking\n- **Sponsored Products**: Admin-managed products for passive income\n- **Premium Subscriptions**: Tiered feature access\n- **Email Marketing**: Subscriber collection and management\n\n### 🎯 Admin \u0026 System Management\n- **User Management Panel**: \n  - Search users by email address\n  - View all registered users with store information\n  - Toggle user roles between User and Admin\n  - Grant or revoke Premium access\n  - Direct links to user stores\n  - **Advanced Trial Management**: Immediately end or reset user trials with business logic enforcement\n- **Global Broadcast System**: \n  - Create system-wide announcement banners\n  - Upload custom images with descriptions and links\n  - Control banner visibility and timing\n  - Track banner click performance\n- **Broadcast Notification System**:\n  - Create dashboard notifications for all users\n  - Markdown formatting support for rich content\n  - Real-time unread count badges in dashboard header\n  - Per-user read status tracking with persistent storage\n  - Non-intrusive notification modal that stays open until manually closed\n- **Sponsored Products Management**:\n  - Admin-managed products that appear in user stores\n  - Automatic placement in stores with 15+ products\n  - Revenue sharing through sponsored product clicks\n  - Performance tracking and analytics\n- **Trial Management System**:\n  - Immediately end user trials without waiting for natural expiration\n  - Reset user trials for additional 7 days (only within original trial window)\n  - Business logic prevents abuse and ensures fair trial periods\n  - Visual status indicators and action feedback\n\n## Getting Started\n\n### Prerequisites\n- Node.js 20 or higher\n- Firebase project with Firestore and Storage enabled\n- Netlify account for deployment\n\n### Installation\n\n1. Clone the repository:\n```bash\ngit clone \u003crepository-url\u003e\ncd affiliate-store-builder\n```\n\n2. Install dependencies:\n```bash\nnpm install\n```\n\n3. Set up environment variables:\n```bash\ncp .env.example .env.local\n```\n\n4. Configure Firebase:\n   - Create a Firebase project\n   - Enable Firestore and Storage\n   - Add your Firebase configuration to `.env.local`\n\n5. Run the development server:\n```bash\nnpm run dev\n```\n\n6. Open [http://localhost:3000](http://localhost:3000) to see the application\n\n### Deployment\n\nThe application is configured for Netlify deployment:\n\n1. Connect your repository to Netlify\n2. Set environment variables in Netlify dashboard\n3. Deploy automatically on push to main branch\n\n## Database Schema\n\n### Collections\n- **users**: User profiles, roles, and premium status\n- **stores**: Store configurations and customizations (nested under users)\n- **products**: Affiliate products with images and links (nested under stores)\n- **slides**: Promotional slides for store homepage (nested under stores)\n- **subscribers**: Email subscribers (nested under stores)\n- **analytics_events**: User interaction tracking (nested under stores)\n- **sponsored_products**: Admin-managed sponsored products\n- **global_banners**: System-wide announcement banners\n- **notifications**: Broadcast notifications for all users\n- **read_notifications**: Per-user notification read status tracking (nested under users)\n\n### Security\n- Firestore security rules with row-level access control\n- Public read access for store data\n- Owner-only write access for user data\n- Admin-only access for system management features\n\n## Performance Optimizations\n\n- **Image Optimization**: Automatic compression and WebP conversion\n- **Lazy Loading**: Images and components loaded on demand\n- **Responsive Design**: Optimized for all device sizes\n- **Efficient Queries**: Optimized Firestore queries with proper indexing\n- **Client-side Caching**: Strategic caching for better performance\n\n## Premium Features\n\n- **Unlimited Products**: No product limits for premium users\n- **Advanced Promotional Tools**: Floating widgets and pop-up banners\n- **Bulk Operations**: CSV import for hundreds of products at once\n- **Data Export**: Export subscribers and analytics to CSV\n- **Enhanced Customization**: Additional display options and controls\n- **Priority Support**: Enhanced support for premium users\n\n## Admin Features\n\n- **User Management**: Search, manage roles, and premium access\n- **Global Broadcast**: System-wide announcements and banners\n- **Broadcast Notifications**: Dashboard notification system with Markdown support and read tracking\n- **Sponsored Products**: Manage products that appear in user stores\n- **System Analytics**: Platform-wide usage and performance metrics\n- **Trial Management**: Advanced controls for user trial periods with immediate end and conditional reset\n\n## Development Guidelines\n\n### Code Organization\n- **Modular Architecture**: Each component focuses on a single responsibility\n- **File Structure**: Organized by feature with clear separation of concerns\n- **TypeScript**: Strict typing throughout the application\n- **Component Reusability**: Shared components for common functionality\n\n### Error Handling Best Practices\n- **Specific Error Messages**: All error messages provide clear, actionable feedback to users\n- **Consistent Error Propagation**: Errors are properly caught and re-thrown with context\n- **User-Friendly Feedback**: Technical errors are translated to user-friendly language\n- **Mobile Optimization**: Error handling optimized for mobile device constraints\n\n### Production Readiness Checklist\n- **Client-Side Validation**: Comprehensive input validation with user feedback\n- **Server-Side Security**: Firestore rules enforce data access and business logic\n- **Image Processing**: Optimized for mobile devices with size and type validation\n- **Error Recovery**: Graceful error handling with retry mechanisms\n- **Performance Monitoring**: Analytics tracking for error rates and user experience\n\n### Key Directories\n```\napp/                    # Next.js app router pages\n├── auth/              # Authentication pages\n├── dashboard/         # Protected dashboard pages\n├── [storeSlug]/       # Public store pages\n└── system-management/ # Admin-only pages\n\ncomponents/            # Reusable React components\n├── AdminRoute.tsx     # Admin access control\n├── PremiumFeatureGate.tsx # Premium feature gating\n├── StoreTemplate.tsx  # Main store display\n├── NotificationModal.tsx # Notification display modal\n├── NotificationForm.tsx # Admin notification creation/editing\n├── DashboardHeader.tsx # Header with notification bell\n└── ...\n\nlib/                   # Core business logic\n├── auth.ts           # Authentication functions\n├── store.ts          # Store and product management\n├── analytics.ts      # Analytics tracking\n└── firebase.ts       # Firebase configuration\n\nhooks/                 # Custom React hooks\n├── useAuth.ts        # Authentication hook\n└── useToast.ts       # Toast notification hook\n\napp/dashboard/system-management/ # Admin panel pages\n├── users/page.tsx    # User management interface\n├── global-broadcast/page.tsx # Global banner management\n├── broadcast-notifications/page.tsx # Notification management\n├── sponsor-products/ # Sponsored product management\n```\n\n### Security Implementation\n- **Firestore Rules**: Comprehensive row-level security\n- **Authentication**: Firebase Auth with strong password requirements\n- **Input Validation**: Client and server-side validation\n- **HTML Sanitization**: DOMPurify for custom HTML content\n- **Role-based Access**: Component-level access control\n\n### Performance Considerations\n- **Image Optimization**: Automatic WebP conversion and compression\n- **Lazy Loading**: Components and images loaded on demand\n- **Efficient Queries**: Optimized Firestore operations\n- **Bundle Optimization**: Code splitting and tree shaking\n\n### Recent Major Updates \u0026 Enhancements\n\n### Advanced Trial Management System (Latest Update)\n- Implemented granular trial management controls for administrators\n- Added ability to immediately end user trials without waiting for natural expiration\n- Created trial reset functionality with business logic enforcement\n- Added visual indicators and status displays for trial management\n- Enhanced user management interface with trial action buttons\n- Implemented safeguards to prevent trial resets after original 7-day window expires\n- **Business Logic**: Admins can only reset trials within the original 7-day window from user creation\n- **Security**: All trial management actions properly validated and logged\n\n### Enhanced Notification System\n- Implemented comprehensive broadcast notification system for admin-to-user communication\n- Added real-time notification bell with unread count badges in dashboard header\n- Created persistent notification modal that remains open until manually closed\n- Integrated Markdown formatting support for rich notification content\n- Built per-user read status tracking with Firestore persistence\n- Added notification management interface for administrators\n- Fixed auto-closing modal issue to improve user experience\n\n### Complete Admin System Implementation\n- Built comprehensive user management system with search and role controls\n- Created global broadcast system for platform-wide announcements\n- Implemented sponsored products system for passive income generation\n- Added system analytics and performance monitoring capabilities\n\n## Contributing\n\n### Development Setup\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Follow the existing code patterns and TypeScript conventions\n4. Test your changes thoroughly\n5. Commit your changes (`git commit -m 'Add amazing feature'`)\n6. Push to the branch (`git push origin feature/amazing-feature`)\n7. Open a Pull Request\n\n### Code Standards\n- Use TypeScript for all new code\n- Follow the existing component structure\n- Implement proper error handling\n- Add appropriate loading states\n- Include user feedback via toast notifications\n- Maintain responsive design principles\n\n### Testing Guidelines\n- Test all user flows thoroughly\n- Verify premium feature gating works correctly\n- Ensure admin features are properly protected\n- Test image upload and optimization\n- Validate form submissions and error handling\n\n## License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n## Support\n\nFor support and questions:\n- Create an issue in the repository\n- Contact the development team\n- Check the documentation and FAQ\n\n---\n\n**Built with ❤️ using Next.js, Firebase, and modern web technologies**","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferolleddev%2Ftiangge-erolleddev","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferolleddev%2Ftiangge-erolleddev","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferolleddev%2Ftiangge-erolleddev/lists"}