ViteReact作品集

full-stack-fastapi-template — Vite 作品集模板

作者 FrankieGhaf

fastapi/full-stack-fastapi-template 的公开作品集副本，提供 FastAPI + React 全栈应用骨架，含 JWT 登录、管理后台与 Docker Compose 部署配置。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

1 个预览视图
作者提供的预览
作者提供的预览

来自项目 README 的原始预览。

目前有 1 张原始预览，可打开完整图片查看设计细节。

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-02查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

01

后端基于 FastAPI，使用 SQLModel 操作 PostgreSQL，Pydantic 负责数据校验与配置

02

前端使用 React、TypeScript、Vite、Tailwind CSS 与 shadcn/ui，由 FastAPI 同域托管

03

内置 JWT 认证、密码哈希、邮件找回密码与 React Email 邮件模板

04

提供登录页、管理后台、条目管理页与深色模式界面

05

测试覆盖 Pytest 与 Playwright，CI/CD 基于 GitHub Actions

06

支持 FastAPI Cloud 或 Docker Compose 自托管部署，后者以 Traefik 处理 HTTPS

模板详细介绍

这是 fastapi/full-stack-fastapi-template 的公开作品集副本，仓库本身不包含额外定制内容，主要用于展示该全栈模板的结构与界面。模板由 Python 后端与 React 前端组成：后端使用 FastAPI 提供 API，通过 SQLModel 与 PostgreSQL 交互，并用 Pydantic 做数据校验与配置管理；前端使用 React、TypeScript、Vite、Tailwind CSS 与 shadcn/ui，由 FastAPI 在同一域名下托管，并带有自动生成的前端客户端。

功能层面，模板内置 JWT 认证、默认密码哈希、基于邮件的密码找回、React Email 邮件模板，以及开发期用于本地邮件测试的 Mailpit。界面包含登录页、管理后台与条目管理页，并支持深色模式。测试方面提供 Pytest 与 Playwright，CI/CD 基于 GitHub Actions。

部署路径有两条：FastAPI Cloud，或使用 Docker Compose 自托管，后者以 Traefik 作为反向代理并自动处理 HTTPS。仓库 README 指向 backend、frontend、development、deployment 与 deployment-docker-compose 等分册文档。

需要注意，本条目收录的是公开仓库中采用 MIT 许可的版本，许可范围仅覆盖该版本代码，不覆盖演示图片、字体、图标等第三方素材，也不代表域名、托管、数据库等外部服务免费。

ViteReact作品集

适合你的项目吗？

适用场景

  • 需要一个带登录与管理后台的全栈项目起点时，可直接基于该模板创建新仓库
  • 想参考 FastAPI 与 React 在同一域名下协作、并自动生成前端客户端的组织方式
  • 需要在本地用 Docker Compose 起 PostgreSQL、Traefik 与 Mailpit 等配套服务
  • 评估以 JWT 认证和邮件找回密码为默认方案的后台应用结构

适合人群

  • 熟悉 Python 与 TypeScript，希望快速搭建全栈后台原型的开发者
  • 需要管理后台、用户认证与条目管理基础界面的内部工具项目
  • 倾向使用 Docker Compose 自托管并希望反向代理与 HTTPS 已配置好的团队

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

  1. 1

    在 GitHub 上点击 Use this template 创建新仓库，再按需修改项目名称与配置

  2. 2

    本地开发流程、.env 配置与 Docker Compose 服务说明见 development.md

  3. 3

    后端与前端各自的开发说明分别位于 backend/README.md 与 frontend/README.md

  4. 4

    部署方式见 deployment.md（FastAPI Cloud）或 deployment-docker-compose.md（自托管）

  5. 5

    演示图片、字体、图标等第三方素材需单独核对其许可，外部服务可能另行收费

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
  • 部署路径之一依赖 FastAPI Cloud 外部托管服务，使用该服务可能涉及账号注册与费用，并非模板代码本身免费提供。
  • 本地邮件测试依赖 Mailpit 这一外部服务/工具，需自行安装运行，不属于模板代码自带能力。
  • 自托管部署需自行准备 Docker Compose 环境及 PostgreSQL、Traefik 等配套服务，相关基础设施成本由使用者承担。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

☁️ [FastAPI Cloud](https://fastapicloud.com) for deployment.

README 原文

📬 [Mailpit](https://mailpit.axllent.org) for local email testing during development.

README 原文

Self-hosted deployment with Docker Compose: [deployment-docker-compose.md](./deployment-docker-compose.md).

README 原文
https://github.com/FrankieGhaf/full-stack-fastapi-template/blob/master/LICENSEhttps://github.com/FrankieGhaf/full-stack-fastapi-template/blob/master/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-04。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 85 / 100
技术栈
Vite · React
网站类型
作品集
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-10-02
截图检查日期
2026-10-04

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Vite。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: [email protected] · 2026-10-04

查看当时使用的来源资料

SHA-256: 0efd6a53be63b7de181bff854f601a87e6be5b4ab39e69ad696505122455931d

2026-10-04T12:25:33.313Z

来源文件 / 仓库
# Full Stack FastAPI Template

[![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

- ⚡ [**FastAPI**](https://fastapi.tiangolo.com) for the Python backend API.
  - 🧰 [SQLModel](https://sqlmodel.tiangolo.com) for the Python SQL database interactions (ORM).
  - 🔍 [Pydantic](https://docs.pydantic.dev), used by FastAPI, for the data validation and settings management.
  - 💾 [PostgreSQL](https://www.postgresql.org) as the SQL database.
- 🚀 [React](https://react.dev) for the frontend.
  - 🧩 Built into the backend application and served by FastAPI on the same domain as the API.
  - 💃 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.
  - 🦇 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.
- ✉️ [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).
- 🏭 CI (continuous integration) and CD (continuous deployment) based on GitHub Actions.

### Dashboard Login

![Dashboard login screenshot](img/login.png)

### Dashboard - Admin

![Admin dashboard screenshot](img/dashboard.png)

### Dashboard - Items

![Items dashboard screenshot](img/dashboard-items.png)

### Dashboard - Dark Mode

![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)

## How to Use It

Click the **Use this template** button at the top of this page to create a new repository.

## Backend Development

Backend docs: [backend/README.md](./backend/README.md).

## Frontend Development

Frontend docs: [frontend/README.md](./frontend/README.md).

## Deployment

FastAPI Cloud deployment: [deployment.md](./deployment.md).

Self-hosted deployment with Docker Compose: [deployment-docker-compose.md](./deployment-docker-compose.md).

## Development

General development docs: [development.md](./development.md).

This includes the local FastAPI and Vite workflow, Docker Compose services, `.env` configuration, and more.

## Release Notes

Check the file [release-notes.md](./release-notes.md).

## License

The Full Stack FastAPI Template is licensed under the terms of the MIT license.
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

Resumify

Resumify

Free, privacy-first resume builder — 6 ATS-friendly templates, full customization, JSON import/export. No sign…

Vite · 作品集

showlit

showlit

✨ Showlit - A modern and clean template for creating a personal website

Vite · 作品集

folium

folium

Professional developer portfolio boilerplate (React • TypeScript • Tailwind • Vite) with simple content custom…

Vite · 作品集

kurizu-discord

kurizu-discord

A Discord themed website built using React & Vite

Vite · 作品集

about-me-personal-portfolio-website-template

about-me-personal-portfolio-website-template

Simple Personal Website Template, built with bootstrap and vite js project.

Vite · 作品集

HackFolio

HackFolio

A high-performance, SEO-optimized hacker-themed portfolio website tailored for for ethical hackers, penetratio…

Vite · 作品集