Merge branch 'master' into fix-backend-reload-during-playwright-tests

[skip ci]

.dockerignore

@@ -6,5 +6,6 @@ frontend/blob-report
 frontend/dist
 frontend/node_modules
 frontend/playwright-report
+frontend/playwright/.auth
 frontend/test-results
 node_modules

.github/workflows/bump-pre-commit-hooks.yml

@@ -28,11 +28,9 @@ jobs:
         with:
           python-version-file: ".python-version"
       - name: Setup uv
-        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
+        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
         with:
-          # Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
-          # See: https://github.com/astral-sh/setup-uv/issues/851#issuecomment-4282017837
-          version: "0.11.18"
+          version: "latest-known"
           cache-dependency-glob: |
             pyproject.toml
             uv.lock

.github/workflows/create-draft-release.yml

@@ -29,11 +29,9 @@ jobs:
         with:
           python-version-file: ".python-version"
       - name: Install uv
-        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
+        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
         with:
-          # Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
-          # See: https://github.com/astral-sh/setup-uv/issues/851#issuecomment-4282017837
-          version: "0.11.18"
+          version: "latest-known"
       - name: Extract release details
         id: release-details
         run: |

.github/workflows/deploy.yml

@@ -35,9 +35,9 @@ jobs:
           # Override frontend/.env so the deployed frontend uses the same origin as the API
           VITE_API_URL: ""
       - name: Set up uv
-        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
+        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
         with:
-          version: "0.11.18"
+          version: "latest-known"
       - name: Prepare database
         run: uv run bash scripts/prestart.sh
         working-directory: backend

.github/workflows/playwright.yml

@@ -66,11 +66,9 @@ jobs:
       with:
         limit-access-to-actor: true
     - name: Install uv
-      uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
+      uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
       with:
-        # Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
-        # See: https://github.com/astral-sh/setup-uv/issues/851#issuecomment-4282017837
-        version: "0.11.18"
+        version: "latest-known"
     - run: uv sync
       working-directory: backend
     - run: bun ci

.github/workflows/pre-commit.yml

@@ -46,11 +46,9 @@ jobs:
         with:
           python-version-file: .python-version
       - name: Setup uv
-        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
+        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
         with:
-          # Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
-          # See: https://github.com/astral-sh/setup-uv/issues/851#issuecomment-4282017837
-          version: "0.11.18"
+          version: "latest-known"
           cache-dependency-glob: |
             requirements**.txt
             pyproject.toml

.github/workflows/prepare-release.yml

@@ -38,11 +38,9 @@ jobs:
         with:
           python-version-file: ".python-version"
       - name: Install uv
-        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
+        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
         with:
-          # Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
-          # See: https://github.com/astral-sh/setup-uv/issues/851#issuecomment-4282017837
-          version: "0.11.18"
+          version: "latest-known"
       - name: Prepare release
         env:
           BUMP: ${{ inputs.bump }}

.github/workflows/smokeshow.yml

@@ -24,11 +24,9 @@ jobs:
         with:
           python-version-file: .python-version
       - name: Setup uv
-        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
+        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
         with:
-          # Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
-          # See: https://github.com/astral-sh/setup-uv/issues/851#issuecomment-4282017837
-          version: "0.11.18"
+          version: "latest-known"
           cache-dependency-glob: |
             pyproject.toml
             uv.lock

.github/workflows/test-backend.yml

@@ -22,13 +22,11 @@ jobs:
         with:
           python-version-file: .python-version
       - name: Install uv
-        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
+        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
         with:
-          # Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
-          # See: https://github.com/astral-sh/setup-uv/issues/851#issuecomment-4282017837
-          version: "0.11.18"
+          version: "latest-known"
       - run: docker compose down -v --remove-orphans
-      - run: docker compose up -d db mailcatcher
+      - run: docker compose up -d db mailpit
       - name: Migrate DB
         run: uv run bash scripts/prestart.sh
         working-directory: backend

README.md

@@ -1,8 +1,7 @@
 # Full Stack FastAPI Template
 
-<a href="https://github.com/fastapi/full-stack-fastapi-template/actions?query=workflow%3A%22Test+Docker+Compose%22" target="_blank"><img src="https://github.com/fastapi/full-stack-fastapi-template/workflows/Test%20Docker%20Compose/badge.svg" alt="Test Docker Compose"></a>
-<a href="https://github.com/fastapi/full-stack-fastapi-template/actions?query=workflow%3A%22Test+Backend%22" target="_blank"><img src="https://github.com/fastapi/full-stack-fastapi-template/workflows/Test%20Backend/badge.svg" alt="Test Backend"></a>
-<a href="https://coverage-badge.samuelcolvin.workers.dev/redirect/fastapi/full-stack-fastapi-template" target="_blank"><img src="https://coverage-badge.samuelcolvin.workers.dev/fastapi/full-stack-fastapi-template.svg" alt="Coverage"></a>
+[![Test Docker Compose](../../actions/workflows/test-docker-compose.yml/badge.svg)](../../actions/workflows/test-docker-compose.yml)
+[![Test Backend](../../actions/workflows/test-backend.yml/badge.svg)](../../actions/workflows/test-backend.yml)
 
 ## Technology Stack and Features
 
