What it is
RocaTeamUp helps organizers run amateur futsal. Leagues and seasons, match scheduling, attendance and reservations (a fixed number of slots per match), an open-match board where players find games and request to join, player profiles with photos and team crests, and rankings — goals, MVPs, cards, team standings. It runs in production at rocateamup.com, backed by its own API at api.rocateamup.com.
Architecture
The backend is FastAPI + SQLAlchemy over MySQL, organized in routers → services → models so business rules live in one layer, not in the HTTP handlers. The frontend is React 19 + TypeScript, with the data access hidden behind an IDataService interface and an ApiDataService implementation — so components depend on the contract, not on fetch. That seam is what let me swap mock and live data, and test the UI without a server.
Security by default
OWASP isn’t a checklist bolted on at the end. Queries go through SQLAlchemy parameters, never string concatenation (A03). User content in outgoing emails is passed through html.escape before it ever reaches a template. Dependencies are scanned with Trivy and the code with Semgrep (SAST) in CI, so a risky pattern fails the pipeline instead of reaching production.
Internationalization at scale
RocaTeamUp ships in 11 languages, including Arabic with full right-to-left layout. Language is detected from the browser and can be overridden, persisted, and reflected on <html lang> and <html dir> so the whole document flips direction — not just the text. Regional variants map to their own flags. Real i18n, designed in from the start.
SEO & performance
Public routes are prerendered to static HTML so crawlers and first paint get real content, not an empty SPA shell. Player photos are resized and converted to WebP on the client (Canvas) before upload, capping payloads without a server round-trip.
Quality & CI
The React app has a real test suite (Vitest) with deliberate mocking patterns, and both repos run their security scans in CI. The point isn’t coverage for its own sake — it’s being able to change things fast without breaking a product that people use.
Built with AI, directed by me
FastAPI and React are outside my day-to-day (enterprise Java). I used AI as leverage to move fast across the whole stack — but the architecture, the security decisions, and every trade-off were mine to make and defend. That’s the difference between shipping with AI and just prompting it.