Meeplia

Inspiration

Meeplia was inspired by the desire to make classic board games instantly playable on the web with a clean experience and a flexible backend for future AI integrations and new game generation. We wanted a deployment model that is fast, globally accessible, and simple to maintain.

What We Built

• A production-ready Django backend that serves game logic and templates.
• A Cloudflare Pages frontend that proxies all routes to the backend, providing global edge delivery and straightforward routing.
• Playable web games such as Othello and Doubutsu Shogi with a focused gameplay view.
• A unified, English-first UI with simplified navigation.

How We Built It

• Backend stack: Django, Gunicorn, WhiteNoise, environment-driven settings, and optional Postgres via a connection URL.
• Infrastructure: Render for the Django app and Cloudflare Pages for the edge layer with a catch‑all Function for proxying.
• Security and production hardening: allowed hosts, trusted CSRF origins, secure proxy headers, and static files via collectstatic.
• Routing: a single catch‑all function at the edge, eliminating CORS complexity by keeping everything on a single origin path.

Architecture Overview

The browser connects to Cloudflare Pages, which invokes a Pages Function that forwards requests to the Django backend. Django serves both HTML templates and static content, with the option to use a managed database. This pattern keeps the frontend globally fast while centralizing state and logic in the backend.

Challenges

• Redirect loops at the edge when mixing host and protocol assumptions. We fixed this by standardizing forwarded headers and rewriting redirect locations to the Pages origin.
• Static asset paths and branding inconsistencies. We unified static references, simplified the navigation, and ensured the logo and fonts render reliably.
• Template duplication for multiple variants of the same game. We deduplicated entries to show each template game just once.

What We Learned

• Cloudflare Pages Functions are well suited for reverse-proxy patterns, enabling edge acceleration without rebuilding the app.
• Django behind a proxy requires careful header handling and explicit production settings to avoid subtle issues in redirects and CSRF.
• Small UX adjustments, like consistent labels and a distraction‑free gameplay screen, meaningfully improve perceived quality.

Results

• Globally fast page loads with a minimal and maintainable stack.
• A frictionless gameplay view that hides global navigation during play and offers a clear “Back to Home” action.
• A simple, reliable deployment pipeline: push to GitHub, auto deploy, and go live.

Next Steps

• Add multiplayer and persistent sessions or rooms.
• Expand the game catalog and integrate a generation pipeline for new titles.
• Improve observability with structured logs, metrics, and synthetic checks at the edge.
• Optionally add a custom domain, analytics, and lightweight experiments to iterate on the UI.

Tech Stack

• Backend: Django, Gunicorn, WhiteNoise
• Edge and frontend: Cloudflare Pages with Functions
• Hosting: Render for the backend, Cloudflare for the edge layer
• Database: Postgres when needed via a standard connection URL

Built With

• cloudflare
• css
• django
• gemini
• html
• javascript
• python
• render