This is a demo that shows how you can use Typesense, along with Django, in order to build a search index with near instant results.
The app was built using Django, utilizing the Django REST framework for the backend, along with the Typesense Adapter for instantsearchjs, and a Vite bundled React frontend, with routing from React Router.
common/util/typesense_util.py
inlcudes a helper function to transform Django model instances into Typesense documents.results/management/commands/source_db
includes a custom django-admin command to source the database.results/management/commands/index_typesense
includes a custom django-admin command to index Typesense with the database data.frontend
contains the React frontend.frontend/src/components/instantsearch
contains the custom Instantsearch React components.
To run this project locally, check out the .env.example
file for the environment variables you'll need to configure, install the dependencies and start the Docker image, index the dataset and start the development server.
# Create the virtual python environment
python -m venv venv
# Activate the virtual environment
source venv/bin/activate
# Install the Python dependencies
pip install -r requirements.txt
# Start the docker containers
docker-compose up
# Run the Django migrations
python manage.py migrate
# Source the database
python manage.py source_db
# Index Typesense
python manage.py index_typesense
# Start the Django development server
python manage.py runserver
# In a separate terminal, start the Vite development server
cd frontend
# Install the dependencies
pnpm install
# Start the Vite development server
pnpm run dev
Open http://localhost:3000
to see the app.
You can also access http://localhost:8000
to access the Django API. For a list of available endpoints, check the results/urls.py
file.
There's a simple post_save
and post_delete
signal configuration setup, in order for auto-indexing newly created/updated or deleted records in Typesense.
For more information, please consult the Typesense Documentation.
The dataset used in this showcase is from The Ergast API's public dataset of Formula One races.