Links
Overview
Users can add, edit, and delete transactions including a title, amount, note, and the client IP address. Updates propagate in real time to all connected clients through Socket.IO, while the full transaction history is persisted in a MySQL database.
Architecture
The application is a containerized Flask system deployed on AKS. The Flask app runs as a Kubernetes Deployment, while MySQL runs as a StatefulSet with a PersistentVolumeClaim for durable storage. The cluster uses NGINX Ingress to expose the app and cert-manager + Let's Encrypt to automate TLS certificates. Container images are stored in Azure Container Registry (ACR).
Frontend
Server-rendered HTML (Jinja2 templates) styled with Tailwind CSS and enhanced with JavaScript. The UI uses Socket.IO to receive and broadcast real-time updates and includes client-side validation and interactive modals.
Backend
A Flask backend provides server-side rendering and REST endpoints for transaction operations, plus Flask-SocketIO for real-time synchronization. Transaction data is stored in MySQL and total spending is computed via a dedicated endpoint.
Features
CRUD transaction management, real-time multi-client updates via Socket.IO, total expense calculation, client-side table search filter, IP-based transaction filtering, date sorting (ascending/descending), toast notifications for real-time action feedback, and new-row highlight animation.
Deployment
Deployed on Microsoft Azure using AKS and ACR. Kubernetes resources include a Deployment (Flask), StatefulSet + PVC (MySQL), Services, Secrets/ConfigMaps (env + init.sql), and NGINX Ingress with staging/production TLS manifests. The deployment workflow is automated with scripts that build/push images and apply manifests.
AI Processing
AI tools were used to help generate security patterns, understand Kubernetes/AKS concepts, and troubleshoot deployment issues.
Security
CSRF protection via Flask-WTF/CSRFProtect, server-side validation with WTForms, client-side input checks, basic input sanitization to reduce injection/XSS risks, and XSS mitigation through Jinja2 autoescaping. HTTPS is enabled via cert-manager and Let's Encrypt.
Testing
Manual testing focused on CRUD flows, real-time synchronization across clients, database persistence, and HTTPS ingress behavior.
Collaboration
Solo project (built end-to-end)
