TSRS Crypt Hunt Web App

This is the Django + TailwindCSS web app for the TSRS Crypt Hunt.

Attributions

• Ritwic Verma worked on multiple components of the project; including development support for Windows, the frontend for the login page, and the answer submission flow.

• The final logo for the event was designed by the Editorial Board of TSRS Moulsari.

Development Guide

Running the web app

Make sure you have the following installed:

• Python
• NodeJS
• Pipenv (for Python dependency management)

Then, follow these steps:

1. Clone the repository

2. Create a .env file, and add the following to it:

   DEBUG=True
   IS_ONLINE_MODE=False

3. Run echo "SECRET_KEY=$(openssl rand -base64 32)" >> .env

4. Run pipenv shell to active your pipenv virtual environment

5. Run pipenv install to install the Python dependencies

6. Run python manage.py runserver to run the server

If you want to make changes to the frontend tailwind classes:

1. python manage.py tailwind install to install the tailwind NPM dependencies into the right structure in the project
2. If on Windows, set NPM_BIN_PATH in tsrs_crypt_hunt/settings.py to the default npm.cmd install location (Usually C:\Program Files\nodejs\npm.cmd ).
3. python manage.py tailwind start to start the tailwind watcher

To work with the database:

1. python manage.py migrate * run this the first time you set up the project. This creates SQL tables based on the migrations defined by the app.
2. python manage.py createsuperuser * run this to create a superuser account. This is the account you will use to log into the Django admin panel at localhost:8000/admin.
3. python manage.py makemigrations* run this command to create a new migration file. This is necessary if you make any changes to the database models. After whenever you run this, run python manage.py migrate to apply the changes to the database.

Deployment

This is designed for a Heroku deployment, but can be deployed anywhere that supports Python and NodeJS.

For Heroku:

• Create a Heroku app and push the code as normal. Make sure to set the environment variables
• In addition to the automatically detected Python Buildpack, add the NodeJS buildpack to the app. This is to run the root-level package.json which compiles the tailwind files

Notes

Significance of each root-level directory:

• api contains the code for the Django REST Framework API endpoints. It also contains definitions for non-authentication related database models
• app contains the code for the Django Web App. This includes a templates sub directory with the HTML files for the web app.
• users contins database logic for authentication.
• static contains the static files for the web app, such as assets, JS files, and CSS files. These are compiled, minified, renamed, and served by whitenoise in production
• theme contains the configuration for TailwindCSS (find more instructions below)
• tsrs_crypt_hunt is generated by Django. The only relevant file here is settings.py and the root-level urls.py file which is the entry point for all URLs in the Django app
• utils contains some utility functions and constants for the entire application

Development tips

The following Visual Studio Code extensions are recommended to help you work on this project.

• Django
• Django Template language support
• Tailwind CSS IntelliSense
• PostCSS Language Support
• Headwind for sorting Tailwind classes
• IntelliSense for CSS class names in HTML

In the TSRS Inter-House Crypt Hunt

• Use the generate_teams() function from /utils/functions.py to generate house accounts. By default, it generates it based on the list of houses in /utils/constants.py, generating a 3-word passphrase. Make sure to call this function on the server.
• Colors are mapped to house names in /utils/constants.py.

Tailwind

• Tailwind code is defined in the theme 'app'. Tailwind's source code is in static_src, including the src/styles.css file, tailwind.config.js file, and postcss.config.js file.
• If you run the python manage.py tailwind start command, it will start a watcher that will compile the Tailwind code into the static directory. This is where the compiled CSS file is stored, and is where the Django app will look for it.
• Links to the tailwind CSS files are injected into every HTML template using the django template tag

We use a library called django_tailwind to manage this.