Aiden P — Render Deploy Guide

Project: Clash Royale Personality Quiz
Repo: final-project-pierai6-1
Goal: Put your Flask quiz online for Demo Day.

This guide is tailored to your current repo. Your app has app.py, quiz.py, data/cards.txt, data/questions.json, templates, static card images, and pyproject.toml. The current repo does not have uv.lock, so you will create it before deploying.

Before You Start

Make sure the app works locally:

uv sync
uv run flask --app app run --debug

Open the preview, take the quiz, and confirm the result page shows a Clash Royale card and image.

Step 1 — Add the Production Server

Render should run your Flask app with gunicorn.

uv add gunicorn

This updates pyproject.toml and creates or updates uv.lock. You need both files for Render.

Step 2 — Confirm Data and Images Are Committed

Your live app depends on these files:

data/cards.txt
data/questions.json
static/images/

Check Source Control. If any of those files appear under Changes, stage and commit them. Render can only serve files that have been pushed to GitHub.

Step 3 — Create render.yaml

Create a new file at the project root named render.yaml:

services:
  - type: web
    name: clash-quiz
    env: python
    plan: free
    buildCommand: uv sync --frozen && uv cache prune --ci
    startCommand: uv run gunicorn app:app
    autoDeploy: true

No API keys are needed for the current version of this app.

Step 4 — Commit and Push

In Source Control, stage and commit:

  • pyproject.toml
  • uv.lock
  • render.yaml
  • any changed files under data/, templates/, or static/images/

Use a message like:

add render deploy config

Then click Sync Changes.

Step 5 — Create the Render Service

  1. Go to render.com and sign in with GitHub.
  2. Click New + → Web Service.
  3. Connect final-project-pierai6-1.
  4. Confirm these settings:
    • Environment: Python
    • Build Command: uv sync --frozen && uv cache prune --ci
    • Start Command: uv run gunicorn app:app
    • Plan: Free
  5. Click Create Web Service.

Step 6 — Test the Live Site

When Render finishes, open the live URL and test the core flow:

  1. Start the quiz.
  2. Answer every question.
  3. Submit the form.
  4. Confirm the result card appears.
  5. Confirm the card image loads.

If the image is broken, check that the matching file exists under static/images/ and that the folder was committed.

Demo Day Notes

This app does not need a database or API key. The main demo risk is missing static image files, so test at least two quiz paths on the live site before presenting.