Skip to content

Datathon ‐ Operations Site

Jump to bottom
Shreyas Rao edited this page Dec 15, 2024 · 15 revisions

The Operations Site is on the branch called datathon-ops and is used for the following services:

  • Collecting Participant responses from Google Forms (Registrations)
  • Verifying Participants at In-Person Events
  • Participant Tracking (Stage of Application, Event Attendance)
  • Access to QR Code Scanner for Volunteers

We will assume that you have already cloned the Website and switched to the datathon-ops branch

MongoDB Atlas

  1. Sign in to the DS3 Developers MongoDB Atlas using the DS3 Developer Google Account

  2. Check to see if the aws-ds3-datathon cluster is active, if it is not activated then activate it

  3. Go to the Sidebar to look for Database Access

  4. Select the User Name: netlify-datathon-admin and Click EDIT

  5. Click Edit Password

  6. Click Autogenerate Secure Password and save the <PASSWORD> to be used for Deployment

In-Person Event Configurations

If the Datathon is expected to have In-Person Events, you must create a new commit with changes to the variable called datathonServices. This variable creates a mapping between a date and a list of service labels. The exact location of this variable can be found here. For more details about how these objects generate services for the participant can be found here.

Environmental Variables

  1. Create a .env.staging file inside the root folder of the Website repository

    touch .env.staging

  2. Copy the below configuration for the .env.staging

    # Header Secret
VALIDATION_SECRET=''
NEXT_PUBLIC_VALIDATION_SECRET='insert-validation-secret'

# MongoDB Congifurations
MONGO_URI='mongodb+srv://netlify-datathon-admin:<PASSWORD>@aws-ds3-datathon.gjox5mc.mongodb.net/?retryWrites=true&w=majority&appName=aws-ds3-datathon'
MONGO_DB='prod'

# Next-Auth Configurations
NEXTAUTH_URL='https://datathon-ops.ds3utsc.com/'
NEXTAUTH_SECRET=''

  3. Generate VALIDATION_SECRET using the following command

    openssl rand -base64 32

  4. Use the value provided to VALIDATION_SECRET as the value for NEXT_PUBLIC_VALIDATION_SECRET

  5. Generate NEXTAUTH_SECRET using the following command

    openssl rand -base64 32

Deploy Site

  1. Log In to the Netlify using the devDS3 GitHub Account

  2. Click the Add new site Button

  3. Click the Import an existing project option from the dropdown

  4. Click the Deploy with GitHub button and authenticate

  5. Use the dropdown above to select theDS3 organization

  6. Select the Website Repository

  7. Change the Branch to deploy from main to datathon-ops

  8. Scroll down and click the Add environmental variables and add the above list of key-value pairs

  9. Add this environmental variable for Netlify only: NEXT_FORCE_EDGE_IMAGES=true

  10. Once all the above environmental variables have been added, click Deploy Website and monitor the Deploy log for any issues

  11. Once the site has been successfully deployed, go to the sidebar and click Domain Management

  12. Click Add Domain Button

  13. Update the site domain to datathon-ops.ds3utsc.com and then click Add subdomain

  14. Visit https://datathon-ops.ds3utsc.com/ to see if the site is accessible.

Testing Site

After deploying the site, some tests need to be done manually to see if the site is working as expected. We will do this by creating mock participants and volunteers and using them to log in and test the QR Code Scanner. You will notice that the requests will go to localhost:3000 instead of datathon-ops.ds3utsc.com, this is because these endpoints are not required on the production site and are only used to debug and test locally.

Ensure that you have the above .env.staging and to start the local server make use of the below.

pnpm staging

Generate Data

To Mock Participants, run the following command with the query params filled:

curl --location
  --request POST 'http://localhost:3000/api/participant/seed?numOfParticipants=<INT>&startDate=<YYYY-MM-DD>&endDate=<YYYY-MM-DD>&dayStep=<INT>' \
  --header 'ds3-secret: <VALIDATION_SECRET>'

Please save the above data, since it will include QR Codes which will be used for testing the QR Code Scanner.

To Mock Volunteers, run the following command with the query params filled:

curl --location
  --request POST 'http://localhost:3000/api/volunteer/seed?numOfVolunteers=<INT>' \
  --header 'ds3-secret: <VALIDATION_SECRET>'

Please save the above data, as it will contain mock logins to be used to test the Authentication and QR Code Scanner

For more information about how the data is generated check the respective files: Participant, Volunteer

