Build a loyalty card usage tracker

To build a Loyalty Card Usage Tracker, you need a simple system that allows users to collect points, view their progress, and redeem rewards. Here’s a complete implementation plan with front-end and back-end logic in mind. We’ll use a basic stack: HTML/CSS/JavaScript (React) for the front-end and Node.js with Express and a MongoDB database for the back-end.

💡 Features of the Loyalty Card Tracker

• User Registration & Login

• Loyalty card creation

• Point accumulation logic

• Progress tracker (e.g., 5 of 10 stamps filled)

• Redemption and reset function

• Admin dashboard to view and update usage

🛠️ Tech Stack

• Frontend: React, Tailwind CSS

• Backend: Node.js, Express

• Database: MongoDB (Mongoose)

📦 Backend (Node.js + Express)

models/User.js

javascript
CopyEdit
const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: String,
  email: { type: String, unique: true },
  password: String,
  loyaltyCard: {
    points: { type: Number, default: 0 },
    lastUsed: Date
  }
});

module.exports = mongoose.model('User', userSchema);

routes/loyalty.js

javascript
CopyEdit
const express = require('express');
const router = express.Router();
const User = require('../models/User');

// Add points to loyalty card
router.post('/add-points', async (req, res) => {
  const { email, points } = req.body;
  const user = await User.findOne({ email });

  if (!user) return res.status(404).send("User not found");

  user.loyaltyCard.points += points;
  user.loyaltyCard.lastUsed = new Date();
  await user.save();

  res.send({ points: user.loyaltyCard.points });
});

// Redeem points
router.post('/redeem', async (req, res) => {
  const { email } = req.body;
  const user = await User.findOne({ email });

  if (!user || user.loyaltyCard.points < 10) {
    return res.status(400).send("Not enough points to redeem");
  }

  user.loyaltyCard.points = 0;
  await user.save();

  res.send("Points redeemed and card reset");
});

module.exports = router;

🎨 Frontend (React + Tailwind CSS)

Components Structure

markdown
CopyEdit
- App.jsx
- components/
  - LoyaltyCard.jsx
  - RedeemButton.jsx
  - PointAdder.jsx

LoyaltyCard.jsx

jsx
CopyEdit
import React, { useState, useEffect } from 'react';
import axios from 'axios';

const LoyaltyCard = ({ email }) => {
  const [points, setPoints] = useState(0);

  useEffect(() => {
    axios.post('/api/loyalty/get-points', { email })
      .then(res => setPoints(res.data.points));
  }, [email]);

  return (
    <div className="p-4 bg-white rounded shadow-lg">
      <h2 className="text-lg font-semibold mb-2">Loyalty Card</h2>
      <div className="grid grid-cols-5 gap-2">
        {[...Array(10)].map((_, i) => (
          <div key={i} className={`w-6 h-6 rounded-full ${i < points ? 'bg-green-500' : 'bg-gray-200'}`}></div>
        ))}
      </div>
      <p className="mt-2 text-sm text-gray-600">{points} / 10 points</p>
    </div>
  );
};

export default LoyaltyCard;

RedeemButton.jsx

jsx
CopyEdit
import React from 'react';
import axios from 'axios';

const RedeemButton = ({ email, refresh }) => {
  const redeemPoints = async () => {
    try {
      await axios.post('/api/loyalty/redeem', { email });
      alert("Points redeemed!");
      refresh();
    } catch (err) {
      alert("Not enough points to redeem.");
    }
  };

  return (
    <button 
      className="mt-4 bg-blue-500 text-white py-2 px-4 rounded"
      onClick={redeemPoints}
    >
      Redeem Reward
    </button>
  );
};

export default RedeemButton;

PointAdder.jsx

jsx
CopyEdit
import React from 'react';
import axios from 'axios';

const PointAdder = ({ email, refresh }) => {
  const addPoint = async () => {
    await axios.post('/api/loyalty/add-points', { email, points: 1 });
    refresh();
  };

  return (
    <button 
      className="mt-4 bg-green-500 text-white py-2 px-4 rounded"
      onClick={addPoint}
    >
      Add Point
    </button>
  );
};

export default PointAdder;

🧠 How It Works

1. User Login/Register: Tracks loyalty points linked to their account.

2. Point Accumulation: Customer gets 1 point per transaction (customizable).

3. Visual Tracker: Shows 10 slots (or stamps). Colored to indicate progress.

4. Redeem Logic: After 10 points, user can redeem and resets the counter.

5. Security: Uses basic Express sessions or JWT for authentication.

✅ Optional Enhancements

• QR Code Scan: Add points via QR codes on purchase.

• Mobile App: Wrap it in React Native for mobile tracking.

• Admin Panel: Track all users’ points and redemptions.

• Reward History: Track usage and redemptions over time.

🔐 Security & Validation

• Input validation on backend

• Basic rate limiting on endpoints

• Use bcrypt for password hashing

• Use HTTPS in production

With this system, businesses can easily track and manage loyalty rewards digitally, encouraging customer retention and increasing repeat visits.