🔍 DevScanner05

A simple, lightweight loyalty card scanner application built with HTML, CSS, JavaScript, and Python Flask.

Claude code audited ScannerAPP code and rewrote it in HTML/CSS/JS & Python.

Features

• QR Code Scanning: Camera-based QR code scanning using jsQR library
• Manual Input: Enter card codes manually if camera isn't available
• Customer Management: Automatic customer creation and lookup
• Points System: Add loyalty points to customer accounts
• Activity Logging: Track recent scanning activity
• Responsive Design: Works on desktop and mobile devices
• Offline Capability: Local storage for activity history

Tech Stack

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• Backend: Python Flask
• Database: JSON file (simple file-based storage)
• Libraries: jsQR for QR code detection, Flask-CORS for API access

Quick Start

1. Install Python Dependencies

pip install -r requirements.txt

2. Run the Application

python app.py

3. Access the App

Open your browser and go to: http://localhost:5000

Test Codes

The app comes with pre-loaded test customers:

• CARD001 - John Smith (150 points)
• CARD002 - Sarah Johnson (75 points)
• CARD003 - Mike Brown (300 points)
• 12345 - Demo Customer (100 points)

How to Use

Scanning QR Codes

1. Click "Start Scanner" to activate your camera
2. Point the camera at a QR code containing a customer ID
3. The app will automatically detect and process the code
4. Customer information will be displayed

Manual Input

1. Type a customer ID in the "Enter card code manually" field
2. Click "Submit" or press Enter
3. The system will look up or create the customer

Adding Points

1. After scanning a customer card, their information will appear
2. Enter the number of points to add (1-1000)
3. Click "Add Points" to update their account

Activity History

• All scanning and point-adding activities are logged
• History is saved locally in your browser
• Shows the last 10 activities with timestamps

API Endpoints

The Flask backend provides these REST API endpoints:

• POST /api/process-scan - Process a scanned QR code
• POST /api/add-points - Add points to a customer
• GET /api/customers - Get all customers
• GET /api/customer/<id> - Get specific customer
• GET /api/stats - Get system statistics

File Structure

DevScanner05/
├── index.html          # Main HTML file
├── style.css           # Styling and responsive design
├── script.js           # Frontend JavaScript logic
├── app.py              # Flask backend server
├── requirements.txt    # Python dependencies
├── customers.json      # Customer database (created automatically)
└── README.md           # This file

Customization

Adding New Customers

Customers are automatically created when scanning new codes, or you can manually add them to customers.json:

{
  "NEWCARD": {
    "id": "NEWCARD",
    "name": "Customer Name",
    "email": "[email protected]",
    "phone": "+1-555-0000",
    "points": 0,
    "joinDate": "2024-07-27",
    "totalVisits": 1,
    "lastVisit": "2024-07-27"
  }
}

Styling Changes

Modify style.css to change colors, fonts, or layout. The design uses CSS Grid and Flexbox for responsive layouts.

Backend Modifications

Edit app.py to:

• Change the database to PostgreSQL, MySQL, etc.
• Add authentication and user management
• Implement more complex business logic
• Add email notifications or integrations

Camera Permissions

For QR code scanning to work:

1. Chrome/Safari: Allow camera access when prompted
2. Mobile: Ensure camera permissions are enabled for your browser
3. HTTPS: Camera access requires HTTPS in production (works on localhost for development)

Deployment

Local Network Access

To access from other devices on your network:

python app.py
# App will be available at http://YOUR_IP:5000

Production Deployment

For production deployment:

1. Use a proper database (PostgreSQL, MySQL)
2. Set up HTTPS (required for camera access)
3. Use a production WSGI server (Gunicorn, uWSGI)
4. Configure environment variables for sensitive data

Example with Gunicorn:

pip install gunicorn
gunicorn -w 4 -b 0.0.0.0:5000 app:app

Browser Compatibility

• Chrome: Full support
• Firefox: Full support
• Safari: Full support (iOS 11+)
• Edge: Full support

Troubleshooting

Camera Not Working

1. Check browser permissions
2. Ensure you're on HTTPS (production) or localhost (development)
3. Try refreshing the page
4. Use manual input as fallback

Server Not Starting

1. Check if Python and Flask are installed
2. Verify port 5000 is available
3. Check for error messages in terminal

Points Not Adding

1. Check browser console for errors
2. Ensure customer is selected first
3. Verify backend server is running

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

MIT License - feel free to use and modify for your projects.

Support

For issues or questions:

1. Check the troubleshooting section
2. Look at browser console for error messages
3. Create an issue on GitHub