Repository files navigation

Bulldoggy is a small demo web app for tracking reminders.It uses:

• Python as the main programming language
• FastAPI for the backend
• HTMX 1.8.6 for handling dynamic interactions (instead of raw JavaScript)
• Jinja templates with HTML and CSS for the frontend
• TinyDB for the database
• Playwright andpytest for testing

Development and testing are two sides of the same coin:

1. To learn how todevelop the Bulldoggy app, watch my PyTexas 2023 keynote,Full-Stack Python.
2. To learn how totest the Bulldoggy app, watch my DjangoCon US 2023 keynote,Testing Modern Web Apps Like A Champion.

These two keynotes are bookends for each other.

You will need a recent version of Python to run this app.To install project dependencies:

pip install -r requirements.txt

It is recommended to install dependencies into avirtual environment.

To run the app:

uvicorn app.main:app --reload

Then, open your browser tohttp://127.0.0.1:8000 to load the app.

Build the image with:

docker build -t bulldoggy-reminders-app:0.1 .

To run the image:

docker run -it --rm --name bulldoggy-reminders-app -p 8000:8000 bulldoggy-reminders-app:0.1

Theconfig.json file declares the users for the app.You may use any configured user credentials, or change them to your liking.The "default" username ispythonista with the passwordI<3testing.

The app uses TinyDB, which stores the database as a JSON file.The default database filepath isreminder_db.json.You may change this path inconfig.json.If you change the filepath, the app will automatically create a new, empty database.

Bulldoggy is a reminders app.After you log in, you can create reminder lists.

Each reminder list appears on the left,and the items in the list appear on the right.You may add, delete, or edit lists and items.You may also strike out completed items.

To read the API docs, open the following pages:

• /docs for classic OpenAPI docs
• /redoc for more modern ReDoc docs

Personally, I love Python, and I wanted to demonstrate how tobuild a full-stack modern web appentirely with Python.

JavaScript essentially has a near-monopoly on front-end web development.Browsers require JavaScript code to perform dynamic web page interactions.However,HTMX offers a novel way to sidestep this limitation:it provides special HTML attributes to denote dynamic interactions for elements.Under the hood, HTMX uses AJAX to issue HTTP requests and swap hypertext contents for elements targetted with its special attributes.JavaScript is still there – you just don't need to touch it!

This enables web frameworks in languages like Python, Go, Java, and others to offer dynamic web page contentdirectly in HTMLwithout requiring developers to explicitly code any JavaScript.HTMX empowers you, as a developer, to build beautiful web apps while remaining in the tech stack of your choice!

To learn more about this app's design, please watch myPyTexas 2023 keynote,Full-Stack Python.

• I usedDALL-E to generate the Bulldoggy logo
• I usedChatGPT to generate parts of the HTML and CSS
• Michael Kennedy's talks atPyBay 2021 andPython Web Conference 2022 on Python + HTMX inspired me
• TheHTMX docs andexamples taught me how to use HTMX
• A few friends from Twitter and LinkedIn helped me test the app:
  • Juan Rosello
  • Sharib Islam
  • therunninglight
  • enigma5312
  • MrpoSr

• Automate API tests
• Automate UI tests
• Automate unit tests