Django REST API + Clients (DRF, JWT, Algolia)

Full-stack demo consisting of a Django REST API (DRF + SimpleJWT + Algolia + CORS) with two example clients:

• Web client: vanilla HTML/JS using Algolia InstantSearch
• Python client: scripted JWT login + paginated product listing

Tech stack

• Backend: Django 5, Django REST Framework, SimpleJWT, django-cors-headers, algoliasearch-django, SQLite (dev)
• Clients: Vanilla JS + InstantSearch, Python requests
• Env: python-dotenv

Project layout

backend/
  django_project/
    manage.py
    django_project/
      settings.py
      urls.py
      routers.py
    api/
    products/
    search/
client/
  index.html
  client.js
py_client/
  jwt.py
requirements.txt

Prerequisites

• Python 3.10+
• Pip

Setup

# 1) Create & activate a virtualenv (recommended)
python -m venv .venv
source .venv/bin/activate

# 2) Install dependencies
pip install -r requirements.txt

# 3) Configure environment variables (create file below)
cat > backend/django_project/.env << 'EOF'
SECRET_KEY=change_me_dev_secret
APPLICATION_ID=your_algolia_app_id
API_KEY=your_algolia_api_key
EOF

Notes:

• settings.py uses load_dotenv(); running manage.py from backend/django_project/ will load .env in that folder.
• Default DB is SQLite; see DATABASES in settings.py to use Postgres/etc.

Run the backend (Django)

cd backend/django_project
python manage.py migrate
python manage.py runserver 0.0.0.0:8000

Run the web client (served on port 8111 for CORS)

cd client
python -m http.server 8111
# Open http://localhost:8111

Run the Python client

cd py_client
python jwt.py
# Prompts for username/password, stores tokens in py_client/creds.json, then lists products

Authentication

• Authorization header type: Bearer
• Access token lifetime: 30 minutes
• Refresh token lifetime: 30 minutes

JWT endpoints (note the double api segment is intentional based on routing):

• Obtain: POST /api/api/token/
• Refresh: POST /api/api/token/refresh/
• Verify: POST /api/api/token/verify/

API endpoints

• Base: GET /api/ (health/sample)
• Auth token (DRF token auth): POST /api/auth/
• Products (class-based mixin view):
  • GET /api/products/ (paginated list; limit & offset supported)
  • POST /api/products/
  • GET /api/products/<id>/
  • POST /api/products/<id>/update/
  • POST /api/products/<id>/delete/
• Search:
  • GET /api/search/?q=<term>
• v2 router (DRF ViewSet):
  • GET /api/v2/products-abc/
  • GET /api/v2/products-abc/<id>/

CORS

During development, http://localhost:8111 and https://localhost:8111 are allowed origins in settings.py. Serve the web client on port 8111 as shown above.

Algolia

• Set APPLICATION_ID and API_KEY in .env.
• algoliasearch-django integrates with the products app; saving Product instances will (by default) sync to Algolia based on the integration settings.

Python client details (py_client/jwt.py)

• Base API: http://localhost:8000/api
• Prompts for credentials, obtains SimpleJWT tokens, writes creds.json, and performs authenticated product listing with pagination.
• To reset auth, delete py_client/creds.json or choose a new username/password.

Database & static files

• DB: SQLite by default (db.sqlite3 in the Django project folder)
• Static files: served via STATIC_URL = 'static/' in development

Troubleshooting

• 401/403 from API: ensure Authorization header is Bearer <access_token>; login again if expired.
• CORS blocked in browser: ensure the web client runs on port 8111 and the backend is on 8000.
• Algolia errors: verify .env APPLICATION_ID/API_KEY and that the products app is installed.

Credits

This project was inspired by the CodingEntrepreneurs DRF tutorial series.