Skip to content

This project showcases how to implement a live search feature in a Django application using HTMX and Tailwind CSS. The application allows users to search and view results dynamically without reloading the page. Django Compressor is used to optimize the loading of CSS and JavaScript files.

License

Notifications You must be signed in to change notification settings

MoigeMatino/django-htmx-tailwind-live-search

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Django HTMX Tailwind Live Search

This repository contains a Django application that demonstrates live search functionality using HTMX for handling AJAX requests and Tailwind CSS for responsive styling. These technologies are ideal for simplifying modern web development by streamlining rapid prototyping and enhancing user experience through dynamic content updates.

Table of Contents

Introduction

This project showcases how to implement a live search feature in a Django application using HTMX and Tailwind CSS. The application allows users to search and view results dynamically without reloading the page.

Features

  • Real-time search results
  • Responsive design with Tailwind CSS
  • Django backend with HTMX for AJAX requests
  • Optimized and compressed CSS/JS using Django Compressor

Technologies Used

  • Django: The web framework used for the backend.
  • HTMX: A library for handling AJAX requests and updating the DOM.
  • Tailwind CSS: A utility-first CSS framework for styling.
  • Django Compressor: A tool for compressing and combining CSS and JavaScript files.

Installation

Prerequisites

  • Python 3.10+
  • Django 4.2+

Steps

  1. Clone the repository:

    Using HTTPS:

    git clone https://github.com/yourusername/django-htmx-tailwind-live-search.git
    cd django-htmx-tailwind-live-search

    Using SSH:

    git clone [email protected]:yourusername/django-htmx-tailwind-live-search.git
    cd django-htmx-tailwind-live-search
  2. Create a virtual environment and activate it:

    python -m venv .venv
    source .venv/bin/activate  # On Windows use `.venv\Scripts\activate`
  3. Install the dependencies:

    pip install -r requirements.txt
  4. Run database migrations:

    python manage.py migrate
  5. Start the development server:

    python manage.py runserver

Usage

  1. Open your web browser and navigate to http://127.0.0.1:8000/.
  2. Use the search bar to perform live searches.

License

This project is licensed under the MIT License. See the LICENSE file for details.

About

This project showcases how to implement a live search feature in a Django application using HTMX and Tailwind CSS. The application allows users to search and view results dynamically without reloading the page. Django Compressor is used to optimize the loading of CSS and JavaScript files.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages