{"id":31370089,"url":"https://github.com/commjoen/seflscanfun","last_synced_at":"2026-05-04T06:05:33.651Z","repository":{"id":315063514,"uuid":"1057943482","full_name":"commjoen/seflscanfun","owner":"commjoen","description":"This is a Dutch game which simulates the Albert Heijn self-scan kiosks","archived":false,"fork":false,"pushed_at":"2026-03-27T05:26:17.000Z","size":493,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-03-27T17:43:30.162Z","etag":null,"topics":["ah","game","play","self-scanning"],"latest_commit_sha":null,"homepage":"https://commjoen.github.io/seflscanfun/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/commjoen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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-16T12:16:30.000Z","updated_at":"2026-03-27T05:26:20.000Z","dependencies_parsed_at":"2025-09-16T14:38:13.723Z","dependency_job_id":"ff37c1c8-8f27-4ba0-9b40-fae8c56fe084","html_url":"https://github.com/commjoen/seflscanfun","commit_stats":null,"previous_names":["commjoen/seflscanfun"],"tags_count":37,"template":false,"template_full_name":null,"purl":"pkg:github/commjoen/seflscanfun","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commjoen%2Fseflscanfun","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commjoen%2Fseflscanfun/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commjoen%2Fseflscanfun/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commjoen%2Fseflscanfun/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/commjoen","download_url":"https://codeload.github.com/commjoen/seflscanfun/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commjoen%2Fseflscanfun/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31311041,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T12:59:32.332Z","status":"ssl_error","status_checked_at":"2026-04-02T12:54:48.875Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["ah","game","play","self-scanning"],"created_at":"2025-09-27T18:25:55.009Z","updated_at":"2026-04-02T17:03:29.391Z","avatar_url":"https://github.com/commjoen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Albert Heijn Zelfscanner Simulatie\n\nEen interactieve webapplicatie die een Albert Heijn zelfscanner simuleert. Deze applicatie is ontwikkeld als een leerzame en leuke manier om veilig programmeren te oefenen in retail/betaal simulatie webapps.\n\n## ✨ Functies\n\n- **Product Scannen**: Simuleer het scannen van barcodes om producten toe te voegen\n- **Winkelwagen Beheer**: Voeg producten toe, verwijder ze en wijzig hoeveelheden\n- **Digitale Bon**: Genereer en bekijk digitale kassabonnen\n- **Checkout Proces**: Simuleer betaling met verschillende betaalmethoden\n- **\"Lees van Scanner\"**: Genereer willekeurige boodschappenlijsten met één klik\n- **Responsief Design**: Werkt perfect op tablets, telefoons en desktops\n- **Albert Heijn Branding**: Authentieke kleuren en styling\n- **Offline Functionaliteit**: Service Worker voor offline gebruik\n\n## 🚀 Live Demo\n\nDe applicatie is beschikbaar op: [GitHub Pages URL]\n\n## 🛠️ Technologieën\n\n- **Frontend**: Vanilla HTML5, CSS3, JavaScript (ES6+)\n- **Styling**: Albert Heijn kleurenschema met CSS Grid en Flexbox\n- **PWA**: Service Worker voor offline functionaliteit\n- **CI/CD**: GitHub Actions voor automatische deployment en releases\n- **Testing**: Ingebouwde test suite met Node.js 24\n- **Docker**: Container support met GitHub Container Registry (GHCR)\n- **Versioning**: Semantic versioning met automatische releases\n- **Code Quality**: ESLint, Prettier, en pre-commit hooks\n- **Dependency Management**: Dependabot voor automatische updates\n\n## 📱 Functionaliteiten\n\n### Product Database\n- 20+ Nederlandse Albert Heijn producten\n- Realistische prijzen en beschrijvingen\n- Verschillende categorieën (Zuivel, Groente \u0026 Fruit, etc.)\n- Emoji als product afbeeldingen\n\n### Barcode Scanning\n- Voer barcode handmatig in of simuleer scanning\n- Real-time product herkenning\n- Visuele feedback bij succesvol scannen\n\n### Winkelwagen\n- Dynamische hoeveelheid aanpassingen\n- Product verwijdering\n- Real-time prijs berekening\n- Subtotaal en eindtotaal weergave\n\n### Betaalproces\n- Meerdere betaalmethoden (PIN, Contactloos, Contant)\n- Gesimuleerde betaalverwerking\n- Betaalbevestiging\n\n### Digitale Bon\n- Volledige kassabon met datum/tijd\n- BTW berekening\n- Print functionaliteit\n- Unieke bon nummer\n\n## 🎯 Gebruik\n\n### Normale Workflow\n1. Open de applicatie in je browser\n2. Voer een barcode in (bijv. `8713800000015` voor melk)\n3. Klik \"Scan\" of druk Enter\n4. Voeg het product toe aan je winkelwagen\n5. Herhaal voor meer producten\n6. Klik \"Afrekenen\" wanneer je klaar bent\n7. Kies een betaalmethode\n8. Bekijk je digitale bon\n\n### \"Lees van Scanner\" Feature\n1. Klik op \"Lees van Scanner\" voor een willekeurige boodschappenlijst\n2. De applicatie genereert automatisch een gevulde winkelwagen\n3. Een digitale bon wordt direct getoond\n\n### Beschikbare Barcodes\n```\n8713800000015 - AH Verse melk\n8710398230046 - AH Brood wit  \n8713800000022 - AH Eieren vrije uitloop\n8710398230053 - AH Bananen\n8713800000039 - AH Tomaten\n8710398230060 - AH Kaas jong belegen\n8713800000046 - AH Koffie\n8710398230077 - AH Pasta penne\n... en meer!\n```\n\n## 🧪 Testing\n\nDe applicatie bevat een uitgebreide test suite:\n\n1. Open `test.html` in je browser\n2. Tests worden automatisch uitgevoerd\n3. Bekijk resultaten voor product database validatie\n\n### Test Categorieën\n- Product database integriteit\n- Barcode lookup functionaliteit  \n- Zoek en filter functies\n- Prijs validatie\n- Nederlandse content verificatie\n\n## 🏗️ Project Structuur\n\n```\n/\n├── index.html          # Hoofdapplicatie\n├── styles.css          # Styling met AH kleuren\n├── app.js             # Hoofdapplicatie logica\n├── products.js        # Product database en functies\n├── sw.js              # Service Worker\n├── test.html          # Test suite\n├── README.md          # Documentatie\n└── .github/\n    └── workflows/\n        └── deploy.yml  # GitHub Actions deployment\n```\n\n## 🎨 Design System\n\n### Albert Heijn Kleuren\n- **Primair Blauw**: `#0066CC`\n- **Donker Blauw**: `#004499`  \n- **Oranje**: `#FF6600`\n- **Groen**: `#00AA44`\n- **Licht Grijs**: `#F5F5F5`\n\n### Responsive Breakpoints\n- **Desktop**: \u003e768px\n- **Tablet**: 481px - 768px\n- **Mobile**: ≤480px\n\n## 🚀 Deployment\n\n### GitHub Pages\nDe applicatie wordt automatisch gedeployed naar GitHub Pages via GitHub Actions:\n\n1. Push naar `main` branch\n2. GitHub Actions voert tests uit\n3. Bij success: deployment naar Pages\n4. Live URL wordt beschikbaar\n\n### Lokale Development\n```bash\n# Clone repository\ngit clone [repository-url]\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm start\n# Of gebruik een lokale server\npython -m http.server 8000\n# Navigeer naar http://localhost:8000\n```\n\n### Code Quality Tools\n```bash\n# Linting en formatting\nnpm run lint:check    # Check ESLint rules\nnpm run lint          # Fix ESLint issues\nnpm run format:check  # Check Prettier formatting  \nnpm run format        # Apply Prettier formatting\n\n# Pre-commit hooks (optioneel)\npip install pre-commit\npre-commit install\n```\n\n### Docker Deployment\n```bash\n# Pull en start vanaf GHCR\ndocker run -p 8000:8000 ghcr.io/commjoen/seflscanfun:latest\n\n# Lokaal bouwen\ndocker build -t seflscanfun .\ndocker run -p 8000:8000 seflscanfun\n```\n\nZie [DOCKER.md](DOCKER.md) voor uitgebreide Docker documentatie including Kubernetes en Cloud Run deployment.\n\n## 🔒 Veiligheid \u0026 Best Practices\n\n- **Geen echte betaalverwerking**: Volledig gesimuleerd\n- **Client-side only**: Geen server-side dependencies\n- **Geen gevoelige data**: Alle data is public en educatief\n- **XSS Preventie**: Input sanitization waar nodig\n- **Responsive Design**: Werkt op alle moderne browsers\n\n## 🤝 Bijdragen\n\nBijdragen zijn welkom! Areas voor verbetering:\n\n- **Meer Producten**: Uitbreiden van de product database\n- **Nieuwe Features**: Kortingen, loyaliteit punten, etc.\n- **Verbeterde UX**: Animaties, geluid effecten\n- **Geavanceerde Tests**: E2E testing, performance tests\n- **Toegankelijkheid**: ARIA labels, keyboard navigation\n\n### Development Guidelines\n1. Behoud Albert Heijn branding en kleuren\n2. Zorg voor mobile-first responsive design\n3. Test alle functies in `test.html`\n4. Update documentatie bij wijzigingen\n5. Volg bestaande code conventions\n6. Gebruik ESLint en Prettier voor code quality\n7. Maak gebruik van pre-commit hooks\n\n**Zie [CONTRIBUTING.md](CONTRIBUTING.md) voor uitgebreide ontwikkel-instructies.**\n\n## 📄 Licentie\n\nDit project is ontwikkeld voor educatieve doeleinden. Albert Heijn is een geregistreerd handelsmerk van Ahold Delhaize.\n\n## 🎯 Leerdobestellingen\n\nDeze applicatie demonstreert:\n- **Frontend Development**: Modern HTML/CSS/JS patterns\n- **Responsive Design**: Mobile-first benadering  \n- **State Management**: Shopping cart en UI state\n- **Event Handling**: User interactions en form handling\n- **Local Storage**: Persistent data (optioneel)\n- **PWA Concepts**: Service Workers en offline functionaliteit\n- **Testing**: Automated test suites\n- **CI/CD**: GitHub Actions workflows\n- **UI/UX Design**: Retail interface patterns\n\nPerfect voor het leren van secure coding practices in een retail context!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcommjoen%2Fseflscanfun","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcommjoen%2Fseflscanfun","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcommjoen%2Fseflscanfun/lists"}