This repo holds the code for the Frontend of the "TKD Registration Project".
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
- 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
- example:
- Install required packages:
pip install -r requirements.txt
- 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")
- 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
- If using VSCode, there is a
This project uses Zappa for deployments.
- 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.
- If you are using a Python Virtual Env (recommended), be sure it's activated
- Run
zappa deploy <env_name> -s envs/<env_file_name>.yml
- Confirm site is running well.
- 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