init commit

Author: DBProductions

.github/workflows/playwright.yml

@@ -0,0 +1,29 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v5
+    - name: Set up Python
+      uses: actions/setup-python@v6
+      with:
+        python-version: '3.12'
+    - name: Install dependencies
+      run: |
+        python -m pip install --upgrade pip
+        pip install -r requirements.txt
+    - name: Ensure browsers are installed
+      run: python -m playwright install --with-deps
+    - name: Run your tests
+      run: pytest tests/*.py -v
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-traces
+        path: test-results/

.gitignore

@@ -0,0 +1,10 @@
+# Python-generated files
+__pycache__/
+*.py[oc]
+build/
+dist/
+wheels/
+*.egg-info
+
+# Virtual environments
+.venv

README.md

@@ -0,0 +1,76 @@
+# HTMX Examples
+
+This repository demonstrates how to build modern, dynamic user interfaces using **HTMX** with a **FastAPI** backend in Python 3.12.6.  
+Instead of relying on JSON APIs and heavy JavaScript, this project follows the **Hypermedia-Driven Application (HDA)** architecture: the backend sends HTML fragments directly, and HTMX handles DOM updates seamlessly.
+
+## 🛠️ Tech Stack
+
+- **Backend**: [FastAPI](https://fastapi.tiangolo.com/) (Python) and [Jinja2](https://jinja.palletsprojects.com/) as template engine
+- **Frontend**: [HTMX](https://htmx.org/) with plain HTML, [Pico CSS](https://picocss.com/) and some [_hyperscript](https://hyperscript.org/)
+- **Testing**: [Playwright](https://playwright.dev/python/) for end-to-end tests
+- **Data Source**: [Random User API](https://randomuser.me/api/)
+
+All frontend dependencies are loaded directly from `index.html` via `<script>` tags.
+
+## ▶️ Running the App
+
+Install dependencies and start the development server:
+
+    python -m venv ./venv
+    source ./venv/bin/activate
+    
+    pip install -r requirements.txt
+    uvicorn main:app --reload
+
+App is reachable under: `http://127.0.0.1:8000/`
+Swagger: `http://127.0.0.1:8000/docs`
+Redoc: `http://127.0.0.1:8000/redoc`
+
+## 🧪 Run tests
+
+For tests, user data is loaded from `user_data.json` instead of being fetched from `randomuser.me`.
+
+All tests:
+
+    pytest tests/*.py -v
+
+Run a specific test:
+    
+    pytest tests/test_htmx_form.py -v
+    pytest tests/test_htmx_scrolling.py -v
+    pytest tests/test_htmx_stream.py -v
+    pytest tests/test_htmx_table.py -v
+
+## 🌟 Examples
+All examples fetch user data from [https://randomuser.me/api/](https://randomuser.me/api/).
+
+### Data Table
+Dynamically load and display user data in a responsive table.  
+Some _hyperscript is used to handle HTML form validation. Sweetalert2 is used to confirm a deletion.
+
+![data table screenshot](./screenshots/data-table.png "Data Table Screenshot")
+![data table add screenshot](./screenshots/data-table-add.png "Data Table Add Screenshot")
+![data table delete screenshot](./screenshots/data-table-delete.png "Data Table Delete Screenshot")
+
+### Form Handling
+Submit and validate forms without page reloads.  
+Some JavaScript is used to handle HTML form validation.
+
+![form step 1 screenshot](./screenshots/form-step1.png "Form Step 1 Screenshot")
+![form step 2 screenshot](./screenshots/form-step2.png "Form Step 2 Screenshot")
+![form success screenshot](./screenshots/form-success.png "Form Success Screenshot")
+
+### Server-Sent Events (SSE) Streaming
+Real-time updates via HTMX streams.  
+Good way to get data pushed from the server for interaction websockets needs to be used.  
+
+![stream screenshot](./screenshots/stream.png "Stream Screenshot")
+
+### Infinite Scrolling
+Load additional content as the user scrolls.  
+A typincal thing while consuming content to scroll over endless entries.  
+
+![scrolling screenshot](./screenshots/scrolling.png "Scrolling Screenshot")
+
+## 💬 Feedback
+Star this repo if you found it useful. Use the github issue tracker to give feedback on this repo.