stephtanner1/cpp-frontend repository overview

⁠Cents Per Point - Docker Images

⁠🐳 Available Images

This repository provides two Docker images for the complete Cents Per Point application:

• stephtanner1/cpp-frontend - React frontend with Vite and Tailwind CSS
• stephtanner1/cpp-backend - Node.js backend with Express and SQLite

⁠✨ Features

• 📊 Track Redemptions - Log point redemptions with dates, sources, values, and notes
• 🧮 Calculate CPP - Automatically calculate Cents Per Point for each redemption
• 📈 Compare Programs - Analyze performance across different credit card and loyalty programs
• 📉 Visualize Data - Interactive charts and analytics to understand redemption patterns
• 🎫 Travel Credit Support - Track both point redemptions and travel credit usage
• 🔒 Privacy First - All data stored locally, no external data transmission
• 📱 Responsive Design - Works on desktop, tablet, and mobile devices

⁠🚀 Quick Start

Get up and running in under 2 minutes:

# 1. Create a project directory
mkdir cents-per-point && cd cents-per-point

# 2. Download docker-compose.yml
curl -o docker-compose.yml https://raw.githubusercontent.com/stephtanner1/Cost%20Per%20Point/main/docker-compose.yml

# 3. Start the application
docker-compose up -d

# 4. Open your browser
open http://localhost:3000

⁠📦 Docker Compose Setup (Recommended)

Create a docker-compose.yml file:

version: '3.8'
services:
  backend:
    image: stephtanner1/cpp-backend:latest
    ports:
      - "5000:5000"
    volumes:
      - backend_data:/app/data
    restart: unless-stopped
    
  frontend:
    image: stephtanner1/cpp-frontend:latest
    ports:
      - "3000:3000"
    depends_on:
      - backend
    restart: unless-stopped

volumes:
  backend_data:

Then run:

docker-compose up -d

⁠🔧 Manual Docker Setup

⁠Backend Container

# Create a volume for data persistence
docker volume create cpp_data

# Run the backend
docker run -d \
  --name cpp-backend \
  -p 5000:5000 \
  -v cpp_data:/app/data \
  --restart unless-stopped \
  stephtanner1/cpp-backend:latest

⁠Frontend Container

# Run the frontend
docker run -d \
  --name cpp-frontend \
  -p 3000:3000 \
  --restart unless-stopped \
  stephtanner1/cpp-frontend:latest

⁠🌐 Access Points

After starting the containers:

• Frontend Application: http://localhost:3000⁠
• Backend API: http://localhost:5000⁠
• Health Check: http://localhost:5000/health⁠

⁠📋 System Requirements

• Docker: 20.10+ and Docker Compose 2.0+
• Memory: 2GB RAM minimum
• Storage: 1GB free disk space
• Ports: 3000 (frontend) and 5000 (backend)

⁠🏗️ Architecture

⁠Frontend (cpp-frontend)

• Base: Node.js 18 Alpine
• Framework: React 18.3.1 with Vite
• Styling: Tailwind CSS
• Charts: Recharts for data visualization
• Server: Nginx for production serving

⁠Backend (cpp-backend)

• Base: Node.js 18 Alpine
• Framework: Express.js
• Database: SQLite with file persistence
• API: RESTful endpoints for CRUD operations
• CORS: Enabled for frontend communication

⁠💾 Data Persistence

The backend container uses a Docker volume (backend_data) to persist your redemption data:

• Volume Mount: /app/data
• Database: SQLite file stored in the volume
• Backup: Volume can be backed up using Docker commands

⁠Backup Your Data

# Create a backup
docker run --rm -v cpp_data:/data -v $(pwd):/backup alpine tar czf /backup/cpp-backup.tar.gz -C /data .

# Restore from backup
docker run --rm -v cpp_data:/data -v $(pwd):/backup alpine tar xzf /backup/cpp-backup.tar.gz -C /data

⁠🔧 Configuration

⁠Environment Variables

The containers support the following environment variables:

⁠Backend

• PORT: Server port (default: 5000)
• NODE_ENV: Environment mode (default: production)

⁠Frontend

• VITE_API_URL: Backend API URL (default: http://localhost:5000⁠)

⁠Custom Configuration

services:
  backend:
    image: stephtanner1/cpp-backend:latest
    environment:
      - PORT=8080
      - NODE_ENV=production
    ports:
      - "8080:8080"
      
  frontend:
    image: stephtanner1/cpp-frontend:latest
    environment:
      - VITE_API_URL=http://localhost:8080

⁠🔍 Health Checks

Both containers include health checks:

# Check backend health
curl http://localhost:5000/health

# Check container status
docker-compose ps

⁠🛠️ Development

For development with live reloading, use the development images:

services:
  backend:
    image: stephtanner1/cpp-backend:dev
    volumes:
      - ./backend:/app
      - /app/node_modules
      
  frontend:
    image: stephtanner1/cpp-frontend:dev
    volumes:
      - ./frontend-vite:/app
      - /app/node_modules

⁠📚 API Documentation

The backend provides RESTful endpoints:

• GET /api/redemptions - List all redemptions
• POST /api/redemptions - Create new redemption
• PUT /api/redemptions/:id - Update redemption
• DELETE /api/redemptions/:id - Delete redemption
• GET /health - Health check endpoint

⁠🔒 Security

• No external data transmission - all data stays local
• SQLite database with file-based storage
• CORS configured for frontend-backend communication
• No authentication required (single-user application)

⁠🐛 Troubleshooting

⁠Common Issues

1. Port conflicts: Change ports in docker-compose.yml if 3000/5000 are in use
2. Data not persisting: Ensure volume is properly mounted
3. Frontend can't reach backend: Check VITE_API_URL environment variable

⁠Logs

# View logs
docker-compose logs -f

# View specific service logs
docker-compose logs -f backend
docker-compose logs -f frontend

⁠📖 Documentation

• GitHub Repository: https://github.com/stephtanner1/Cost%20Per%20Point⁠
• Issues & Support: https://github.com/stephtanner1/Cost%20Per%20Point/issues⁠
• Contributing: See CONTRIBUTING.md in the repository

⁠📄 License

MIT License - see the LICENSE⁠ file for details.

Made with ❤️ for the points and miles community

Track smarter, redeem better, maximize your rewards!