Giter VIP home page Giter VIP logo

fastapi-htmx-full-text-search-demo's Introduction

Python FastAPI HTMX full-text-search demo

This project is a demo full-text-search application that compares the results from SQLite FT5 and Algolia Search platform.

Conceived as an experimental venture, this project serves as a demonstration of an unconventional monolith tech stack. It features an interactive front-end, using a mix of traditional Server Side Rendering (SSR) declarative web framework with zero custom JS:

  • FastAPI the server framework;
  • Jinja for the SSR templating;
  • HTMX to enable front-end interactivity declaratively directly in the HTML.

Description and demo

Live demo (the server goes to sleep, give at least 30s for a cold start)

app-preview.mp4

The outcome of this project is something very simple and minimal. The served content is tiny and fast. There's no initial loading, everything is pre-rendered on the server, and each API request renders HTML that is injected into the DOM - no need for Hydration, Resumability nor even data serialization. It is compatible with most browsers, all the way back to IE11, where it struggles a little with style, but works.

OpenAPI spec (swagger)

The application works by serving a full rendered Jinja HTML template when the user navigates to a Front-End route. These templates are composed via smaller reusable templates (using include). And then the templates (components) are also served, de-coupled from the whole page in the HTML API (/html-api/...). HTMX handles the rest, listens to DOM events and updates it when when necessary.

Example HTML API request/response

Development

  • Create a .env file based on the .env.template.
    You will need an Algolia account, more info in their Quick start guide.
    More information about the env vars can be found in ./text_search_app/config.py

  • Setup a local environment with make setup-venv, activate it with source ./venv/bin/activate (or with your favourite tool).

  • Install dependencies: make install-dev.

  • Start the development server: make dev.

Deployment

For deployment one would use the ./Dockerfile and set the required environment variables.

For running locally a production like build, install the dependencies with make install and run the application with make start. That's it.

Uploading a dataset

To keep this repository clean, no sample data is provided. You can upload your own data via the /index/upload-csv endpoint. Information about the supported CSV columns available in the Swagger UI (/docs).

Recommended datasets (adapt column names when needed):

License

MIT

fastapi-htmx-full-text-search-demo's People

Contributors

tofran avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.