Skip to content

CLAUDE.md

Latest commit

 

History

History
115 lines (87 loc) · 4.81 KB

CLAUDE.md

File metadata and controls

115 lines (87 loc) · 4.81 KB

devopsdays-web-app

What is this?

A Django + Vue 3 web application replacing the Hugo static site for devopsdays.org. City organizers manage their event pages through a browser-based UI instead of git/YAML/PRs.

Live POC: https://beta.devopsdays.org Full PRD: See PRD.md in this repo for the complete spec.

Architecture

  • Backend: Django 5.x, PostgreSQL 16, Redis
  • Public site: Django templates + Tailwind CSS (server-rendered via CDN for now)
  • Editing UI: Inertia.js + Vue 3 (SPA experience, Django handles routing and auth)
  • Admin: Django admin with django-unfold theme (for core team)
  • Auth: django-allauth with GitHub OAuth
  • Branding: devopsdays blue #0082AB, Roboto font, brain logo

Key Conventions

  • Django apps live in apps/ (events, sponsors, people, users, pages)
  • Public site templates are in templates/public/ — plain Django templates, no JS framework
  • Vue components for the editing UI are in frontend/src/pages/ — these are Inertia pages
  • Manage views return inertia_render() instead of render() — they pass props to Vue components
  • URL patterns: public site at /, editing UI at /manage/, admin at /admin/
  • All models use BigAutoField as the primary key
  • Slugs are the primary human-readable identifiers (event slugs are YYYY-city)
  • Inertia form saves use POST with a 303 redirect response (not PUT)
  • CSRF token is read from cookie via axios in frontend/src/main.js

Running Locally

cp env.template .env
docker compose up
docker compose exec web python manage.py migrate
docker compose exec web python manage.py shell < scripts/seed_data.py

Local URLs:

The seed script reads real event data from the Hugo repo at ../devopsdays-web.

Deployment

CI/CD: Push to main triggers GitHub Actions which builds the Docker image, pushes to GHCR (ghcr.io/devopsdays/devopsdays-web-app), then SSHs to the EC2 instance to pull and restart.

Infrastructure:

  • EC2 instance at 3.227.45.155 (elastic IP)
  • Provisioned via Pulumi (deploy/pulumi/)
  • SSH: ssh -i ~/.ssh/devopsdays-web-app.pem ec2-user@3.227.45.155
  • App lives at /opt/devopsdays-web-app/ on the server
  • SSL via Let's Encrypt (certbot), DNS on Cloudflare (grey-clouded for direct access)

Production compose: docker-compose.prod.yml (on the server, NOT the dev compose)

  • Pulls image from GHCR (no source code on server)
  • Runs collectstatic + migrate at startup
  • Nginx reverse proxy with SSL termination
  • Certbot for auto-renewal

GitHub Actions secrets (on devopsdays/devopsdays-web-app):

  • EC2_HOST — the elastic IP
  • EC2_SSH_KEY — contents of the SSH private key

If you need to update docker-compose.prod.yml or nginx config on the server: The CI/CD only updates the Docker image, not the compose file or nginx configs. To update those, scp the files to the server manually. The deploy script (deploy/deploy.sh -k ~/.ssh/devopsdays-web-app.pem ec2-user@3.227.45.155 beta.devopsdays.org) handles first-time setup.

Data Model

Core entities: City, Event, EventPage, TeamMember, ProgramEntry, Sponsor, SponsorLevel, EventSponsor, Speaker, Talk, User, EventPermission, BlogPost, StaticPage.

See apps/*/models.py for full field definitions. The PRD has the complete data model documentation with entity relationship diagrams.

What's Implemented (POC)

  • Public homepage with upcoming/recent events
  • Public event detail page with sponsors, team members, nav
  • Public event listing with year filter
  • Django admin with unfold theme and organized sidebar
  • GitHub OAuth login
  • Organizer dashboard (Vue) showing all events
  • Event settings editor (Vue) — description, dates, location, CFP, registration, social links
  • Team/Pages/Sponsors tabs (read-only display)
  • Seed script importing real data from the Hugo repo

What's NOT Implemented Yet

  • Speaker & talk management UI
  • Program/schedule builder (drag-and-drop)
  • Content page editing (TipTap rich text editor)
  • Team member add/edit/reorder in the editing UI
  • Sponsor management in the editing UI (add from directory, set levels)
  • Event creation flow (core team)
  • User/permission management (core team)
  • Pretalx/Pretix integration
  • Static archives for pre-2020 events
  • Full data migration from Hugo repo (seed script only does a few events)

Testing

docker compose exec web python -m pytest

Important Notes

  • This is a POC, not production-ready
  • Tailwind is loaded via CDN in public templates — production should use Vite build
  • The Hugo site repo lives at ../devopsdays-web (sibling directory)
  • The static/img/devopsdays-brain.png logo came from the Hugo theme