{"id":24571665,"url":"https://github.com/techtronixx/widget_showcase","last_synced_at":"2026-05-21T10:02:20.385Z","repository":{"id":273865012,"uuid":"921124840","full_name":"TechTronixx/Widget_Showcase","owner":"TechTronixx","description":"A modern, customizable widget system built with React, TypeScript, Framer Motion, and Tailwind CSS. ","archived":false,"fork":false,"pushed_at":"2025-01-23T12:02:54.000Z","size":0,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-23T12:27:27.315Z","etag":null,"topics":["components","ecommerce","framer-motion","shadcn-ui","templates","uikit","widgets"],"latest_commit_sha":null,"homepage":"","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/TechTronixx.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}},"created_at":"2025-01-23T11:37:01.000Z","updated_at":"2025-01-23T12:02:58.000Z","dependencies_parsed_at":"2025-01-23T12:39:07.243Z","dependency_job_id":null,"html_url":"https://github.com/TechTronixx/Widget_Showcase","commit_stats":null,"previous_names":["techtronixx/widget_showcase"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TechTronixx%2FWidget_Showcase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TechTronixx%2FWidget_Showcase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TechTronixx%2FWidget_Showcase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TechTronixx%2FWidget_Showcase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TechTronixx","download_url":"https://codeload.github.com/TechTronixx/Widget_Showcase/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244005448,"owners_count":20382435,"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","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":["components","ecommerce","framer-motion","shadcn-ui","templates","uikit","widgets"],"created_at":"2025-01-23T18:20:56.962Z","updated_at":"2026-05-21T10:02:20.323Z","avatar_url":"https://github.com/TechTronixx.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# E-commerce Widget System Documentation\n\n## Overview\n\nA modern, customizable widget system built with React, TypeScript, Framer Motion, and Tailwind CSS. The system provides a collection of reusable, accessible, and highly customizable e-commerce components designed for scalability and performance.\n\n\n\n\n## Widget Showcase\n\nhttps://github.com/user-attachments/assets/8fa33272-77dc-474f-8919-c9dc4b7d7dd9\n\nWatch our widget system in action! The video above demonstrates our collection of e-commerce components including:\n\n- Product Quick View with image gallery\n- Dynamic Stock Status Indicators\n- Animated Mini Cart Drawer\n- Interactive Refer \u0026 Earn Widgets\n- Order Status Timeline\n- Back in Stock Notifications\n\nEach component showcases smooth animations, responsive design, and theme customization capabilities.\n\n## Core Features\n\n- 🎨 Theme Support (Light/Dark)\n- 🎯 Customizable Accent Colors\n- 📱 Responsive Design\n- ♿ Accessibility\n- 🔄 Smooth Animations\n- 🛡️ Type Safety\n- 🎭 Multiple Variants\n\n## Widget Collection\n\n### 1. Product Quick View\n\nA modal-based product viewer with:\n\n- Image gallery with navigation\n- Product details (name, price, description)\n- Rating display\n- Size and color selection\n- Add to cart and wishlist actions\n- Responsive layout\n- Smooth enter/exit animations\n\n```typescript\n\u003cProductQuickView\n  theme=\"light\"\n  accentColor=\"#FF5733\"\n  isOpen={true}\n  product={productData}\n  onClose={() =\u003e {}}\n/\u003e\n```\n\n### 2. Stock Status Indicator\n\nA versatile status display with three variants:\n\n- Badge: Compact inline status\n- Card: Detailed status with progress\n- Inline: Simple text-based status\n\nFeatures:\n\n- Multiple states (in-stock, low-stock, out-of-stock, restocking)\n- Quantity tracking\n- Progress visualization\n- Customizable thresholds\n\n```typescript\n\u003cStockStatusIndicator\n  status=\"low-stock\"\n  quantity={3}\n  variant=\"card\"\n  showQuantity={true}\n/\u003e\n```\n\n### 3. Mini Cart Drawer\n\nA sliding cart drawer with:\n\n- Animated entrance/exit\n- Item quantity controls\n- Remove item functionality\n- Price breakdown\n- Empty state handling\n- Checkout button\n\n```typescript\n\u003cMiniCartDrawer\n  isOpen={true}\n  items={cartItems}\n  onUpdateQuantity={(id, qty) =\u003e {}}\n  onRemoveItem={(id) =\u003e {}}\n  shipping={5.99}\n  tax={2.99}\n/\u003e\n```\n\n### 4. Refer \u0026 Earn Widgets\n\n#### 4.1 Classic Form\n\nA traditional referral form with:\n\n- Email and name collection\n- Form validation\n- Success feedback\n- Clean design\n\n```typescript\n\u003cReferAndEarnWidget\n  theme=\"light\"\n  accentColor=\"#FF5733\"\n  rewardAmount={50}\n  onSubmit={(data) =\u003e {}}\n/\u003e\n```\n\n#### 4.2 Gamified Card\n\nA progress-tracking referral widget with:\n\n- Milestone system\n- Progress visualization\n- Rank display\n- Total referrals counter\n- Next milestone preview\n\n```typescript\n\u003cReferAndEarnCard\n  theme=\"light\"\n  accentColor=\"#FF5733\"\n  rewardAmount={50}\n  totalReferrals={12}\n  rank=\"Silver\"\n  nextMilestone={15}\n/\u003e\n```\n\n#### 4.3 Minimal Design\n\nA streamlined single-field referral form:\n\n- Single input field\n- Instant submission\n- Minimalist design\n- Floating action button\n\n```typescript\n\u003cReferAndEarnMinimal\n  theme=\"light\"\n  accentColor=\"#FF5733\"\n  rewardAmount={50}\n  onSubmit={(email) =\u003e {}}\n/\u003e\n```\n\n#### 4.4 Social Sharing\n\nA social-focused referral widget with:\n\n- Multi-platform sharing\n- Copyable referral code\n- Tabbed interface\n- Share statistics\n\n```typescript\n\u003cReferAndEarnSocial\n  theme=\"light\"\n  accentColor=\"#FF5733\"\n  rewardAmount={50}\n  referralLink=\"https://example.com/ref/123\"\n  referralCode=\"REF123\"\n/\u003e\n```\n\n### 5. Order Status Widgets\n\n#### 5.1 Classic Timeline\n\nA detailed order tracking display:\n\n- Vertical timeline\n- Status icons\n- Estimated delivery\n- Order details\n\n```typescript\n\u003cOrderStatusWidget\n  theme=\"light\"\n  accentColor=\"#FF5733\"\n  currentStatus=\"processing\"\n  orderNumber=\"ORD123\"\n  estimatedDelivery=\"2024-02-01\"\n/\u003e\n```\n\n#### 5.2 Compact View\n\nA space-efficient status display:\n\n- Horizontal progress\n- Minimal design\n- Key information only\n- Mobile-optimized\n\n```typescript\n\u003cOrderStatusCompact\n  theme=\"light\"\n  accentColor=\"#FF5733\"\n  currentStatus=\"shipped\"\n  orderNumber=\"ORD123\"\n  estimatedDelivery=\"2024-02-01\"\n/\u003e\n```\n\n#### 5.3 Toast Notification\n\nA non-intrusive status update:\n\n- Auto-dismissing\n- Progress indicator\n- Status-specific icons\n- Minimal footprint\n\n```typescript\n\u003cOrderStatusToast\n  theme=\"light\"\n  accentColor=\"#FF5733\"\n  currentStatus=\"out-for-delivery\"\n  orderNumber=\"ORD123\"\n  isVisible={true}\n  onClose={() =\u003e {}}\n/\u003e\n```\n\n### 6. Back in Stock Notification\n\nA notification signup widget:\n\n- Email collection\n- Multiple notification options\n- Success feedback\n- Stock status display\n\n```typescript\n\u003cBackInStockNotification\n  theme=\"light\"\n  accentColor=\"#FF5733\"\n  productName=\"Premium Product\"\n  expectedDate=\"2024-02-01\"\n  onSubmit={(data) =\u003e {}}\n/\u003e\n```\n\n## Implementation Details\n\n### Animation Strategy\n\n- Using Framer Motion for fluid animations\n- AnimatePresence for mount/unmount animations\n- Spring animations for natural movement\n- Layout animations for smooth transitions\n\n### State Management\n\n- Local state for UI interactions\n- Props for data and callbacks\n- Controlled components pattern\n\n### Styling Approach\n\n- Tailwind CSS for utility-first styling\n- Dynamic theme switching\n- Consistent spacing and colors\n- Responsive breakpoints\n\n### Type Safety\n\n- TypeScript interfaces for props\n- Strict null checks\n- Exhaustive status handling\n- Type guards where necessary\n\n## Best Practices\n\n### Performance\n\n- Code splitting for each widget\n- Optimized animations\n- Lazy loading of images\n- Memoization of expensive calculations\n\n### Accessibility\n\n- ARIA labels and roles\n- Keyboard navigation\n- Focus management\n- Color contrast compliance\n\n### Customization\n\n- Theme support (light/dark)\n- Configurable colors\n- Multiple variants\n- Flexible props API\n\n## Common Interview Questions\n\n1. **Why use Framer Motion over CSS animations?**\n\n   - Better control over animation states\n   - More complex animation sequences\n   - Built-in exit animations\n   - TypeScript support\n\n2. **How is theme switching implemented?**\n\n   - Theme prop passed to components\n   - Conditional classes with Tailwind\n   - Dynamic color variables\n   - Consistent theme interface\n\n3. **What makes the widgets reusable?**\n\n   - Flexible props API\n   - Consistent styling patterns\n   - Self-contained components\n   - Clear documentation\n\n4. **How is performance optimized?**\n   - Lazy loading\n   - Animation optimization\n   - Efficient re-renders\n   - Code splitting\n\n## Future Enhancements\n\n1. **Integration Features**\n\n   - Analytics hooks\n   - A/B testing support\n   - Custom event system\n   - Third-party integrations\n\n2. **Additional Customization**\n\n   - More variants\n   - Custom animation options\n   - Extended theming\n   - Layout alternatives\n\n3. **Advanced Features**\n   - Offline support\n   - Multi-language\n   - RTL support\n   - Advanced analytics\n\n## Technical Requirements\n\n```json\n{\n  \"dependencies\": {\n    \"react\": \"^18.0.0\",\n    \"framer-motion\": \"^10.0.0\",\n    \"tailwindcss\": \"^3.0.0\",\n    \"lucide-react\": \"^0.300.0\",\n    \"typescript\": \"^5.0.0\"\n  }\n}\n```\n\n## Code Examples\n\n### Theme Implementation\n\n```typescript\ninterface ThemeProps {\n  theme?: \"light\" | \"dark\";\n  accentColor?: string;\n}\n\nconst getThemeClasses = (theme: \"light\" | \"dark\") =\u003e ({\n  background: theme === \"light\" ? \"bg-white\" : \"bg-gray-900\",\n  text: theme === \"light\" ? \"text-gray-900\" : \"text-white\",\n  border: theme === \"light\" ? \"border-gray-200\" : \"border-gray-700\",\n});\n```\n\n### Animation Pattern\n\n```typescript\n\u003cAnimatePresence\u003e\n  {isOpen \u0026\u0026 (\n    \u003cmotion.div\n      initial={{ opacity: 0, scale: 0.95 }}\n      animate={{ opacity: 1, scale: 1 }}\n      exit={{ opacity: 0, scale: 0.95 }}\n      transition={{ type: \"spring\" }}\n    \u003e\n      {content}\n    \u003c/motion.div\u003e\n  )}\n\u003c/AnimatePresence\u003e\n```\n\n## Contributing Guidelines\n\n1. Follow TypeScript best practices\n2. Maintain consistent styling patterns\n3. Include proper documentation\n4. Add necessary tests\n5. Ensure accessibility compliance\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechtronixx%2Fwidget_showcase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftechtronixx%2Fwidget_showcase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechtronixx%2Fwidget_showcase/lists"}