Welcome to the Mentorpunten repository. This repository includes the application that can be used to set up an online scavenger hunt. The application can be used to create Tournaments and Teams of Users for these Tournaments. Challenges can be created for each Tournament. The Challenges can be solved by the Teams by uploading a photo after which an administrator needs to approve (or decline) a Submission for a Challenge. If a Submission is approved, the Challenge is closed for that Team and points are awarded.
This project is built using both Django (for the backend) and VueJS (for the frontend). Both need to be set up (and connected) for development to work.
pip3
is not installed on your system, execute apt install python3-pip
to install it.python3-dev
is installed on your system, execute apt install python3-dev
.poetry
is added
to PATH
before continuing.backend
directory.poetry install
to install the backend dependencies.poetry shell
to start a shell with the dependencies loaded. This command needs to be run every time you open
a new shell and want to run the development server.website
directory../manage.py migrate
to initialize the database and load all migrations../manage.py createsuperuser
to create an administrator user../manage.py runserver
to start the development server locally.Now your backend server is setup and running on localhost:8000
. The administrator interface can be accessed by going
to localhost:8000/admin
.
frontend
directory.npm install
to install the required packages.npm run dev
to run the development server.Now that both the frontend and the backend server are up and running, we need to supply the frontend with credentials such that it can connect to the backend service.
localhost:8000/admin
and logging in with your
administrator account.Django OAuth Toolkit
, add an Application
..env
file in the frontend
folder of the repository. The .env
file should have the following content:
VITE_API_BASE_URI=http://localhost:8000
VITE_API_AUTHORIZATION_ENDPOINT=/oauth/authorize/
VITE_API_ACCESS_TOKEN_ENDPOINT=/oauth/token/
VITE_API_OAUTH_CLIENT_ID=[Client ID you copied over]
VITE_API_OAUTH_CLIENT_SECRET=[Client Secret you copied over]
VITE_API_OAUTH_REDIRECT_URI=http://localhost:5173/auth/callback
VITE_API_LOGOUT_URL=/users/logout
VITE_DEBUG=true
npm run dev
) and you are good to go!This project can be deployed by using Docker. For deployment you can follow the following steps. These steps assume that you have a working server that runs Ubuntu which faces the Internet and a domain name pointing to the IP address of the server.
loginctl enable-linger ubuntu
to enable the background services for the ubuntu
user (such that the
container do not stop when you log out of the server).sudo nano /etc/sysctl.conf
and add the following line: net.ipv4.ip_unprivileged_port_start=80
. This enables
privileged ports for the ubuntu
user.deployment
directory of this repository to a different location.deployment
directory, create the following directory structure:
data
| - backend
| | - log
|
| - database
| | - data
|
| - shared
| | - static
| | - media
|
| - reverse-proxy
| | - conf.d
repository
folder in the deployment
directory. Clone this repository inside the
repository
folder (so the repository should be in repository/mentorpunten
).docker-compose.yml.example
to docker-compose.yml
. Fill the following environment
variables:
docker compose build
to build both the containers.docker compose pull
to pull the nginx
and postgres
container.docker compose up -d
to start the Docker containers.docker exec -it mentorpunten-backend /bin/bash
to start a shell in the backend container.website
directory inside the container by running cd website
../manage.py collectstatic
and ./manage.py createsuperuser
to collect static files and
create the first administrator user. Exit the shell by running exit
.http://[Your domain]/admin-login
and the login credentials of the previous step.docker compose down
to stop the containers from running.docker-compose.yml
file and enter the following variables:
docker compose up -d
to start the containers again, the website should now be in working condition.certbot
container to the
docker-compose.yml
file and enabling port 443 on the reverse-proxy
container. Also make sure to edit the
nginx config in data/reverse-proxy/conf.d
.This section will explain some of the development steps that you have to take or were taken during development of the application.
Normally, environment variables are included during build and can not be changed afterwards. This is a problem when
building a docker container which can be applied to different scenarios (e.g. with different API servers). Because of
this fact, environment variables can be either included during build with a .env
file in the root directory or with
docker environment variables. Using docker environment variables will overwrite the environment variables included
during build.
Environment variables that are available and should be overwritable by docker environment variables later should be
included in the docker.blueprint.env
file. Note that this file must use '
for indicating strings and the format
is as follows:
'[NAME_OF_VARIABLE_IN_VUE]': '${NAME_OF_ENV_VARIABLE}'
Before starting the nginx
process, the docker environment variables will be set under the window.__env__
variable
in the index.html
file.
To use environment variables that can be set during runtime (with docker environment variables), add the variable to
the docker.blueprint.env
file as explained above. Then use the getEnvVar
function in
src/common/general.service.ts
for getting the value of an environment variable. This function will first check
whether it is set in the window.__env__
variable and will then look if it is an environment variable.