MMA Almanac UI
The consumer web app for MMA Almanac — fight predictions, model-accuracy tracking, AI-generated articles, and Stripe-gated premium features.
About this project
What it is
The public-facing Next.js application for the MMA Almanac platform. It consumes the prediction API and PostgreSQL data to display upcoming-fight predictions, track historical model accuracy, and serve OpenAI-generated fight-preview articles. Authentication is handled by NextAuth with OAuth providers and a linked-account system. Premium fight predictions sit behind a Stripe-gated paywall, with blurred placeholder cards shown to free users. GDPR compliance is built in — users can request account deletion via a multi-step flow with a time-delayed Lambda job that executes it. Custom D3-style visualizations (dual-bar comparison charts, performance timelines, heatmaps) show fighter stat comparisons directly on the predictions detail page.
Engineering highlights
- NextAuth authentication with OAuth providers, linked-accounts API, and session management
- Stripe-gated premium predictions — blurred placeholder cards with upgrade prompt for free tier
- GDPR data-deletion flow: user-initiated request → Lambda executes deletion after cooling-off period
- Custom fighter-stat visualizations: dual-bar comparison charts, performance timelines, win-method heatmaps
- Model-accuracy tracking page with historical prediction vs. outcome comparisons
- AI-generated fight-preview articles with sanitized HTML rendering and a read-tracker
- Deployed as a Docker container on AWS ECS Fargate behind an ALB
Stack
Part of the MMA Almanac system
This repo is one service in the four-part MMA Almanac platform. The system diagram below shows how the scrapers, ML engine, web UI, and AWS infrastructure fit together.