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.
Make sure you have the following installed:
- Python
- NodeJS
- Pipenv (for Python dependency management)
Then, follow these steps:
-
Clone the repository
-
Create a
.env
file, and add the following to it:DEBUG=True IS_ONLINE_MODE=False
-
Run
echo "SECRET_KEY=$(openssl rand -base64 32)" >> .env
-
Run
pipenv shell
to active your pipenv virtual environment -
Run
pipenv install
to install the Python dependencies -
Run
python manage.py runserver
to run the server
If you want to make changes to the frontend tailwind classes:
python manage.py tailwind install
to install the tailwind NPM dependencies into the right structure in the project- If on Windows, set
NPM_BIN_PATH
intsrs_crypt_hunt/settings.py
to the defaultnpm.cmd
install location (UsuallyC:\Program Files\nodejs\npm.cmd
). python manage.py tailwind start
to start the tailwind watcher
To work with the database:
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.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 atlocalhost:8000/admin
.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, runpython manage.py migrate
to apply the changes to the database.
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
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 modelsapp
contains the code for the Django Web App. This includes atemplates
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 productiontheme
contains the configuration for TailwindCSS (find more instructions below)tsrs_crypt_hunt
is generated by Django. The only relevant file here issettings.py
and the root-levelurls.py
file which is the entry point for all URLs in the Django apputils
contains some utility functions and constants for the entire application
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
- 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 code is defined in the
theme
'app'. Tailwind's source code is instatic_src
, including thesrc/styles.css
file,tailwind.config.js
file, andpostcss.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 thestatic
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.