T13 Activity Web

Website to help organizations & clubs coordinate activities amongst their members, especially my local kart club.

Master: Dev: Release:

Developed by Marcus Sonestedt under the Affero GPL license.

Data model

• EventTypes - race day, training week, track work day or club barbecues
• Events - a specific race or similar time-bound event of some type
• ActivityType - a role that has to be filled during an event, flag marshal, pre-grid controller or technical scrutineer for races, carpenter or painter for work days or grill-meister and sauce-master for barbecues.
• Activity - a specific activity of given type for an event, which can be assigned to a user
• Member - person able to perform an Activity, possible linked to a web site User
• ActivityDelistRequest - request by member to be de-listed from an activity, must be approved/rejected by staff to have an effect, unless someone else books that activity

Development

• Any OS should work, although it has been developed on Windows with the goal to support running on Linux in production.
• Visual Studio Code is an free and excellent editor.
• Visual Studio Community/Professional is also usable.

Architecture Overview

This project was set-up with inspiration from this blog but using Typescript instead of Javascript for the React frontend for type safety.

Currently, the React-based frontend is served via the Django web server but it could be moved to a fast, static website/CDN in the future.

The end-user part of the front-end is written in React to work as a single-page web application, putting most of the work on the client and leaving the server with only delivering data and answering terse api-calls.

For administrators, a classic render-html-on-server approach via the regular Django framework is used, mostly because we want to use Django's great autogenerated admin-site to enter and adjust the backing data

Backend

Uses Django & Django REST Framework.

By default, uses the SQLite db during development, which runs in-process against a single file.

• Install Python 3.7 or later

• Create a virtual python environment and activate it

  • On Windows:

    python -m venv env  
    env/scripts/activate.bat
    

    python -m venv env  
    env/scripts/activate.ps1
    

  • On Linux:

    virtualenv env
    source env/scripts/activate

• Install required packages (into the virtual environment)
  This must be done whenever requirements.txt is updated)

python -m pip install -r requirements.txt

• Collect static files

'''bash python manage.py collectstatic

• Initialize database with create schema (via migrations), load some sample data and create a super user so you can log in:

python manage.py migrate
python manage.py loaddata fixtures/2020_testdata.json --format=json
python manage.py createsuperuser

• Start development server

Insecure to run locally and serve static file.

Copy secrets_example.py to secrets.py (defaults with DEBUG=True)-

python manage.py runserver --insecure

FrontEnd

Uses React, TypeScript and Bootstrap.

• Install Node.js v16 (v18 or later does not work yet)

• Go into frontend dir

  cd frontend

• Install packages:
  This must be done whenever frontend/packages.json is updated.

  npm install

• Start development server

  npm run start

Setup running in production

• Perform steps for backend & frontend above except starting servers

• In repo root, run the build.py script:

  python ./build.py

  This builds the frontend and copies static files to where Django expects them.

• Setup the Django site as a WSGI app on your web host:

  import os
  import sys
  
  # assuming your django settings file is at '/home/macke/t13activityweb/T13ActivityWeb/settings.py'
  # and your manage.py is is at '/home/macke/t13activityweb/manage.py'
  path = '/home/macke/t13activityweb'
  if path not in sys.path:
      sys.path.append(path)
  
  os.environ['DJANGO_SETTINGS_MODULE'] = 'T13ActivityWeb.settings'
  
  # then:
  from django.core.wsgi import get_wsgi_application
  application = get_wsgi_application()

• Start your server!

Tweak stuff via SQL! (danger)

Set tasks' earliest bookable date 1 month before event occurs, for events at a certain date or later

(This is different for every SQL DB apparently, see this Stack Overflow question

Code below is for SQLite (run sqlite3 in prompt, or google for a GUI)

update app_activity
set earliest_bookable_date = (
  select date(e.start_date, "-1 months") 
  from app_event e 
  where e.id = event_id
)
where ROWID in (
  select a.ROWID from app_activity a
  left join app_event e on a.event_id = e.id
  where e.start_date >= '2024-07-01' 
);

Update individual packages

Frontend/NPM

Check outdated packages

npm outdated

Then update (save/save-dev depending if used during runtime or not)

npm install <package>@latest --save[-dev]

Backend/PIP

List outdated packages:

python -m pip list --outdated

Update via pipupgrade, or any another method recommended here.

python -m pip install pipupgrade
python -m pipupgrade --latest --yes

Third-party services

API-Keys, passwords, email-addresses and other things that interact with the world outside this web application is stored in secrets.py.

See secrets_example.py for the format and current keys.

The app should work fine without this file or with a subset of keys, please report a bug if your experience is different.

ReCaptcha v3

Purpose:

• Verify that users registering and/or logging in are humans

Setup:

• Get the two keys from Admin Console.
• Add these to secrets.py

Usage:

• Website uses the django-recaptcha library to integrate into login/register forms.
  The forms have a ReCaptcha field and the require

Twilio

Purpose:

• send/receive SMS.
• verifying phone numbers (via SMS)

Setup:

• Create phone number (for SMS source) and get api keys from their Admin Console.

• Create a messaging service and configure webhook to point to our server's 'api/sms' view to receive SMS.

Usage:

• Web site uses Twilio's python library to send SMS and verify phone numbers.

Sendgrid (by Twilio)

Purpose:

• Send lots of emails.

Setup:

• Get API key from Admin Console.

Usage:

• Web site uses Sendgrid's SMTP relay to use Django's existing email code easily.