@@ -15,128 +14,50 @@
   - 💃 Using TypeScript, hooks, [Vite](https://vitejs.dev), and other parts of a modern frontend stack.
   - 🎨 [Tailwind CSS](https://tailwindcss.com) and [shadcn/ui](https://ui.shadcn.com) for the frontend components.
   - 🤖 An automatically generated frontend client.
-  - 🧪 [Playwright](https://playwright.dev) for End-to-End testing.
+  - 🧪 [Playwright](https://playwright.dev) for end-to-end testing.
   - 🦇 Dark mode support.
 - ☁️ [FastAPI Cloud](https://fastapicloud.com) for deployment.
 - 🐋 [Docker Compose](https://www.docker.com) for local services and self-hosted deployment.
   - 📞 [Traefik](https://traefik.io) as a reverse proxy with automatic HTTPS.
 - 🔒 Secure password hashing by default.
 - 🔑 JWT (JSON Web Token) authentication.
-- 📫 Email based password recovery.
-- 📬 [Mailcatcher](https://mailcatcher.me) for local email testing during development.
+- 📫 Email-based password recovery.
+- ✉️ [React Email](https://react.email) for email templates.
+- 📬 [Mailpit](https://mailpit.axllent.org) for local email testing during development.
 - ✅ Tests with [Pytest](https://pytest.org).
-- 🚢 Deployment with FastAPI Cloud or self-hosting with Docker Compose and Traefik.
 - 🏭 CI (continuous integration) and CD (continuous deployment) based on GitHub Actions.
 
 ### Dashboard Login
 
-[![Dashboard login screenshot](img/login.png)](https://github.com/fastapi/full-stack-fastapi-template)
+![Dashboard login screenshot](img/login.png)
 
 ### Dashboard - Admin
 
-[![Admin dashboard screenshot](img/dashboard.png)](https://github.com/fastapi/full-stack-fastapi-template)
+![Admin dashboard screenshot](img/dashboard.png)
 
 ### Dashboard - Items
 
-[![Items dashboard screenshot](img/dashboard-items.png)](https://github.com/fastapi/full-stack-fastapi-template)
+![Items dashboard screenshot](img/dashboard-items.png)
 
 ### Dashboard - Dark Mode
 
-[![Dark mode dashboard screenshot](img/dashboard-dark.png)](https://github.com/fastapi/full-stack-fastapi-template)
+![Dark mode dashboard screenshot](img/dashboard-dark.png)
+
+### React Email Templates
+
+![Email templates screenshot](img/react-email.png)
+
+### Mailpit - Local Email Testing
+
+![Mailpit screenshot](img/mailpit.png)
 
 ### Interactive API Documentation
 
-[![API docs](img/docs.png)](https://github.com/fastapi/full-stack-fastapi-template)
+![API docs](img/docs.png)
 
-## How To Use It
+## How to Use It
 
-You can **just fork or clone** this repository and use it as is.
-
-✨ It just works. ✨
-
-### How to Use a Private Repository
-
-If you want to have a private repository, GitHub won't allow you to simply fork it as it doesn't allow changing the visibility of forks.
-
-But you can do the following:
-
-- Create a new GitHub repo, for example `my-full-stack`.
-- Clone this repository manually, set the name with the name of the project you want to use, for example `my-full-stack`:
-
-```bash
-git clone git@github.com:fastapi/full-stack-fastapi-template.git my-full-stack
-```
-
-- Enter into the new directory:
-
-```bash
-cd my-full-stack
-```
-
-- Set the new origin to your new repository, copy it from the GitHub interface, for example:
-
-```bash
-git remote set-url origin git@github.com:octocat/my-full-stack.git
-```
-
-- Add this repo as another "remote" to allow you to get updates later:
-
-```bash
-git remote add upstream git@github.com:fastapi/full-stack-fastapi-template.git
-```
-
-- Push the code to your new repository:
-
-```bash
-git push -u origin master
-```
-
-### Update From the Original Template
-
-After cloning the repository, and after doing changes, you might want to get the latest changes from this original template.
-
-- Make sure you added the original repository as a remote, you can check it with:
-
-```bash
-git remote -v
-
-origin    git@github.com:octocat/my-full-stack.git (fetch)
-origin    git@github.com:octocat/my-full-stack.git (push)
-upstream    git@github.com:fastapi/full-stack-fastapi-template.git (fetch)
-upstream    git@github.com:fastapi/full-stack-fastapi-template.git (push)
-```
-
-- Pull the latest changes without merging:
-
-```bash
-git pull --no-commit upstream master
-```
-
-This will download the latest changes from this template without committing them, that way you can check everything is right before committing.
-
-- If there are conflicts, solve them in your editor.
-
-- Once you are done, commit the changes:
-
-```bash
-git merge --continue
-```
-
-### Configure
-
-You can update the local settings in the `.env` file. Before deploying, configure the environment variables and secrets described in the [FastAPI Cloud deployment guide](./deployment.md) or the [Docker Compose deployment guide](./deployment-docker-compose.md). Never deploy with the default `changethis` values.
-
-### Generate Secret Keys
-
-Some environment variables in the `.env` file have a default value of `changethis`.
-
-You have to change them with a secret key, to generate secret keys you can run the following command:
-
-```bash
-python -c "import secrets; print(secrets.token_urlsafe(32))"
-```
-
-Copy the content and use that as password / secret key. And run that again to generate another secure key.
+Click the **Use this template** button at the top of this page to create a new repository.
 
 ## Backend Development
 
@@ -148,9 +69,9 @@ Frontend docs: [frontend/README.md](./frontend/README.md).
 
 ## Deployment
 
-Deployment docs: [deployment.md](./deployment.md).
+FastAPI Cloud deployment: [deployment.md](./deployment.md).
 
-Docker Compose deployment: [deployment-docker-compose.md](./deployment-docker-compose.md).
+Self-hosted deployment with Docker Compose: [deployment-docker-compose.md](./deployment-docker-compose.md).
 
 ## Development
 

backend/README.md

@@ -9,10 +9,10 @@
 
 Run the backend locally and connect it to PostgreSQL in Docker Compose.
 
-From the project root, start PostgreSQL and Mailcatcher:
+From the project root, start PostgreSQL and Mailpit:
 
 ```console
-$ docker compose up -d db mailcatcher
+$ docker compose up -d db mailpit
 ```
 
 Then, from `./backend/`, install the dependencies, prepare the database, and start the development server:
@@ -58,19 +58,19 @@ To open a shell in the backend container:
 $ docker compose exec backend bash
 ```
 
-## Backend tests
+## Backend Tests
 
 To test the backend from the `backend` directory, run:
 
 ```console
-$ uv run bash ./scripts/test.sh
+$ uv run bash scripts/test.sh
 ```
 
-The tests run with Pytest, modify and add tests to `./backend/tests/`.
+The tests run with Pytest. Modify existing tests or add new ones in `./backend/tests/`.
 
-If you use GitHub Actions the tests will run automatically.
+If you use GitHub Actions, the tests will run automatically.
 
-### Test running stack
+### Test a Running Stack
 
 If your stack is already up and you just want to run the tests, you can use:
 
@@ -78,7 +78,7 @@ If your stack is already up and you just want to run the tests, you can use:
 docker compose exec backend bash scripts/tests-start.sh
 ```
 
-That `/app/scripts/tests-start.sh` script just calls `pytest` after making sure that the rest of the stack is running. If you need to pass extra arguments to `pytest`, you can pass them to that command and they will be forwarded.
+The `/app/backend/scripts/tests-start.sh` script calls `pytest` after making sure that the rest of the stack is running. If you need to pass extra arguments to `pytest`, you can pass them to that command and they will be forwarded.
 
 For example, to stop on first error:
 
@@ -88,7 +88,7 @@ docker compose exec backend bash scripts/tests-start.sh -x
 
 ### Test Coverage
 
-When the tests are run, a file `htmlcov/index.html` is generated, you can open it in your browser to see the coverage of the tests.
+When the tests run, they generate `htmlcov/index.html`. Open it in your browser to inspect the test coverage.
 
 ## Migrations
 
@@ -128,7 +128,7 @@ If you don't want to start with the default models and want to remove them / mod
 
 The email templates are written with [React Email](https://react.email) in `./packages/react-email/`. The `emails` directory holds one component per email and the `ui` directory holds the shared components (layout, heading, button, link, callout).
 
-The rendered HTML in `./backend/app/email-templates/` is generated from those components, it is what the application sends, and it shouldn't be edited by hand.
+The rendered HTML in `./backend/app/email-templates/` is generated from those components. It is what the application sends and should not be edited by hand.
 
 To preview the emails while editing them, start the dev server from the root of the project:
 

bun.lock

@@ -33,7 +33,6 @@
         "clsx": "^2.1.1",
         "form-data": "4.0.6",
         "lucide-react": "^1.28.0",
-        "next-themes": "^0.4.6",
         "react": "^19.2.8",
         "react-dom": "^19.2.8",
         "react-error-boundary": "^6.1.2",
@@ -844,8 +843,6 @@
 
     "next": ["next@16.2.6", "", { "dependencies": { "@next/env": "16.2.6", "@swc/helpers": "0.5.15", "baseline-browser-mapping": "^2.9.19", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "16.2.6", "@next/swc-darwin-x64": "16.2.6", "@next/swc-linux-arm64-gnu": "16.2.6", "@next/swc-linux-arm64-musl": "16.2.6", "@next/swc-linux-x64-gnu": "16.2.6", "@next/swc-linux-x64-musl": "16.2.6", "@next/swc-win32-arm64-msvc": "16.2.6", "@next/swc-win32-x64-msvc": "16.2.6", "sharp": "^0.34.5" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-qOVgKJg1+At15NpeUP+eJgCHvTCgXsogweq87Ri/Ix7PkqQHg4sdaXmSFqKlgaIXE4kW0g25LE68W87UANlHtw=="],
 
-    "next-themes": ["next-themes@0.4.6", "", { "peerDependencies": { "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc" } }, "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA=="],
-
     "node-releases": ["node-releases@2.0.27", "", {}, "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA=="],
 
     "normalize-path": ["normalize-path@3.0.0", "", {}, "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="],

compose.override.yml

@@ -64,14 +64,14 @@ services:
       - ./backend/htmlcov:/app/backend/htmlcov
     environment:
       FASTAPI_ENV: "development"
-      SMTP_HOST: "mailcatcher"
+      SMTP_HOST: "mailpit"
       SMTP_PORT: "1025"
       SMTP_TLS: "false"
 
-  mailcatcher:
-    image: schickling/mailcatcher
+  mailpit:
+    image: axllent/mailpit
     ports:
-      - "1080:1080"
+      - "8025:8025"
       - "1025:1025"
 
   playwright:
@@ -83,13 +83,13 @@ services:
     ipc: host
     depends_on:
       - backend
-      - mailcatcher
+      - mailpit
     environment:
       - FIRST_SUPERUSER=${FIRST_SUPERUSER:?Variable not set}
       - FIRST_SUPERUSER_PASSWORD=${FIRST_SUPERUSER_PASSWORD:?Variable not set}
       - PLAYWRIGHT_BASE_URL=http://backend:8000
       - VITE_API_URL=http://backend:8000
-      - MAILCATCHER_HOST=http://mailcatcher:1080
+      - MAILPIT_HOST=http://mailpit:8025
       # For the reports when run locally
       - PLAYWRIGHT_HTML_HOST=0.0.0.0
       - CI=${CI:-}

development.md

@@ -2,12 +2,12 @@
 
 ## Local Development
 
-For local development, run PostgreSQL and Mailcatcher with Docker Compose, and run the FastAPI and Vite development servers locally.
+For local development, run PostgreSQL and Mailpit with Docker Compose, and run the FastAPI and Vite development servers locally.
 
 Start the supporting services:
 
 ```bash
-docker compose up -d db mailcatcher
+docker compose up -d db mailpit
 ```
 
 Then, from the `backend` directory, install the dependencies and prepare the database:
@@ -38,7 +38,7 @@ Backend API: <http://localhost:8000>
 
 Automatic interactive API documentation with Swagger UI: <http://localhost:8000/docs>
 
-Mailcatcher: <http://localhost:1080>
+Mailpit: <http://localhost:8025>
 
 The frontend development server uses the backend at `http://localhost:8000`, as configured in `frontend/.env`.
 
@@ -71,21 +71,21 @@ Adminer, database web administration: <http://localhost:8080>
 
 Traefik UI, to see how the routes are being handled by the proxy: <http://localhost:8090>
 
-Mailcatcher: <http://localhost:1080>
+Mailpit: <http://localhost:8025>
 
 Stop a locally running FastAPI server before starting the Compose backend because both use port `8000`.
 
 **Note**: The first time you start the stack, it might take a minute for all the services to be ready. To monitor it, use `docker compose logs`, or `docker compose logs backend` for the backend service.
 
-## Mailcatcher
+## Mailpit
 
-Mailcatcher captures emails sent during local development instead of delivering them. The local backend connects to it at `localhost:1025`, and the Compose backend connects to the `mailcatcher` service. Captured emails are available at <http://localhost:1080>.
+[Mailpit](https://mailpit.axllent.org) captures emails sent during local development instead of delivering them. The local backend connects to it at `localhost:1025`, and the Compose backend connects to the `mailpit` service. Captured emails are available at <http://localhost:8025>.
 
-## Docker Compose files and env vars
+## Docker Compose Files and Environment Variables
 
-There is a main `compose.yml` file with all the configurations that apply to the whole stack, it is used automatically by `docker compose`.
+The main `compose.yml` file contains the configuration shared by the whole stack. Docker Compose loads it automatically.
 
-And there's also a `compose.override.yml` with overrides for development, for example to mount the source code as a volume. It is used automatically by `docker compose` to apply overrides on top of `compose.yml`.
+The `compose.override.yml` file adds local development settings, such as mounting the source code as a volume. Docker Compose also loads it automatically and applies it on top of `compose.yml`.
 
 The `compose.deploy.yml` file contains the deployment-specific settings, including HTTPS and automatic certificate handling. It is explicitly combined with `compose.yml` when deploying the application.
 
@@ -97,79 +97,42 @@ After changing variables, make sure you restart the stack:
 docker compose watch
 ```
 
-## The .env file
+## The `.env` File
 
-The `.env` file contains the shared local defaults, generated keys, passwords, and other configuration. Its hostnames use `localhost` for processes running on your machine. Docker Compose overrides hostnames such as the database and SMTP server with their Compose service names.
+The tracked `.env` file contains local development defaults, passwords, and other configuration. Its hostnames use `localhost` for processes running on your machine. Docker Compose overrides hostnames such as the database and SMTP server with their Compose service names.
 
-Depending on your workflow, you could want to exclude it from Git, for example if your project is public. In that case, you would have to make sure to set up a way for your CI tools to obtain it while building or deploying your project.
+Do not store deployment secrets in `.env`. Configure them as described in the [FastAPI Cloud deployment guide](./deployment.md) or the [Docker Compose deployment guide](./deployment-docker-compose.md).
 
-One way to do it could be to add each environment variable to your CI/CD system.
+## Pre-commit Hooks and Code Linting
 
-## Pre-commits and code linting
-
-we are using a tool called [prek](https://prek.j178.dev/) (modern alternative to [Pre-commit](https://pre-commit.com/)) for code linting and formatting.
-
-When you install it, it runs right before making a commit in git. This way it ensures that the code is consistent and formatted even before it is committed.
+The project uses [prek](https://prek.j178.dev/), a modern alternative to [pre-commit](https://pre-commit.com/), for code linting and formatting.
 
 You can find a file `.pre-commit-config.yaml` with configurations at the root of the project.
 
-#### Install prek to run automatically
+### Install `prek` to Run Automatically
 
 `prek` is already part of the dependencies of the project.
 
-After having the `prek` tool installed and available, you need to "install" it in the local repository, so that it runs automatically before each commit.
-
-Using `uv`, you could do it with (make sure you are inside `backend` folder):
+From the project root, install the Git hook so that `prek` runs automatically before each commit:
 
 ```bash
-❯ uv run prek install -f
-prek installed at `../.git/hooks/pre-commit`
+uv run prek install -f
 ```
 
 The `-f` flag forces the installation, in case there was already a `pre-commit` hook previously installed.
 
-Now whenever you try to commit, e.g. with:
+Now whenever you try to commit, for example with:
 
 ```bash
 git commit
 ```
 
-...prek will run and check and format the code you are about to commit, and will ask you to add that code (stage it) with git again before committing.
+`prek` will check and format the code you are about to commit. If it modifies any files, add those files to Git again before committing.
 
-Then you can `git add` the modified/fixed files again and now you can commit.
+### Run `prek` Manually
 
-#### Running prek hooks manually
-
-you can also run `prek` manually on all the files, you can do it using `uv` with:
+You can also run `prek` manually on all files from the project root:
 
 ```bash
-❯ uv run prek run --all-files
-check for added large files..............................................Passed
-check toml...............................................................Passed
-check yaml...............................................................Passed
-fix end of files.........................................................Passed
-trim trailing whitespace.................................................Passed
-ruff.....................................................................Passed
-ruff-format..............................................................Passed
-biome check..............................................................Passed
+uv run prek run --all-files
 ```
-
-## URLs
-
-The deployed URLs use these same paths, but with your own domain.
-
-### Development URLs
-
-Development URLs, for local development.
-
-Application: <http://localhost:8000>
-
-Automatic Interactive Docs (Swagger UI): <http://localhost:8000/docs>
-
-Automatic Alternative Docs (ReDoc): <http://localhost:8000/redoc>
-
-Adminer: <http://localhost:8080>
-
-Traefik UI: <http://localhost:8090>
-
-MailCatcher: <http://localhost:1080>

frontend/.env

@@ -1,2 +1,2 @@
 VITE_API_URL=http://localhost:8000
-MAILCATCHER_HOST=http://localhost:1080
+MAILPIT_HOST=http://localhost:8025

frontend/README.md

@@ -1,27 +1,29 @@
 # FastAPI Project - Frontend
 
-The frontend is built with [Vite](https://vitejs.dev/), [React](https://reactjs.org/), [TypeScript](https://www.typescriptlang.org/), [TanStack Query](https://tanstack.com/query), [TanStack Router](https://tanstack.com/router) and [Tailwind CSS](https://tailwindcss.com/).
+The frontend is built with [Vite](https://vitejs.dev/), [React](https://react.dev/), [TypeScript](https://www.typescriptlang.org/), [TanStack Query](https://tanstack.com/query), [TanStack Router](https://tanstack.com/router), [Tailwind CSS](https://tailwindcss.com/), and [shadcn/ui](https://ui.shadcn.com/).
 
 ## Requirements
 
-- [Bun](https://bun.sh/) (recommended) or [Node.js](https://nodejs.org/)
+- [Bun](https://bun.sh/)
 
 ## Quick Start
 
+From the project root, install the dependencies and start the frontend development server:
+
 ```bash
 bun install
 bun run dev
 ```
 
-* Then open your browser at http://localhost:5173/.
+Then open <http://localhost:5173/> in your browser.
 
 Run `uv run bash scripts/prestart.sh` and `uv run fastapi dev` from the `backend` directory, with PostgreSQL running in Docker Compose. See [../development.md](../development.md) for the complete setup.
 
 To serve the frontend with FastAPI, run `bun run build` from the `frontend` directory and open `http://localhost:8000`.
 
-Check the file `package.json` to see other available options.
+Check `frontend/package.json` to see the other available commands.
 
-### Removing the frontend
+## Removing the Frontend
 
 If you are developing an API-only app and want to remove the frontend, you can do it easily:
 
@@ -37,13 +39,13 @@ If you are developing an API-only app and want to remove the frontend, you can d
 
 * In the `.fastapicloudignore` file, remove the `!backend/app/frontend/` entry.
 
-Done, you have a frontend-less (api-only) app. 🤓
+Done, you now have an API-only app. 🤓
 
 ## Generate Client
 
 ### Automatically
 
-* From the top level project directory, run the script:
+* From the project root, run the script:
 
 ```bash
 bash ./scripts/generate-client.sh
@@ -65,7 +67,7 @@ bun run generate-client
 
 * Commit the changes.
 
-Notice that everytime the backend changes (changing the OpenAPI schema), you should follow these steps again to update the frontend client.
+Regenerate the client whenever backend changes affect the OpenAPI schema.
 
 ## Using a Remote API
 
@@ -82,11 +84,12 @@ Then, when you run the frontend, it will use that URL as the base URL for the AP
 The frontend code is structured as follows:
 
 * `frontend/src` - The main frontend code.
-* `frontend/src/assets` - Static assets.
+* `frontend/public` - Static assets.
 * `frontend/src/client` - The generated OpenAPI client.
-* `frontend/src/components` -  The different components of the frontend.
+* `frontend/src/components` - The components of the frontend, including the shadcn/ui components in `frontend/src/components/ui`.
 * `frontend/src/hooks` - Custom hooks.
-* `frontend/src/routes` - The different routes of the frontend which include the pages.
+* `frontend/src/lib` - Shared frontend utilities.
+* `frontend/src/routes` - The frontend routes and pages.
 
 ## End-to-End Testing with Playwright
 

frontend/package.json

@@ -37,7 +37,6 @@
     "clsx": "^2.1.1",
     "form-data": "4.0.6",
     "lucide-react": "^1.28.0",
-    "next-themes": "^0.4.6",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-error-boundary": "^6.1.2",

frontend/src/components/ui/sonner.tsx

@@ -7,15 +7,15 @@ import {
   OctagonXIcon,
   TriangleAlertIcon,
 } from "lucide-react"
-import { useTheme } from "next-themes"
+import { useTheme } from "@/components/theme-provider"
 import { Toaster as Sonner, type ToasterProps } from "sonner"
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+  const { theme } = useTheme()
 
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
+      theme={theme}
       className="toaster group"
       icons={{
         success: <CircleCheckIcon className="size-4" />,

frontend/src/routes/_layout.tsx

@@ -25,7 +25,7 @@ function Layout() {
     <SidebarProvider>
       <AppSidebar />
       <SidebarInset>
-        <header className="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-2 border-b px-4">
+        <header className="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
           <SidebarTrigger className="-ml-1 text-muted-foreground" />
         </header>
         <main className="flex-1 p-6 md:p-8">

frontend/tests/reset-password.spec.ts

@@ -1,10 +1,12 @@
 import { expect, test } from "@playwright/test"
-import { findLastEmail } from "./utils/mailcatcher"
+import { waitForEmailHtml } from "./utils/mailpit"
 import { randomEmail, randomPassword } from "./utils/random"
 import { logInUser, signUpNewUser } from "./utils/user"
 
 test.use({ storageState: { cookies: [], origins: [] } })
 
+const resetPath = "/reset-password?token="
+
 test("Password Recovery title is visible", async ({ page }) => {
   await page.goto("/recover-password")
 
@@ -44,23 +46,17 @@ test("User can reset password successfully using the link", async ({
 
   await page.getByRole("button", { name: "Continue" }).click()
 
-  const emailData = await findLastEmail({
+  const emailHtml = await waitForEmailHtml({
     request,
-    filter: (e) => e.recipients.includes(`<${email}>`),
-    timeout: 5000,
+    query: `to:${email}`,
   })
 
-  await page.goto(
-    `${process.env.MAILCATCHER_HOST}/messages/${emailData.id}.html`,
-  )
-
-  const selector = 'a[href*="/reset-password?token="]'
-
-  const url = await page.getAttribute(selector, "href")
-  const resetUrl = new URL(url!)
+  expect(emailHtml).toContain(resetPath)
+  const resetUrl = emailHtml.match(/\/reset-password\?token=[^"]+/)?.[0]
+  expect(resetUrl).toBeDefined()
 
   // Set the new password and confirm it
-  await page.goto(`${resetUrl.pathname}${resetUrl.search}`)
+  await page.goto(resetUrl!)
 
   await page.getByTestId("new-password-input").fill(newPassword)
   await page.getByTestId("confirm-password-input").fill(newPassword)
@@ -97,22 +93,17 @@ test("Weak new password validation", async ({ page, request }) => {
   await page.getByTestId("email-input").fill(email)
   await page.getByRole("button", { name: "Continue" }).click()
 
-  const emailData = await findLastEmail({
+  const emailHtml = await waitForEmailHtml({
     request,
-    filter: (e) => e.recipients.includes(`<${email}>`),
-    timeout: 5000,
+    query: `to:${email}`,
   })
 
-  await page.goto(
-    `${process.env.MAILCATCHER_HOST}/messages/${emailData.id}.html`,
-  )
-
-  const selector = 'a[href*="/reset-password?token="]'
-  const url = await page.getAttribute(selector, "href")
-  const resetUrl = new URL(url!)
+  expect(emailHtml).toContain(resetPath)
+  const resetUrl = emailHtml.match(/\/reset-password\?token=[^"]+/)?.[0]
+  expect(resetUrl).toBeDefined()
 
   // Set a weak new password
-  await page.goto(`${resetUrl.pathname}${resetUrl.search}`)
+  await page.goto(resetUrl!)
   await page.getByTestId("new-password-input").fill(weakPassword)
   await page.getByTestId("confirm-password-input").fill(weakPassword)
   await page.getByRole("button", { name: "Reset Password" }).click()

frontend/tests/utils/mailcatcher.ts

@@ -1,62 +0,0 @@
-import type { APIRequestContext } from "@playwright/test"
-
-type Email = {
-  id: number
-  recipients: string[]
-  subject: string
-}
-
-async function findEmail({
-  request,
-  filter,
-}: {
-  request: APIRequestContext
-  filter?: (email: Email) => boolean
-}) {
-  const response = await request.get(`${process.env.MAILCATCHER_HOST}/messages`)
-
-  let emails = await response.json()
-
-  if (filter) {
-    emails = emails.filter(filter)
-  }
-
-  const email = emails[emails.length - 1]
-
-  if (email) {
-    return email as Email
-  }
-
-  return null
-}
-
-export function findLastEmail({
-  request,
-  filter,
-  timeout = 5000,
-}: {
-  request: APIRequestContext
-  filter?: (email: Email) => boolean
-  timeout?: number
-}) {
-  const timeoutPromise = new Promise<never>((_, reject) =>
-    setTimeout(
-      () => reject(new Error("Timeout while trying to get latest email")),
-      timeout,
-    ),
-  )
-
-  const checkEmails = async () => {
-    while (true) {
-      const emailData = await findEmail({ request, filter })
-
-      if (emailData) {
-        return emailData
-      }
-      // Wait for 100ms before checking again
-      await new Promise((resolve) => setTimeout(resolve, 100))
-    }
-  }
-
-  return Promise.race([timeoutPromise, checkEmails()])
-}

frontend/tests/utils/mailpit.ts

@@ -0,0 +1,46 @@
+import type { APIRequestContext } from "@playwright/test"
+
+type EmailSummary = {
+  ID: string
+}
+
+export async function waitForEmailHtml({
+  request,
+  query,
+  timeout = 5000,
+}: {
+  request: APIRequestContext
+  query: string
+  timeout?: number
+}) {
+  const deadline = Date.now() + timeout
+
+  while (Date.now() < deadline) {
+    const response = await request.get(
+      `${process.env.MAILPIT_HOST}/api/v1/search`,
+      {
+        params: { query, limit: 1 },
+      },
+    )
+    const { messages }: { messages: EmailSummary[] } = await response.json()
+    const email = messages[0]
+
+    if (email) {
+      const htmlResponse = await request.get(
+        `${process.env.MAILPIT_HOST}/view/${email.ID}.html`,
+      )
+
+      if (!htmlResponse.ok()) {
+        throw new Error(
+          `Could not get the HTML for email "${email.ID}": ${htmlResponse.status()}`,
+        )
+      }
+
+      return htmlResponse.text()
+    }
+
+    await new Promise((resolve) => setTimeout(resolve, 100))
+  }
+
+  throw new Error(`Timeout while trying to get the latest email for "${query}"`)
+}

packages/react-email/emails/new_account.tsx

@@ -25,8 +25,8 @@ export default function NewAccount({
       project_name={project_name}
     >
       <Heading>Welcome to {project_name}!</Heading>
-      <Text className="text-[15px] leading-7 text-body">Hi,</Text>
-      <Text className="text-[15px] leading-7 text-body">
+      <Text style={bodyTextStyle}>Hi,</Text>
+      <Text style={bodyTextStyle}>
         Your account has been successfully created and is ready to use. These
         are your credentials:
       </Text>
@@ -34,18 +34,32 @@ export default function NewAccount({
         <Detail label="Username" value={username} />
         <Detail label="Password" value={password} />
       </Callout>
-      <Text className="text-[15px] leading-7 text-body">
+      <Text style={bodyTextStyle}>
         Get started by signing in to your dashboard:
       </Text>
       <LinkButton href={link}>Go to Dashboard</LinkButton>
-      <Text className="text-sm leading-6 text-muted">
+      <Text style={supportingTextStyle}>
         Or copy and paste this link into your browser:
         <br />
         <Link href={link}>{link}</Link>
       </Text>
-      <Text className="text-sm leading-6 text-muted">
+      <Text style={supportingTextStyle}>
         For security reasons, change your password after your first sign in.
       </Text>
     </Layout>
   )
 }
+
+const bodyTextStyle = {
+  color: "#334155",
+  fontSize: "15px",
+  lineHeight: "26px",
+  margin: "0 0 18px",
+}
+
+const supportingTextStyle = {
+  color: "#64748b",
+  fontSize: "14px",
+  lineHeight: "23px",
+  margin: "0 0 16px",
+}

packages/react-email/emails/reset_password.tsx

@@ -24,24 +24,38 @@ export default function ResetPassword({
       project_name={project_name}
     >
       <Heading>Reset your password</Heading>
-      <Text className="text-[15px] leading-7 text-body">Hi {username},</Text>
-      <Text className="text-[15px] leading-7 text-body">
+      <Text style={bodyTextStyle}>Hi {username},</Text>
+      <Text style={bodyTextStyle}>
         We've received a request to reset the password for your {project_name}{" "}
         account. Choose a new one by clicking the button below:
       </Text>
       <LinkButton href={link}>Reset password</LinkButton>
-      <Text className="text-sm leading-6 text-muted">
+      <Text style={supportingTextStyle}>
         Or copy and paste this link into your browser:
         <br />
         <Link href={link}>{link}</Link>
       </Text>
-      <Text className="text-sm leading-6 text-muted">
+      <Text style={supportingTextStyle}>
         This link will expire in {valid_hours} hours.
       </Text>
-      <Text className="text-sm leading-6 text-muted">
+      <Text style={supportingTextStyle}>
         If you didn't request a password recovery, you can safely ignore this
         email.
       </Text>
     </Layout>
   )
 }
+
+const bodyTextStyle = {
+  color: "#334155",
+  fontSize: "15px",
+  lineHeight: "26px",
+  margin: "0 0 18px",
+}
+
+const supportingTextStyle = {
+  color: "#64748b",
+  fontSize: "14px",
+  lineHeight: "23px",
+  margin: "0 0 16px",
+}

packages/react-email/emails/test_email.tsx

@@ -19,17 +19,31 @@ export default function TestEmail({
       project_name={project_name}
     >
       <Heading>Test email</Heading>
-      <Text className="text-[15px] leading-7 text-body">Hi,</Text>
-      <Text className="text-[15px] leading-7 text-body">
+      <Text style={bodyTextStyle}>Hi,</Text>
+      <Text style={bodyTextStyle}>
         This is a test email from {project_name}. If you're reading it, email
         delivery is configured correctly.
       </Text>
       <Callout>
         <Detail label="Sent to" value={email} />
       </Callout>
-      <Text className="text-sm leading-6 text-muted">
+      <Text style={supportingTextStyle}>
         If you weren't expecting this email, you can safely ignore it.
       </Text>
     </Layout>
   )
 }
+
+const bodyTextStyle = {
+  color: "#334155",
+  fontSize: "15px",
+  lineHeight: "26px",
+  margin: "0 0 18px",
+}
+
+const supportingTextStyle = {
+  color: "#64748b",
+  fontSize: "14px",
+  lineHeight: "23px",
+  margin: "0 0 16px",
+}

packages/react-email/ui/Button.tsx

@@ -3,10 +3,21 @@ import { Button } from "@react-email/components"
 type ButtonProps = React.PropsWithChildren & { href: string }
 
 export const LinkButton = ({ children, href }: ButtonProps) => (
-  <Button
-    href={href}
-    className="bg-brand text-white rounded-md font-semibold text-sm mt-2 mb-7 inline-block text-center no-underline px-7 py-3.5"
-  >
+  <Button href={href} style={buttonStyle}>
     {children}
   </Button>
 )
+
+const buttonStyle = {
+  backgroundColor: "#00796b",
+  borderRadius: "6px",
+  color: "#ffffff",
+  display: "inline-block",
+  fontSize: "14px",
+  fontWeight: "700",
+  lineHeight: "20px",
+  margin: "8px 0 28px",
+  padding: "13px 28px",
+  textAlign: "center" as const,
+  textDecoration: "none",
+}

packages/react-email/ui/Callout.tsx

@@ -3,20 +3,44 @@ import { Section, Text } from "@react-email/components"
 type CalloutProps = React.PropsWithChildren
 
 export const Callout = ({ children }: CalloutProps) => (
-  <Section className="border-0 border-l-2 border-solid border-brand pl-5 my-7">
-    {children}
-  </Section>
+  <Section style={calloutStyle}>{children}</Section>
 )
 
 type DetailProps = { label: string; value: string }
 
 export const Detail = ({ label, value }: DetailProps) => (
-  <Text className="m-0 my-3">
-    <span className="block text-[11px] uppercase tracking-[0.08em] text-muted">
-      {label}
-    </span>
-    <span className="block text-sm font-semibold break-all font-mono mt-1">
-      {value}
-    </span>
+  <Text style={detailStyle}>
+    <span style={labelStyle}>{label}</span>
+    <br />
+    <span style={valueStyle}>{value}</span>
   </Text>
 )
+
+const calloutStyle = {
+  backgroundColor: "#f2f8f7",
+  borderLeft: "3px solid #00897b",
+  margin: "24px 0 28px",
+  padding: "6px 18px",
+}
+
+const detailStyle = {
+  margin: "12px 0",
+}
+
+const labelStyle = {
+  color: "#64748b",
+  fontSize: "11px",
+  fontWeight: "700",
+  letterSpacing: "1px",
+  lineHeight: "16px",
+  textTransform: "uppercase" as const,
+}
+
+const valueStyle = {
+  color: "#1e293b",
+  fontFamily: 'Consolas, "Courier New", monospace',
+  fontSize: "14px",
+  fontWeight: "700",
+  lineHeight: "22px",
+  wordBreak: "break-all" as const,
+}

packages/react-email/ui/Heading.tsx

@@ -3,10 +3,16 @@ import { Heading as BaseHeading } from "@react-email/components"
 type HeadingProps = React.PropsWithChildren
 
 export const Heading = ({ children }: HeadingProps) => (
-  <BaseHeading
-    as="h1"
-    className="text-2xl leading-8 font-semibold tracking-[-0.02em] text-body m-0 mb-5"
-  >
+  <BaseHeading as="h1" style={headingStyle}>
     {children}
   </BaseHeading>
 )
+
+const headingStyle = {
+  color: "#17212b",
+  fontSize: "26px",
+  fontWeight: "700",
+  letterSpacing: "-0.3px",
+  lineHeight: "34px",
+  margin: "0 0 20px",
+}

packages/react-email/ui/Layout.tsx

@@ -1,11 +1,13 @@
 import {
   Body,
+  Column,
+  Container,
   Head,
   Hr,
   Html,
   Preview,
+  Row,
   Section,
-  Tailwind,
   Text,
 } from "@react-email/components"
 
@@ -22,64 +24,88 @@ export const Layout = ({
   children,
 }: LayoutProps) => {
   return (
-    <Tailwind
-      config={{
-        theme: {
-          extend: {
-            colors: {
-              surface: "#ffffff",
-              body: "#1e293b",
-              muted: "#64748b",
-              rule: "#e2e8f0",
-              brand: {
-                DEFAULT: "#009688",
-                dark: "#00695c",
-              },
-            },
-            fontFamily: {
-              sans: [
-                "-apple-system",
-                "BlinkMacSystemFont",
-                '"Segoe UI"',
-                "Roboto",
-                "Oxygen",
-                "Ubuntu",
-                "Cantarell",
-                '"Fira Sans"',
-                '"Droid Sans"',
-                '"Helvetica Neue"',
-                "sans-serif",
-              ],
-            },
-          },
-        },
-      }}
-    >
-      <Html lang="en" dir="ltr">
-        <Head>
-          <title>{title}</title>
-          <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1.0"
-          />
-        </Head>
-        {preview ? <Preview>{preview}</Preview> : null}
-        <Body className="bg-surface font-sans text-body max-w-[560px] w-full mx-auto my-0 py-12 px-6">
-          <Section>
-            <Hr className="border-0 border-t-2 border-solid border-brand w-8 m-0" />
-            <Text className="text-body text-[13px] font-semibold uppercase tracking-[0.1em] mt-4 mb-9">
-              {project_name}
-            </Text>
-          </Section>
-          <Section>{children}</Section>
-          <Hr className="border-0 border-t border-solid border-rule mt-10 mb-5" />
-          <Section>
-            <Text className="text-xs leading-5 text-muted m-0">
-              © {new Date().getFullYear()} {project_name}. All rights reserved.
-            </Text>
-          </Section>
-        </Body>
-      </Html>
-    </Tailwind>
+    <Html lang="en" dir="ltr">
+      <Head>
+        <title>{title}</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      </Head>
+      {preview ? <Preview>{preview}</Preview> : null}
+      <Body style={bodyStyle}>
+        <Container style={containerStyle}>
+          <Row>
+            <Column style={contentStyle}>
+              <Section>
+                <Hr style={brandRuleStyle} />
+                <Text style={brandStyle}>{project_name}</Text>
+              </Section>
+              <Section>{children}</Section>
+              <Hr style={footerRuleStyle} />
+              <Section>
+                <Text style={footerStyle}>
+                  © {new Date().getFullYear()} {project_name}. All rights
+                  reserved.
+                </Text>
+              </Section>
+            </Column>
+          </Row>
+        </Container>
+      </Body>
+    </Html>
   )
 }
+
+const fontFamily =
+  '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif'
+
+const bodyStyle = {
+  backgroundColor: "#f4f7f6",
+  color: "#1e293b",
+  fontFamily,
+  margin: "0",
+  padding: "32px 12px",
+}
+
+const containerStyle = {
+  backgroundColor: "#ffffff",
+  border: "1px solid #dce7e5",
+  borderRadius: "8px",
+  boxSizing: "border-box" as const,
+  margin: "0 auto",
+  maxWidth: "560px",
+  width: "100%",
+}
+
+const contentStyle = {
+  padding: "40px 36px 32px",
+}
+
+const brandRuleStyle = {
+  border: "0",
+  borderTop: "3px solid #00897b",
+  margin: "0 0 16px",
+  width: "32px",
+}
+
+const brandStyle = {
+  color: "#334155",
+  fontSize: "13px",
+  fontWeight: "700",
+  letterSpacing: "1px",
+  lineHeight: "20px",
+  margin: "0 0 32px",
+  textTransform: "uppercase" as const,
+}
+
+const footerRuleStyle = {
+  border: "0",
+  borderTop: "1px solid #dce7e5",
+  margin: "36px 0 18px",
+  width: "100%",
+}
+
+const footerStyle = {
+  color: "#64748b",
+  fontSize: "12px",
+  lineHeight: "20px",
+  margin: "0",
+}

packages/react-email/ui/Link.tsx

@@ -1,7 +1,15 @@
+import { Link as EmailLink } from "@react-email/components"
+
 type LinkProps = React.PropsWithChildren & { href: string }
 
 export const Link = ({ children, href }: LinkProps) => (
-  <a href={href} className="text-brand-dark underline break-all">
+  <EmailLink href={href} style={linkStyle}>
     {children}
-  </a>
+  </EmailLink>
 )
+
+const linkStyle = {
+  color: "#00695c",
+  textDecoration: "underline",
+  wordBreak: "break-all" as const,
+}

release-notes.md

@@ -2,6 +2,26 @@
 
 ## Latest Changes
 
+### Fixes
+
+* 🐛 Fix Sonner toast theme sync. PR [#2450](https://github.com/fastapi/full-stack-fastapi-template/pull/2450) by [@chris-bs23](https://github.com/chris-bs23).
+* 🐛 Add background to the sticky layout header. PR [#2384](https://github.com/fastapi/full-stack-fastapi-template/pull/2384) by [@istoutjesdijk](https://github.com/istoutjesdijk).
+
+### Refactors
+
+* ✅ Simplify password reset E2E tests. PR [#2453](https://github.com/fastapi/full-stack-fastapi-template/pull/2453) by [@alejsdev](https://github.com/alejsdev).
+* 💄 Refactor email templates and components for improved styling. PR [#2451](https://github.com/fastapi/full-stack-fastapi-template/pull/2451) by [@alejsdev](https://github.com/alejsdev).
+* ♻️ Replace Mailcatcher with Mailpit for local email testing. PR [#2436](https://github.com/fastapi/full-stack-fastapi-template/pull/2436) by [@alejsdev](https://github.com/alejsdev).
+
+### Docs
+
+* 📝 Update README.md with Mailpit and React Email. PR [#2452](https://github.com/fastapi/full-stack-fastapi-template/pull/2452) by [@alejsdev](https://github.com/alejsdev).
+* 📝 Simplify project documentation. PR [#2442](https://github.com/fastapi/full-stack-fastapi-template/pull/2442) by [@tiangolo](https://github.com/tiangolo).
+
+### Internal
+
+* ⬆️ Bump setup-uv action to 10.0.1. PR [#2458](https://github.com/fastapi/full-stack-fastapi-template/pull/2458) by [@YuriiMotov](https://github.com/YuriiMotov).
+
 ## 0.12.0 (2026-08-12)
 
 ### Features