DIRECT Framework Webapp

A Django webapp implementing the DIRECT competencies framework as a website that can:

• Allow browsing of all the skills.
• Allow people to score their own skills and view their skill wheels.
• Display and link the professional development resources curated for each skill.

This Django project uses:

• pip-tools for packaging and dependency management.
• pre-commit for various linting, formatting and static type checking. Pre-commit hooks are automatically kept updated with pre-commit.ci.
• pytest and GitHub Actions.

pip-tools is chosen as a lightweight dependency manager that adheres to the latest standards using pyproject.toml.

Related links

• DIRECT framework
• History of the project - including competency wheels UI
• Skills and competencies - definitions
• Contributors

Current Status

• Initial research
• Initial development <-- We are here
• Minimum viable product
• Alpha release
• Feature-complete release

Installation

To get started:

1. Create and activate a virtual environment:

   python -m venv .venv
   source .venv/bin/activate # with Powershell on Windows: `.venv\Scripts\Activate.ps1`

2. Install development requirements:

   pip install -r dev-requirements.txt

3. (Optionally) install tools for building documentation:

   pip install -r doc-requirements.txt

4. Install the git hooks:

   pre-commit install

5. Run the webapp:

   python manage.py runserver

   When running the webapp for the first time you may get a warning similar to:

   You have 19 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, main, sessions.

   If this is the case, stop your webapp (with CONTROL-C) and apply the migrations with:

   python manage.py migrate

   then restart it.

6. Run the tests:

   pytest

7. Create an admin account to access admin backend:

   python manage.py createsuperuser

8. To populate the db with Categories and Skills from a yaml or json version of the framework

   python -m scripts.populate_db [-j data.json]|[-y data.yaml]

Installation with Docker

The app can be run within a Docker container and a docker-compose.yml file is provided to make this easy for development.

Ensure you have Docker installed and simply run:

docker compose up

The app will be available at http://127.0.0.1:8000/

Updating Dependencies

To add or remove dependencies:

1. Edit the dependencies variables in the pyproject.toml file (aim to keep development tools separate from the project requirements).
2. Update the requirements files:
   • pip-compile for requirements.txt - the project requirements.
   • pip-compile --extra dev -o dev-requirements.txt for the development requirements.
   • pip-compile --extra doc -o doc-requirements.txt for the documentation tools.
3. Sync the files with your installation (install packages):
   • pip-sync *requirements.txt

To upgrade pinned versions, use the --upgrade flag with pip-compile.

Versions can be restricted from updating within the pyproject.toml using standard python package version specifiers, i.e. "black<23" or "pip-tools!=6.12.2"

Working with NPM

This project includes an NPM-based setup for managing front-end assets like styles, scripts, and other resources. The package.json file contains predefined scripts to help with building and managing assets. You don't need to run these NPM commands if you are developing the Django app locally. You should only run these commands when needed, for example if you are changing javascript dependencies or modifying SCSS files.

Prerequisites

Ensure you have Node.js (v16 or higher) and NPM installed. You can verify their installation with:

npm -v

Installing Dependencies

After cloning the repository, navigate to the project directory and install the required NPM dependencies:

npm install

Building all frontend assets

To build all styles, scripts, and vendor files, run:

npm run build

The above script performs all the following tasks, which are available as individual commands:

• Build Expanded Styles: npm run styles:expanded (builds expanded human-readable css files)
• Build Minified Styles: npm run styles:minified (builds minified css files, optimised for production)
• Build Expanded Scripts: npm run scripts:expanded (builds expanded human-readable javascript files)
• Build Minified Scripts: npm run scripts:minified (builds minified javascript files, optimised for production)
• Build Vendor Files: npm run vendor (bundles and optimises third-party libraries)

npm run styles:expanded

Contributors

Dave Horsfall 🎨 💻 📆	Adrian D'Alessandro 🎨 💻 ⚠️	Ryan 💻 🚇 🔧	T D James 💻 ⚠️	Connor Aird 💻 ⚠️	Andrew Gait 🤔	Bryn Noel Ubald 🔧
Jason Klebes 🐛	sbland 💻 🎨 🤔