TKD Registration - Frontend

This repo holds the code for the Frontend of the "TKD Registration Project".

Overall Architecture

graph TB
    User((User))
    Admin((Admin))

    subgraph "Main System"
        subgraph "Frontend (This Repo)"
            FrontendApp["Frontend App<br/>(Flask)"]
            
            subgraph "Frontend Components"
                Router["Router"]
                UIComponents["UI Components"]
                Forms["Forms Handler"]
                APIIntegration["API Integration"]
            end
        end
        
        subgraph "Backend Services"
            ProcessEntries["Process Entries<br/>(Python)"]
            GenerateBadges["Generate Badges<br/>(Python)"]
            SyncAWSGDrive["Sync AWS-GDrive<br/>(Python)"]
        end
        
        subgraph "Data Storage"
            DynamoDB[("DynamoDB")]
            S3[("S3 Buckets")]
        end
        
        subgraph "Communication Services"
            SQS["SQS"]
            EmailService["Email Service"]
        end
    end
    
    subgraph "External Services"
        Stripe["Stripe API"]
        GoogleDrive["Google Drive API"]
        Challonge["Challonge API"]
    end
    
    User --> FrontendApp
    Admin --> FrontendApp
    
    FrontendApp --> Router
    Router --> UIComponents
    UIComponents --> Forms
    Forms --> APIIntegration
    
    APIIntegration --> ProcessEntries
    ProcessEntries --> GenerateBadges
    ProcessEntries --> SyncAWSGDrive
    
    ProcessEntries --> DynamoDB
    ProcessEntries --> S3
    GenerateBadges --> S3
    SyncAWSGDrive --> S3
    
    ProcessEntries --> SQS
    SQS --> ProcessEntries
    ProcessEntries --> EmailService
    
    ProcessEntries --> Stripe
    SyncAWSGDrive --> GoogleDrive
    GenerateBadges --> Challonge
    
    classDef frontend fill:#1168bd,stroke:#0b4884,color:#ffffff
    classDef frontendComponent fill:#4682b4,stroke:#315b7e,color:#ffffff
    classDef backend fill:#2694ab,stroke:#1a6d7d,color:#ffffff
    classDef database fill:#2b78e4,stroke:#1a4d91,color:#ffffff
    classDef external fill:#999999,stroke:#666666,color:#ffffff
    
    class FrontendApp frontend
    class Router,UIComponents,Forms,APIIntegration frontendComponent
    class ProcessEntries,GenerateBadges,SyncAWSGDrive backend
    class DynamoDB,S3 database
    class Stripe,GoogleDrive,Challonge external

Loading

Dependencies

• Setup Stripe Account
• Deploy base infrastructure using the tkd-registration Terraform Module. This must be done first.
• Deploy the Backend. This can be done before or after.
• Python 3.11
• Optional but recommended: Use a Virtual Env
  • example:

    python -m venv --upgrade-deps .venv

    source .venv/bin/activate

• Install required packages: pip install -r requirements.txt

Local Development

1. Create a 'frontend.env' file with the necessary environment variables
   • AWS_DEFAULT_REGION - Default AWS region
   • AWS_PROFILE - AWS Profile to use from your local .aws/config file
   • COMPETITION_NAME - Name to use for the competition
   • COMPETITION_YEAR - Year of the competition
   • EARLY_REG_DATE - When the 'Early Regestration' discount ends (11:59:59 PM on this date)
   • REG_CLOSE_DATE - When to close registstrations (11:59:59 PM on this date)
   • CONFIG_BUCKET - S3 Bucket name that contains the config files (generated by Terraform)
   • CONTACT_EMAIL - Email to use as a Contact
   • DB_TABLE - DynamoDB Table generated by Terraform
   • MAPS_API_KEY - API Key for Google Maps API (details here)
   • PROFILE_PIC_BUCKET - S3 Bucket name for holding profile pics (generated by Terraform)
   • PUBLIC_MEDIA_BUCKET - S3 Bucket name for holding public media (generated by Terraform)
   • REG_URL - URL for the Registration Site
   • SQS_QUEUE_URL - SQS Queue URL for 'processing' (generated by Terraform)
   • STRIPE_API_KEY - API Key for accessing Stripe (located here)
   • VISITOR_INFO_URL - URL to use for the 'visitor info' button (suggested: Official travel site for CITY)
   • VISITOR_INFO_TEXT - Text to use for the 'visitor info' button (suggested: "Things to do in CITY")
2. Run Local Server
   • If using VSCode, there is a launch.json file already in place so you can use the debugger
   • Otherwise, you can run:

     set -a && source frontend.env && set +a

     flask --app app --debug run

Deploying

This project uses Zappa for deployments.

1. Ensure there is a yml file in the envs folder for the environment you want to deploy
   • If there isn't one, you can use an existing yaml file as a template to create a new one.
2. If you are using a Python Virtual Env (recommended), be sure it's activated
3. Run zappa deploy <env_name> -s envs/<env_file_name>.yml
4. Confirm site is running well.
5. Optional, if using a custom domain, ensure the Cert is ready then run zappa certify <env> -s envs/<env_file_name>.yml

Subsequent updates to the site can be made with zappa update <env_name> -s envs/<env_file_name>.yml