https://github.com/commjoen/seflscanfun
This is a Dutch game which simulates the Albert Heijn self-scan kiosks
https://github.com/commjoen/seflscanfun
ah game play self-scanning
Last synced: about 1 month ago
JSON representation
This is a Dutch game which simulates the Albert Heijn self-scan kiosks
- Host: GitHub
- URL: https://github.com/commjoen/seflscanfun
- Owner: commjoen
- License: gpl-2.0
- Created: 2025-09-16T12:16:30.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2026-03-27T05:26:17.000Z (3 months ago)
- Last Synced: 2026-03-27T17:43:30.162Z (3 months ago)
- Topics: ah, game, play, self-scanning
- Language: JavaScript
- Homepage: https://commjoen.github.io/seflscanfun/
- Size: 481 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Albert Heijn Zelfscanner Simulatie
Een 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.
## ✨ Functies
- **Product Scannen**: Simuleer het scannen van barcodes om producten toe te voegen
- **Winkelwagen Beheer**: Voeg producten toe, verwijder ze en wijzig hoeveelheden
- **Digitale Bon**: Genereer en bekijk digitale kassabonnen
- **Checkout Proces**: Simuleer betaling met verschillende betaalmethoden
- **"Lees van Scanner"**: Genereer willekeurige boodschappenlijsten met één klik
- **Responsief Design**: Werkt perfect op tablets, telefoons en desktops
- **Albert Heijn Branding**: Authentieke kleuren en styling
- **Offline Functionaliteit**: Service Worker voor offline gebruik
## 🚀 Live Demo
De applicatie is beschikbaar op: [GitHub Pages URL]
## 🛠️ Technologieën
- **Frontend**: Vanilla HTML5, CSS3, JavaScript (ES6+)
- **Styling**: Albert Heijn kleurenschema met CSS Grid en Flexbox
- **PWA**: Service Worker voor offline functionaliteit
- **CI/CD**: GitHub Actions voor automatische deployment en releases
- **Testing**: Ingebouwde test suite met Node.js 24
- **Docker**: Container support met GitHub Container Registry (GHCR)
- **Versioning**: Semantic versioning met automatische releases
- **Code Quality**: ESLint, Prettier, en pre-commit hooks
- **Dependency Management**: Dependabot voor automatische updates
## 📱 Functionaliteiten
### Product Database
- 20+ Nederlandse Albert Heijn producten
- Realistische prijzen en beschrijvingen
- Verschillende categorieën (Zuivel, Groente & Fruit, etc.)
- Emoji als product afbeeldingen
### Barcode Scanning
- Voer barcode handmatig in of simuleer scanning
- Real-time product herkenning
- Visuele feedback bij succesvol scannen
### Winkelwagen
- Dynamische hoeveelheid aanpassingen
- Product verwijdering
- Real-time prijs berekening
- Subtotaal en eindtotaal weergave
### Betaalproces
- Meerdere betaalmethoden (PIN, Contactloos, Contant)
- Gesimuleerde betaalverwerking
- Betaalbevestiging
### Digitale Bon
- Volledige kassabon met datum/tijd
- BTW berekening
- Print functionaliteit
- Unieke bon nummer
## 🎯 Gebruik
### Normale Workflow
1. Open de applicatie in je browser
2. Voer een barcode in (bijv. `8713800000015` voor melk)
3. Klik "Scan" of druk Enter
4. Voeg het product toe aan je winkelwagen
5. Herhaal voor meer producten
6. Klik "Afrekenen" wanneer je klaar bent
7. Kies een betaalmethode
8. Bekijk je digitale bon
### "Lees van Scanner" Feature
1. Klik op "Lees van Scanner" voor een willekeurige boodschappenlijst
2. De applicatie genereert automatisch een gevulde winkelwagen
3. Een digitale bon wordt direct getoond
### Beschikbare Barcodes
```
8713800000015 - AH Verse melk
8710398230046 - AH Brood wit
8713800000022 - AH Eieren vrije uitloop
8710398230053 - AH Bananen
8713800000039 - AH Tomaten
8710398230060 - AH Kaas jong belegen
8713800000046 - AH Koffie
8710398230077 - AH Pasta penne
... en meer!
```
## 🧪 Testing
De applicatie bevat een uitgebreide test suite:
1. Open `test.html` in je browser
2. Tests worden automatisch uitgevoerd
3. Bekijk resultaten voor product database validatie
### Test Categorieën
- Product database integriteit
- Barcode lookup functionaliteit
- Zoek en filter functies
- Prijs validatie
- Nederlandse content verificatie
## 🏗️ Project Structuur
```
/
├── index.html # Hoofdapplicatie
├── styles.css # Styling met AH kleuren
├── app.js # Hoofdapplicatie logica
├── products.js # Product database en functies
├── sw.js # Service Worker
├── test.html # Test suite
├── README.md # Documentatie
└── .github/
└── workflows/
└── deploy.yml # GitHub Actions deployment
```
## 🎨 Design System
### Albert Heijn Kleuren
- **Primair Blauw**: `#0066CC`
- **Donker Blauw**: `#004499`
- **Oranje**: `#FF6600`
- **Groen**: `#00AA44`
- **Licht Grijs**: `#F5F5F5`
### Responsive Breakpoints
- **Desktop**: >768px
- **Tablet**: 481px - 768px
- **Mobile**: ≤480px
## 🚀 Deployment
### GitHub Pages
De applicatie wordt automatisch gedeployed naar GitHub Pages via GitHub Actions:
1. Push naar `main` branch
2. GitHub Actions voert tests uit
3. Bij success: deployment naar Pages
4. Live URL wordt beschikbaar
### Lokale Development
```bash
# Clone repository
git clone [repository-url]
# Install dependencies
npm install
# Start development server
npm start
# Of gebruik een lokale server
python -m http.server 8000
# Navigeer naar http://localhost:8000
```
### Code Quality Tools
```bash
# Linting en formatting
npm run lint:check # Check ESLint rules
npm run lint # Fix ESLint issues
npm run format:check # Check Prettier formatting
npm run format # Apply Prettier formatting
# Pre-commit hooks (optioneel)
pip install pre-commit
pre-commit install
```
### Docker Deployment
```bash
# Pull en start vanaf GHCR
docker run -p 8000:8000 ghcr.io/commjoen/seflscanfun:latest
# Lokaal bouwen
docker build -t seflscanfun .
docker run -p 8000:8000 seflscanfun
```
Zie [DOCKER.md](DOCKER.md) voor uitgebreide Docker documentatie including Kubernetes en Cloud Run deployment.
## 🔒 Veiligheid & Best Practices
- **Geen echte betaalverwerking**: Volledig gesimuleerd
- **Client-side only**: Geen server-side dependencies
- **Geen gevoelige data**: Alle data is public en educatief
- **XSS Preventie**: Input sanitization waar nodig
- **Responsive Design**: Werkt op alle moderne browsers
## 🤝 Bijdragen
Bijdragen zijn welkom! Areas voor verbetering:
- **Meer Producten**: Uitbreiden van de product database
- **Nieuwe Features**: Kortingen, loyaliteit punten, etc.
- **Verbeterde UX**: Animaties, geluid effecten
- **Geavanceerde Tests**: E2E testing, performance tests
- **Toegankelijkheid**: ARIA labels, keyboard navigation
### Development Guidelines
1. Behoud Albert Heijn branding en kleuren
2. Zorg voor mobile-first responsive design
3. Test alle functies in `test.html`
4. Update documentatie bij wijzigingen
5. Volg bestaande code conventions
6. Gebruik ESLint en Prettier voor code quality
7. Maak gebruik van pre-commit hooks
**Zie [CONTRIBUTING.md](CONTRIBUTING.md) voor uitgebreide ontwikkel-instructies.**
## 📄 Licentie
Dit project is ontwikkeld voor educatieve doeleinden. Albert Heijn is een geregistreerd handelsmerk van Ahold Delhaize.
## 🎯 Leerdobestellingen
Deze applicatie demonstreert:
- **Frontend Development**: Modern HTML/CSS/JS patterns
- **Responsive Design**: Mobile-first benadering
- **State Management**: Shopping cart en UI state
- **Event Handling**: User interactions en form handling
- **Local Storage**: Persistent data (optioneel)
- **PWA Concepts**: Service Workers en offline functionaliteit
- **Testing**: Automated test suites
- **CI/CD**: GitHub Actions workflows
- **UI/UX Design**: Retail interface patterns
Perfect voor het leren van secure coding practices in een retail context!