{"id":32358698,"url":"https://github.com/schafeld/vue-typescript-ab-testing","last_synced_at":"2026-05-17T04:44:55.955Z","repository":{"id":319300985,"uuid":"1078274403","full_name":"schafeld/vue-typescript-ab-testing","owner":"schafeld","description":"A training project (online shop) with a rudimentary Vue app that serves as training ground for A/B-testing techniques.","archived":false,"fork":false,"pushed_at":"2025-10-18T08:16:01.000Z","size":175,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-03-01T22:24:32.461Z","etag":null,"topics":["pinia","shop","typescript","vue","vue3"],"latest_commit_sha":null,"homepage":"https://schafeld-shop-experiment.netlify.app/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/schafeld.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-10-17T13:28:20.000Z","updated_at":"2025-10-22T11:42:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"3f93e9ca-e8f4-4de3-aba3-216623a04578","html_url":"https://github.com/schafeld/vue-typescript-ab-testing","commit_stats":null,"previous_names":["schafeld/vue-typescript-ab-testing"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/schafeld/vue-typescript-ab-testing","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schafeld%2Fvue-typescript-ab-testing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schafeld%2Fvue-typescript-ab-testing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schafeld%2Fvue-typescript-ab-testing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schafeld%2Fvue-typescript-ab-testing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/schafeld","download_url":"https://codeload.github.com/schafeld/vue-typescript-ab-testing/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schafeld%2Fvue-typescript-ab-testing/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33127826,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-16T18:38:32.183Z","status":"online","status_checked_at":"2026-05-17T02:00:05.366Z","response_time":107,"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":["pinia","shop","typescript","vue","vue3"],"created_at":"2025-10-24T13:29:50.931Z","updated_at":"2026-05-17T04:44:55.949Z","avatar_url":"https://github.com/schafeld.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue 3 A/B Testing E-commerce Application\n\nA comprehensive demonstration project showcasing advanced Vue 3 development with TypeScript, focusing on A/B testing implementation for e-commerce applications. This project is designed for senior frontend developer interview preparation and demonstrates modern development practices.\n\n## 🎯 Project Overview\n\nThis application demonstrates:\n- **Vue 3 Composition API** patterns and best practices\n- **A/B Testing Framework** with deterministic user bucketing\n- **TypeScript Integration** with advanced type patterns\n- **E-commerce Functionality** with conversion tracking\n- **Analytics System** with comprehensive event tracking\n- **Node.js Backend** for data collection and experiment management\n- **Python Analytics** for statistical analysis and reporting\n\n## 🏗️ Architecture\n\n### Frontend Stack\n- **Vue 3.5+** with Composition API\n- **TypeScript 5.0+** for type safety\n- **Vite 6.0+** for build tooling\n- **Vuetify 3** for Material Design UI\n- **Vue Router 4** for navigation\n- **Pinia** for state management\n- **Vue I18n** for internationalization\n\n### Backend \u0026 Analytics\n- **Node.js + Express** API server\n- **SQLite** database for analytics storage\n- **Python** for statistical analysis\n- **Better SQLite3** for high-performance database operations\n\n## 🚀 Quick Start\n\n### Prerequisites\n- Node.js 18+ \n- Python 3.9+\n- npm or yarn\n\n### Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone \u003crepository-url\u003e\n   cd vue-typescript-ab-testing\n   ```\n\n2. **Install frontend dependencies**\n   ```bash\n   cd shop-app\n   npm install\n   ```\n\n3. **Install backend dependencies**\n   ```bash\n   cd server\n   npm install\n   ```\n\n4. **Set up Python analytics environment**\n   ```bash\n   cd ../analytics\n   python -m venv venv\n   source venv/bin/activate  # On Windows: venv\\\\Scripts\\\\activate\n   pip install -r requirements.txt\n   ```\n\n### Development\n\n1. **Start the backend server**\n   ```bash\n   cd server\n   npm run dev\n   ```\n\n2. **Start the frontend development server**\n   ```bash\n   cd shop-app\n   npm run dev\n   ```\n\n3. **Access the application**\n   - Frontend: http://localhost:5173\n   - Backend API: http://localhost:3001\n   - Health check: http://localhost:3001/api/health\n\n## 📊 A/B Testing Features\n\n### Implemented Experiments\n\n1. **Homepage Hero Layout Test**\n   - Variants: Centered vs Left-aligned layout\n   - Metrics: Click-through rate, conversion rate\n   - Traffic allocation: 50/50 split\n\n2. **Button Color Test**\n   - Variants: Blue, Green, Red CTA buttons\n   - Metrics: Click rate, conversion impact\n   - Traffic allocation: 33/33/34 split\n\n3. **Product Showcase Layout**\n   - Variants: Grid vs Carousel display\n   - Metrics: Product engagement, add-to-cart rate\n\n### Key A/B Testing Concepts Demonstrated\n\n- **Deterministic User Bucketing**: Consistent variant assignment\n- **Statistical Significance Testing**: Proper hypothesis testing\n- **Conversion Tracking**: Goal measurement and attribution\n- **Traffic Allocation**: Percentage-based experiment inclusion\n- **Experiment Targeting**: User segmentation rules\n\n## 🛍️ E-commerce Features\n\n### Shopping Flow\n1. **Product Catalog** - Browse products with filtering\n2. **Product Details** - Individual product pages with A/B tested layouts\n3. **Shopping Cart** - Add/remove items with persistent state\n4. **Checkout Process** - Multi-step checkout with conversion tracking\n5. **Order Confirmation** - Purchase completion and analytics\n\n### Analytics Events Tracked\n- Page views and navigation\n- Product interactions\n- Cart operations\n- Purchase completions\n- A/B experiment assignments and conversions\n\n## 🔧 Technical Highlights\n\n### Vue 3 Patterns Demonstrated\n\n#### Custom Composables\n```typescript\n// A/B Testing Integration\nconst { variant, isLoading, trackConversion } = useABTest('button-color-test')\n\n// Analytics Integration  \nconst analytics = useAnalytics()\nawait analytics.track('product_view', { productId: '123' })\n\n// Shopping Cart Management\nconst { cart, addItem, removeItem } = useShoppingCart()\n```\n\n#### Advanced TypeScript Usage\n```typescript\n// Generic API responses\ninterface ApiResponse\u003cT\u003e {\n  data?: T\n  error?: ApiError\n  meta?: ResponseMeta\n}\n\n// Discriminated unions for state\ntype LoadingState\u003cT\u003e = \n  | { status: 'loading'; data: null; error: null }\n  | { status: 'success'; data: T; error: null }\n  | { status: 'error'; data: null; error: string }\n```\n\n#### Reactive State Management\n```typescript\n// Pinia store with TypeScript\nexport const useExperimentsStore = defineStore('experiments', () =\u003e {\n  const experiments = ref\u003cExperiment[]\u003e([])\n  const activeExperiments = computed(() =\u003e \n    experiments.value.filter(e =\u003e e.isActive)\n  )\n  \n  return { experiments, activeExperiments, loadExperiments }\n})\n```\n\n### A/B Testing Implementation\n\n#### Hash-based Assignment Algorithm\n```typescript\nclass HashAssignmentAlgorithm implements AssignmentAlgorithm {\n  assignVariant(user: User, experiment: Experiment): Variant | null {\n    // Deterministic traffic allocation\n    const trafficHash = this.hash(user.id + experiment.id + 'traffic')\n    const trafficBucket = trafficHash % 100\n    \n    if (trafficBucket \u003e= experiment.trafficAllocation) {\n      return null // User not included\n    }\n    \n    // Consistent variant assignment\n    const variantHash = this.hash(user.id + experiment.id + 'variant')\n    // ... variant selection logic\n  }\n}\n```\n\n#### Experiment Configuration\n```typescript\nconst experiment: Experiment = {\n  id: 'homepage-hero-test',\n  name: 'Homepage Hero Layout Test',\n  isActive: true,\n  trafficAllocation: 50, // 50% of users\n  variants: [\n    {\n      id: 'control',\n      name: 'Original Layout', \n      weight: 50,\n      isControl: true,\n      config: { layout: 'centered' }\n    },\n    {\n      id: 'variant-a',\n      name: 'Left Aligned',\n      weight: 50, \n      isControl: false,\n      config: { layout: 'left' }\n    }\n  ]\n}\n```\n\n## 📈 Analytics \u0026 Reporting\n\n### Python Analysis Tools\n\nRun statistical analysis on experiment results:\n\n```bash\n# Basic experiment analysis\npython analyze_experiments.py --experiment homepage-hero-test\n\n# Generate comprehensive report\npython analyze_experiments.py --experiment homepage-hero-test --report\n\n# Create visualizations\npython analyze_experiments.py --experiment homepage-hero-test --visualize\n\n# Funnel analysis\npython analyze_experiments.py --experiment checkout-flow-test --funnel\n```\n\n### Key Metrics Tracked\n- **Conversion Rate**: Primary success metric\n- **Statistical Significance**: P-values and confidence intervals  \n- **Effect Size**: Practical significance measurement\n- **Sample Size**: Power analysis and recommendations\n- **Revenue Impact**: Business metrics and ROI\n\n## 🧪 Testing Strategy\n\n### Unit Testing\n```typescript\n// Composable testing\ndescribe('useABTest', () =\u003e {\n  it('should assign consistent variants', () =\u003e {\n    const { variant } = useABTest('test-experiment')\n    expect(variant.value).toBeDefined()\n  })\n})\n```\n\n### Component Testing\n```typescript  \n// Vue component testing\ndescribe('ProductCard', () =\u003e {\n  it('renders A/B tested button variant', () =\u003e {\n    const wrapper = mount(ProductCard, { props: { product } })\n    expect(wrapper.find('.cta-button')).toExist()\n  })\n})\n```\n\n### E2E Testing\n```typescript\n// A/B testing validation\ntest('experiment assignment consistency', async ({ page }) =\u003e {\n  await page.goto('/')\n  const variant = await page.getAttribute('[data-experiment]', 'data-variant')\n  expect(['control', 'variant-a']).toContain(variant)\n})\n```\n\n## 📚 Learning Objectives\n\nThis project demonstrates mastery of:\n\n### Technical Skills\n- **Vue 3 Ecosystem**: Composition API, TypeScript, tooling\n- **State Management**: Reactive patterns, Pinia integration\n- **Testing**: Unit, integration, E2E strategies\n- **Performance**: Optimization and monitoring\n- **Build Tools**: Vite configuration and optimization\n\n### A/B Testing Expertise\n- **Experiment Design**: Statistical rigor and methodology\n- **Implementation**: Technical architecture and patterns  \n- **Analysis**: Statistical testing and interpretation\n- **Business Impact**: Metrics definition and measurement\n\n### Software Architecture\n- **Clean Code**: SOLID principles and patterns\n- **Type Safety**: Advanced TypeScript usage\n- **API Design**: RESTful services and data modeling\n- **Documentation**: Comprehensive technical documentation\n\n## 📖 Project Structure\n\n```\nvue-typescript-ab-testing/\n├── shop-app/                 # Vue 3 frontend application\n│   ├── src/\n│   │   ├── components/      # Vue components\n│   │   ├── composables/     # Composition API hooks\n│   │   ├── services/        # Business logic services  \n│   │   ├── stores/          # Pinia state management\n│   │   ├── types/           # TypeScript definitions\n│   │   ├── utils/           # Helper utilities\n│   │   └── views/           # Route components\n│   ├── server/              # Node.js backend\n│   │   ├── src/\n│   │   │   ├── routes/      # API endpoints\n│   │   │   ├── database/    # Database management\n│   │   │   └── models/      # Data models\n│   └── package.json\n├── analytics/               # Python analytics tools\n│   ├── analyze_experiments.py\n│   └── requirements.txt\n├── DOCUMENTS/              # Project documentation\n├── PLANNING.md             # Development planning\n├── TECHNICAL_DOCUMENTATION.md\n└── README.md\n```\n\n## 🔬 Interview Preparation\n\nThis project is specifically designed for technical interviews and covers:\n\n### Common Interview Topics\n- Vue 3 Composition API patterns and best practices\n- TypeScript advanced features and integration\n- A/B testing implementation and statistical analysis\n- State management with reactive patterns\n- Performance optimization techniques\n- Testing strategies and quality assurance\n\n### Code Review Scenarios\n- Component architecture and reusability\n- Type safety and error handling\n- A/B testing integration patterns\n- Analytics implementation and data flow\n- Code organization and maintainability\n\n### Technical Discussion Points\n- A/B testing statistical concepts\n- Frontend performance optimization\n- Vue.js ecosystem and tooling\n- Modern JavaScript/TypeScript features\n- Software architecture decisions\n\n## 📄 Documentation\n\n- **[Technical Documentation](TECHNICAL_DOCUMENTATION.md)** - Comprehensive technical guide\n- **[Planning Documentation](PLANNING.md)** - Development planning and architecture\n- **[API Documentation](server/API.md)** - Backend API reference\n- **[Component Documentation](shop-app/COMPONENTS.md)** - Vue component guide\n\n## 🤝 Contributing\n\nThis is an interview preparation project, but contributions are welcome:\n\n1. Fork the repository\n2. Create a feature branch\n3. Implement improvements with tests\n4. Submit a pull request with clear description\n\n## 📝 License\n\nThis project is for educational and interview preparation purposes. See LICENSE file for details.\n\n## 🙋‍♂️ Support\n\nFor questions about this project or A/B testing implementation:\n- Review the documentation files\n- Check the code comments for detailed explanations\n- Explore the example implementations in each module\n\n---\n\n**Built with ❤️ for senior frontend developer interview preparation**\n\n*Demonstrating Vue 3, TypeScript, A/B Testing, and modern web development practices*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fschafeld%2Fvue-typescript-ab-testing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fschafeld%2Fvue-typescript-ab-testing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fschafeld%2Fvue-typescript-ab-testing/lists"}