Cases

You can now visit https://datathon-ops.ds3utsc.com/ to go through with the tests below

  1. Check if you can authenticate using one of the Mock Volunteer

  2. Check if the QR Scanner will turn on and turn off after approximately 10 seconds

  3. Check if the QR Code Scanner works by using one of the Mock Participants

  4. Check if the Mock Participant can be Checked In

  5. Check if the Mock Participant can have their service usage updated

  6. Check if the Mock Volunteer can Log out and Log back in later

Once the above testing is complete, remove all databases from MongoDB Atlas

Participant Emails

Edit Emails

We use react-email, to create the personalized emails sent to each participant. To make changes to the already existing templates follow the instructions below.

Folder Structure

Datathon-Emails/
├── components
│   └── common.tsx
├── emails
│   ├── hacker-package.tsx
│   └── participant-acceptance.tsx
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── readme.md
└── static
    └── datathon.png

Steps

  1. Create a new folder called Datathon-Emails.

    mkdir Datathon-Emails

  2. Install react-email and related packages

    pnpm add react-email @react-email/components -E

  3. Update the package.json with these scripts

    "scripts": {
  "email": "email dev --dir src/components/Emails",
  "export": "email export"
}

  4. Create a new folder called emails and move acceptance.tsx, hacker-package.tsx from Website/src/components/Emails/

  5. Create a new folder called components and move common.tsx from Website/src/components/Emails/

  6. Create a new folder called static and move the Email Banner Image

  7. Create a new file called pnpm-workspace.yaml

     packages:
  - '.react-email/**'

  8. Run pnpm dev to start a local server to see changes made to the templates

For more details, check out the official docs for manual setup

Email Sending

To send official emails to participants, we will make use of the thedatasciencecube@gmail.com email address. We will also require an App-Specific Password to send emails using the above address. There also needs to be a new Email Banner Image for the Datathon, for which talk to the Design Team about this.

Environmental Variables

The below environment variables are to be used when sending emails to participants, just add then to the .env.staging.

For the Email Banner, create a new commit to the datathon-ops to upload it to GitHub and update the Image URL below.

GMAIL_USER='thedatasciencecube@gmail.com'
GMAIL_PASSWORD='<app-specific-password>'
EMAIL_BANNER_IMAGE_URL='https://github.com/theDS3/Website/blob/datathon-ops/src/<folder-path>/email-banner.png?raw=true'

Steps

To send emails to participants with either Acceptance or Hacker Packages, follow the below steps

  1. Clone the Website repository and Select the datathon-ops branch

  2. Ensure that you have the above .env.staging and Email Specific Environmental Variables in the .env.staging

  3. Update the Templates for acceptance.tsx and hacker-package.tsx

  4. Generate a batch of emails to send

  5. Start the Local Server using the below command

    pnpm staging

  6. Run the following command with the batch of emails

     curl --location 'http://localhost:3000/api/participant/emails/{acceptance|hacker-package}' \
   --header 'Content-Type: application/json' \
   --data-raw '{"emails": ["<EMAIL_1>", "<EMAIL_2>", ..., "<EMAIL_N>"] }'

Register Volunteers

Once the Volunteer registration form has been closed, talk to the Events Team to gather the final list of volunteer emails and generate the volunteer logins. This will only work on the local server and not on the Netlify Servers.

Ensure that you have the above .env.staging and to start the local server make use of the below.

pnpm staging

Then run the following in a separate terminal

 curl --location 'http://localhost:3000/api/volunteer' \
  --header 'ds3-secret: <VALIDATION_SECRET>'
  --header 'Content-Type: application/json' \
  --data '{"emails": ["<EMAIL_1>", "<EMAIL_2>", ..., "<EMAIL_N>"] }'

Once you get a final response, send the emails and passwords to the Events Team who will send them to the volunteers

Cleanup

  1. Follow the instructions in Cleanup for Google Forms

  2. Follow the instructions in Cleanup for Main Site

  3. Remove all MongoDB Databases on Atlas related to aws-ds3-datathon

  4. Log In to the Netlify using the devDS3 GitHub Account

  5. Select from the Sites Card the site called datathon-ops.ds3utsc.com

  6. Select the Site Configuration Button

  7. Scroll down to the last card on the page, which should be titled Danger Zone

  8. Select Delete this site and provide the site name to Delete

  9. Delete the .env.staging

    rm .env.staging

Clone this wiki locally