30 多个应用创意，包含完整源代码

这是技术进步的激动人心的时刻。

作为开发人员，我们所有人都需要从事一些可以创造收入或帮助建立声誉的副项目。

今天，我们将介绍 10 个精彩的项目，并探索使用每个项目构建的 3-4 个热门应用。总共超过 30 个项目，您可以访问代码进行学习。

这些将需要您编码一段时间，所以让我们开始吧！

动图

1. CopilotKit - 数小时内为您的产品提供 AI 辅助驾驶。

在 React 中集成 AI 功能并非易事，Copilot 应运而生。Copilot 是一个简单快捷的解决方案，可将生产就绪的 Copilot 集成到任何产品中！

您可以使用两个 React 组件将关键的 AI 功能集成到 React 应用中。它们还提供内置（完全可定制）的 Copilot 原生 UX 组件，例如<CopilotKit />、<CopilotPopup />、<CopilotSidebar />、<CopilotTextarea />。

使用以下 npm 命令开始。

npm i @copilotkit/react-core @copilotkit/react-ui

Copilot Portal 是 CopilotKit 提供的组件之一，CopilotKit 是一个应用内 AI 聊天机器人，可以查看当前应用状态并在应用内执行操作。它可以通过插件与应用前端和后端以及第三方服务进行通信。

这就是您集成聊天机器人的方式。

所有与 CopilotKit 交互的组件都必须CopilotKit封装在内。建议您也从这里开始CopilotSidebar（以后可以切换到其他 UI 提供程序）。

"use client";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css"; 

export default function RootLayout({children}) {
  return (
    <CopilotKit url="/path_to_copilotkit_endpoint/see_below">
      <CopilotSidebar>
        {children}
      </CopilotSidebar>
    </CopilotKit>
  );
}

您可以使用此快速入门指南设置 Copilot Backend 端点。

之后，您就可以让 Copilot 采取行动了。您可以阅读如何提供外部上下文useMakeCopilotReadable。您可以使用React useMakeCopilotDocumentReadableHooks来实现。

"use client";

import { useMakeCopilotActionable } from '@copilotkit/react-core';

// Let the copilot take action on behalf of the user.
useMakeCopilotActionable(
  {
    name: "setEmployeesAsSelected", // no spaces allowed in the function name
    description: "\"Set the given employees as 'selected'\","
    argumentAnnotations: [
      {
        name: "employeeIds",
        type: "array", items: { type: "string" }
        description: "\"The IDs of employees to set as selected\","
        required: true
      }
    ],
    implementation: async (employeeIds) => setEmployeesAsSelected(employeeIds),
  },
  []
);

您可以阅读文档并查看演示视频。

您可以轻松集成 Vercel AI SDK、OpenAI API、Langchain 和其他 LLM 提供程序。您可以按照本指南将聊天机器人集成到您的应用程序中。

其基本思想是在几分钟内构建可用于基于 LLM 的应用程序的 AI 聊天机器人。

用例非常广泛，作为开发人员，我们绝对应该在下一个项目中尝试使用 CopilotKit。

CopilotKit 在 GitHub 上拥有 4.2k+ 颗星，并且发布了 200 多个版本，这意味着它们正在不断改进。

明星 CopilotKit ⭐️

🎯 使用 CopilotKit 构建的热门应用程序。

我们可以使用 CopilotKit 构建许多创新应用程序，因此让我们探索一些脱颖而出的应用程序！

✅人工智能博客平台。

您可以阅读本文Next.js，使用Langchain、、Supabase和CopilotKit来构建这个神奇的应用程序。

LangChain & Tavily 用于网络搜索 AI 代理，Supabase 用于存储和检索博客平台文章数据，而 CopilotKit 用于将 AI 集成到应用程序中。

您可以检查GitHub 存储库。

✅文本到 Powerpoint 应用程序。

Next.js您可以使用、、OpenAI和阅读本文CopilotKit来构建“文本到 Powerpoint”应用程序。

您可以检查GitHub 存储库。

✅ V0.dev 克隆。

如果您不熟悉，Vercel 的 V0 是一款人工智能工具，可让您根据提示生成 UI，以及许多其他有用的功能。

您可以使用Next.js、GPT4和CopilotKit来创建 V0 的克隆版本。这篇文章入选了 Top 7，总的来说，这是一个值得添加到您的作品集中的优秀项目。

您可以检查GitHub 存储库。

✅与您的简历聊天。

Next.js您可以使用、、OpenAI和阅读本文CopilotKit来构建这个很棒的工具。

你不仅可以用 ChatGPT 生成简历，还可以将其导出为 PDF，甚至可以通过与它对话来进一步完善。是不是很酷呢 :)

您可以检查GitHub 存储库。

2. Appwrite——您的后端减少了麻烦。

Appwrite 的开源平台允许您向您的产品添加 Auth、DB、功能和存储，并构建任何规模的任何应用程序，拥有您的数据，并使用您喜欢的编码语言和工具。

类似的选择是 Supabase，尽管它们有相似之处，但在很多方面却有很大不同。Restack 非常详细地介绍了Appwrite 与 Supabase 的对比。快来看看吧！

他们有很好的贡献指南，甚至不厌其烦地详细解释架构。

使用以下 npm 命令开始。

npm install appwrite

您可以创建这样的登录组件。

"use client";
import { useState } from "react";
import { account, ID } from "./appwrite";

const LoginPage = () => {
  const [loggedInUser, setLoggedInUser] = useState(null);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [name, setName] = useState("");

  const login = async (email, password) => {
    const session = await account.createEmailSession(email, password);
    setLoggedInUser(await account.get());
  };

  const register = async () => {
    await account.create(ID.unique(), email, password, name);
    login(email, password);
  };

  const logout = async () => {
    await account.deleteSession("current");
    setLoggedInUser(null);
  };

  if (loggedInUser) {
    return (
      <div>
        <p>Logged in as {loggedInUser.name}</p>
        <button type="button" onClick={logout}>
          Logout
        </button>
      </div>
    );
  }

  return (
    <div>
      <p>Not logged in</p>
      <form>
        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <input
          type="text"
          placeholder="Name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <button type="button" onClick={() => login(email, password)}>
          Login
        </button>
        <button type="button" onClick={register}>
          Register
        </button>
      </form>
    </div>
  );
};

export default LoginPage;

您可以阅读文档。

Appwrite 可以非常轻松地构建具有开箱即用扩展功能的可扩展后端应用程序。

Appwrite 最近发布的“Init”带来了一些激动人心的功能。我目前还不清楚 init 的具体功能，所以请留言告诉我们更多信息。

它有一些很酷的功能，有助于提升我们的应用水平。好奇心爆棚 :D

我很高兴它能与 Twilio、Vonage 和 Mailgun 连接。更多选择意味着更好的产品。

Appwrite 在 GitHub 上拥有 40k+ 颗星，并且即将v1.5发布。

明星 Appwrite ⭐️

🎯 使用 Appwrite 构建的热门应用程序。

Appwrite 非常受欢迎，尤其因为它易于使用。以下是一些很棒的项目，你可以从中汲取灵感。

✅ FoodMagic - 增强现实食品应用程序。

FoodMagic 是一种利用增强现实和令人惊叹的用户界面进行食品配送的独特方式。

它是使用AppwriteFlutter 构建的。

涉及 Appwrite 函数、数据库、存储和更多概念，因此您可以通过它学到很多东西。

您可以检查GitHub 存储库。

✅回购评级员。

该项目允许您从开发人员体验 (DX) 的角度对 GitHub 存储库进行评级。

它是使用Appwrite、Headless UI (React)、Next.js和构建的Tailwind CSS。

您可以检查GitHub 存储库并查看实时工作情况。

✅ Twitter 克隆- FreeCodeCamp（YouTube）。

它具有各种功能，例如使用电子邮件和密码注册和登录、发布推文文本、图像和链接、识别和存储主题标签、显示推文、喜欢推文、转发推文、评论/回复、关注用户、搜索用户、显示关注者、关注和最近的推文、编辑用户个人资料、显示带有特定主题标签的推文，以及名为“Twitter Blue”的高级功能。

老师还添加了一个通知选项卡，当有人回复、关注、点赞或转发你的推文时，它会显示通知。完成本教程后，你将拥有一个功能齐全的 Twitter 克隆版，你可以进一步自定义和改进它。意义非凡 :)

他使用了Flutter、、Appwrite和，Riverpod并且该教程超过 9 个小时，因此非常长。

✅ Dart 在线编译器

这款应用允许用户编写并运行小型 Dart 程序，无需在系统中安装 Dart SDK。此应用使用 Appwrite 函数来运行 Dart 代码。

它是使用Appwrite、 和构建的Flutter。

这使用了 Appwrite Auth、函数和数据库来进行工作。

您可以检查GitHub 存储库。

3.重新发送——面向开发人员的电子邮件 API。

你可以使用 React 构建和发送电子邮件。这是 2023 年最受追捧的产品之一。

他们提供了许多 SDK 选项，因此您不必从您喜欢的技术堆栈切换。

Resend 非常值得信赖，很多公司，比如 Payload 和 Dub，都在使用它。您可以查看客户列表。

使用以下 npm 命令开始。

npm install @react-email/components -E

这就是将它与 next.js 项目集成的方法。

import { EmailTemplate } from '@/components/email-template';
import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST() {
  const { data, error } = await resend.emails.send({
    from: 'onboarding@resend.dev',
    to: 'delivered@resend.dev',
    subject: 'Hello world',
    react: EmailTemplate({ firstName: 'John' }),
  });

  if (error) {
    return Response.json({ error });
  }

  return Response.json(data);
}

您可以阅读文档。

如果您是一名教程爱好者，我推荐 YouTube 上的这个播放列表系列，它涵盖了大部分内容并且易于理解。

它的基本理念是打造一个简洁优雅的界面，让您几分钟内即可开始发送电子邮件。它兼容您常用编程语言的 SDK，可直接嵌入您的代码中。

由于显而易见的原因，React 电子邮件在 GitHub 上拥有最多星号（12k+），并且有超过 5000 名开发人员在他们的应用程序中使用它。

星标重新发送⭐️

🎯 使用“重新发送”功能发送电子邮件的热门应用程序。

让我们看看一些使用 Resend 发送电子邮件的应用程序。

✅ Gitroom。

提前安排好所有社交媒体帖子和文章。您还可以与其他团队成员合作，交换或购买帖子。

它是使用NX (Monorepo)、、、、、和构建的NextJS (React)。NestJSPrisma (Default to PostgreSQL)RedisResend

您可以查看GitHub 存储库和网站。

Gitroom 在 GitHub 上拥有 3k+ 颗星。

✅任意邮件。

Anymail 让您可以使用您选择的事务电子邮件服务提供商 (ESP) 在 Django 中发送和接收电子邮件。

您可以查看GitHub 存储库和网站。他们在 GitHub 上有 1.5k+ 个 Star，并且是 v10 版本。

✅徽章。

Badget 旨在通过用户友好的界面和强大的后端简化财务管理。

它是使用Next.js 14、、、、、、、、和构建的。Turborepo​​Drizzle ORMPlanetscaleClerkResendReact EmailShadcn/uiStripe

您可以检查GitHub 存储库。

该项目很快将在 GitHub 上达到 2k Stars。

4. Shadcn UI - 您可以复制并粘贴到应用程序中的组件。

这个开源项目无需介绍。
由于其简单性、自定义选项和灵活性，它一经推出就获得了巨大的成功。

然而，我确实同意它并不像看起来那么简单，特别是如果你不熟悉它的语法和结构。

使用以下命令（Next.js 应用程序）开始。

npx shadcn-ui@latest init

其余部分将自动完成，您可以导入组件并相应地使用它们。

您可以根据所使用的框架阅读文档和安装指南。

Shadcn UI 在 GitHub 上拥有 55k+ 颗星，并有 3k+ 名开发人员在使用。

Star Shadcn UI ⭐️

🎯 使用 Shadcn UI 构建的热门应用程序。

我不会介绍非常简单的项目，所以不用担心。

✅ 10000+ shadcn/ui 主题。

有了它，你可以探索、保存、生成新主题，甚至可以为随机主题点赞。这是一个很棒的项目。

用户界面非常糟糕。

它是使用许多包构建的，例如、、，react-query当然还有。FramerZodshadcn ui

您可以查看GitHub 存储库和现场演示。

它在 GitHub 上拥有 600 多个星标。

✅ Openv0。

我之前一直在研究 v0.dev，但后来发现它不是开源的。
我不会放弃这个想法。

Openv0 是另一个使用 AI 生成 UI 组件的项目。组件生成是一个多通道流程，每个通道都是一个完全独立的插件。

它支持 React、Next.js 和 Svelte 等前端框架。使用 Flowbite、NextUI 和 Shadcn 构建。

检查GitHub 存储库并阅读安装指南。

你也可以在Replit上运行它。它在 GitHub 上有 3k+ 个 Stars。

许多项目都使用Shadcn，因此请自行探索。

5. Buildship——低代码可视化后端构建器。

对于您正在构建的应用程序，使用无代码应用程序构建器（FlutterFlow、Webflow、Framer、Adalo、Bubble、BravoStudio……）或前端框架（Next.js、React、Vue……），您需要一个后端来支持可扩展的 API、安全的工作流、自动化等。

BuildShip 为您提供了一种完全可视化的方式，以易于使用的完全托管体验可扩展地构建这些后端任务。

这意味着您无需在云平台上进行任何繁琐的部署，也无需执行 DevOps。只需构建并交付，即可立即使用 🚀

他们甚至与 TypeSense 合作并且发展非常迅速！

我尝试过 Buildship，它非常强大。

星际建造舰⭐️

🎯 使用 Buildship 构建的热门应用程序。

大部分资源都是视频，但值得一看。官方 YouTube 频道上有很多教程，但以下是其中一些比较有意思的。

✅使用低代码和 AI 构建旅行 WebApp。

它是使用Buildship和构建的Locofy。Locofy.ai 用于从设计到应用程序前端的转换，而 BuildShip.com 用于应用程序的后端。

它还可以计算行程的实时距离和费用。他们使用 Figma 进行设计。

✅ Telegram 上的 AI 助手。

你可以使用 OpenAI Assistant 和 BuildShip 创建一个智能 Telegram 机器人，无需编写代码。这将帮助你与数据进行对话。看起来很刺激，对吧 :)

✅ AI YouTube 时间戳生成器。

相信我，本教程会帮你学到很多东西。你可以查看开发者版块中关于自定义提示符的未发布帖子。

您可以检查前端代码。

6. Taipy——将数据和 AI 算法融入可投入生产的 Web 应用程序中。

Taipy 是一个开源 Python 库，用于轻松进行端到端应用程序开发，具有假设分析、智能管道执行、内置调度和部署工具。

我相信大多数人都不明白 Taipy 是用来为基于 Python 的应用程序创建 GUI 界面并改进数据流管理的。

因此，您可以绘制数据集的图表并使用类似 GUI 的滑块来提供使用其他有用功能来处理数据的选项。

Streamlit 虽然是一款热门工具，但在处理大型数据集时性能会显著下降，因此不适用于生产级应用。
而 Taipy 则在兼顾性能的同时，提供了简洁易用的特性。试用 Taipy，您将亲身体验其用户友好的界面和高效的数据处理能力。

在底层，Taipy 利用各种库来简化开发并增强功能。

使用以下命令开始。

pip install taipy

他们还使用分布式计算提高了性能，但最好的部分是 Taipy，它的所有依赖项现在都与 Python 3.12 完全兼容，因此您可以在使用 Taipy 进行项目时使用最新的工具和库。

您可以阅读文档。

另外一个很有用的地方是，Taipy 团队提供了一个名为Taipy Studio的 VSCode 扩展来加速 Taipy 应用程序的构建。

如果您想通过博客了解代码库结构，可以阅读HuggingFace 撰写的《使用 Taipy 为您的 Python LLM 创建 Web 界面》 。

Taipy 在 GitHub 上拥有 8k+ 颗星，并且正在v3发布中，因此它们正在不断改进。

星太皮⭐️

🎯 使用 Taipy 构建的热门应用程序。

尝试新技术通常比较困难，但 Taipy 提供了 10 多个包含代码和完整文档的演示教程，方便您学习。我们将介绍一些其他开发者构建的项目。

✅明智地使用钱包。

WalletWise 就像我们财务上的贴心助手，帮我们追踪收入和支出。它使用 Gemini 进行交易，使用 Taipy 来了解支出情况。

对用户的收入和支出进行分析，以数学方式显示，并展示 7 条做出更好、更明智的财务决策的技巧。

它还有一个可视化工具，您可以在其中查看不同的标题以了解有关支出的更多信息。

就创造力而言，这是下面提到的所有内容中最好的。

✅人口普查。

通过 Taipy 支持的“人口普查”项目，将数据编织成动态可视化效果，揭开 2021 年尼泊尔的住房和人口故事。

它有很多选项，所以如果您想用更少的资源学到更多的东西，这是最好的选择！

✅太平象棋。

这是我最喜欢的应用程序，因为我喜欢国际象棋。哈哈！

这是一个基于 20,000 盘棋局的国际象棋可视化工具。您可以查看所有棋局、棋手的开局、对手、常用开局以及最成功的开局。您还可以查看数据热图和图表。

您还可以查看奥运奖牌 Taipy 应用程序，该应用程序显示一个仪表板，其中包含有关奥运奖牌、 Covid 仪表板和数据可视化的信息。

7. xyflow——使用 React 构建基于节点的 UI。

XYFlow 是一个强大的开源库，用于使用 React 或 Svelte 构建基于节点的 UI。它是一个 Mono 仓库，提供React Flow和Svelte Flow 两个版本。让我们进一步了解 React Flow 的功能。

您可以观看此视频，在 60 秒内了解 React Flow。

部分功能在专业模式下可用，但免费套餐中的功能足以构建高度交互的流程。React Flow 使用 TypeScript 编写，并使用 Cypress 进行测试。

使用以下 npm 命令开始。

npm install reactflow

下面演示如何创建两个节点Hello& World，并通过一条边连接。节点具有预定义的初始位置以防止重叠，并且我们还应用了样式以确保有足够的空间来渲染图形。

import ReactFlow, { Controls, Background } from 'reactflow';
import 'reactflow/dist/style.css';

const edges = [{ id: '1-2', source: '1', target: '2' }];

const nodes = [
  {
    id: '1',
    data: { label: 'Hello' },
    position: { x: 0, y: 0 },
    type: 'input',
  },
  {
    id: '2',
    data: { label: 'World' },
    position: { x: 100, y: 100 },
  },
];

function Flow() {
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow nodes={nodes} edges={edges}>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}

export default Flow;

它看起来就是这样。你还可以添加标签、更改类型，并使其具有交互性。

您可以在 React Flow 的 API 参考中查看完整的选项列表以及组件、钩子和实用程序。

最棒的是，您还可以添加自定义节点。在自定义节点中，您可以渲染所需的一切。您可以定义多个源和目标句柄，并渲染表单输入或图表。您可以查看这个codesandbox 的示例。

您可以阅读文档并查看Create React App、Next.js 和 Remix 的示例 React Flow 应用程序。

React Flow 附带了几个额外的插件组件，可以帮助您使用 Background、Minimap、Controls、Panel、NodeToolbar 和 NodeResizer 组件制作更高级的应用程序。

例如，你可能注意到许多网站的背景中都带有圆点，这增强了美观度。要实现这种模式，你只需使用 React Flow 中的 Background 组件即可。

import { Background } from 'reactflow';

<Background color="#ccc" variant={'dots'} />  // this will be under React Flow component. Just an example.

如果你正在寻找一篇快速阅读的文章，我推荐你看看Webkid 开发的React Flow - 一个用于渲染交互式图形的库。React Flow 由 Webkid 开发和维护。

它在 GitHub 上拥有超过 1.9 万颗星，并且v11.10.4持续改进，npm 包的每周下载量超过 40 万次。它是您可以轻松使用的最佳项目之一。

星 xyflow⭐️

🎯 使用 React Flow 构建的热门应用程序。

很多公司都在使用 React Flow，比如 Zapier 和 Stripe。它足够可靠，值得使用。由于 React 更受欢迎，所以我就不介绍用 Svelte Flow 开发的应用了。

✅条纹文档。

Stripe 使用它，特别是在展示结账如何运作时。

您可以阅读完整的文档。

✅ Shaderfrog。

我选择这个是因为这个项目太酷了。

✅类型形式。

Typeform 使用它来展示如何使用逻辑图向表单添加逻辑。

您还可以在FlowwiseAI和Doubleloop上找到它的使用情况。顺便提一下，Supabase 是 GitHub 上 XYflow 的赞助商之一。

8. Pieces——您的工作流程副驾驶。

Pieces 是一款支持人工智能的生产力工具，旨在通过智能代码片段管理、情境化副驾驶交互和有用材料的主动呈现来帮助开发人员管理其工作流程的混乱。

它最大限度地减少了上下文切换，简化了工作流程，提升了您的整体开发体验，同时通过完全离线的 AI 方法保护了您工作的隐私和安全。太棒了 :D

它与您最喜欢的工具无缝集成，以简化、理解和提升您的编码流程。

它具有比我们看到的更多令人兴奋的功能。

• 它能以闪电般的搜索速度帮您找到所需的资料，并允许您根据偏好使用自然语言、代码、标签和其他语义进行查询。堪称“您的个人离线谷歌”。

• Pieces 使用 OCR 和 edge-ML 升级了屏幕截图功能，以提取代码并修复无效字符。因此，您可以获得极其准确的代码提取和深度元数据丰富。

您可以查看Pieces 提供的完整功能列表。

您可以阅读文档并访问网站。

他们为 Pieces OS 客户端提供了大量 SDK 选项，包括TypeScript、Kotlin、Python和Dart。

星星碎片⭐️

🎯 使用 Pieces 构建的热门应用程序。

由于它更像是一种工具，所以不会有那么多项目，但开发人员仍然使用它来构建很棒的项目。

✅办公桌伙伴。

一个社区项目，通过分析和 Copilot Conversation 帮助您了解、评估和改善您的编码习惯。

主要使用的语言是 TypeScript。

您可以检查GitHub 存储库。

✅ CLI 代理。

一个全面的命令行界面 (CLI) 工具，旨在与 Pieces OS 无缝交互。它提供一系列功能，例如资产管理、应用程序交互以及与各种 Pieces OS 功能的集成。

主要使用的语言是 Python。

您可以检查GitHub 存储库。

✅ Streamlit 和 Pieces。

Pieces Copilot Streamlit Bot 是一款使用 Streamlit 构建的交互式聊天机器人应用程序，旨在为用户提供无缝界面来实时提问和接收答案。

主要使用的语言是 Python。

您可以检查GitHub 存储库。

9. Typesense – 快速、容忍拼写错误、内存模糊搜索引擎。

Typesense 是一个开源的、容错的搜索引擎，针对即时（通常少于 50 毫秒）的边输入边搜索体验和开发人员的工作效率进行了优化。

如果您听说过 ElasticSearch 或 Algolia，那么一个很好的理解 Typesense 的方式是，它是 Algolia 的开源替代品，解决了一些关键问题，并且是更易于使用的包含电池的 ElasticSearch 替代品。

您可以在Algolia、ElasticSearch、Meilisearch 和 Typesense 上对它们进行比较。

它是一种快速、容错、内存模糊搜索引擎，用于构建令人愉悦的搜索体验

您可以使用此命令安装 Typesense 的 python 客户端。

pip install typesense

根据文档，在这些情况下不应使用 Typesense。

a. Typesense 不应用作主要数据存储，它存储的是数据的唯一副本。

b. Typesense 通常不适合搜索应用程序日志。

您可以阅读文档和安装指南。

我建议您阅读快速入门指南，它将逐步指导您如何安装和构建搜索界面。他们还提供了清晰的基准测试，数据集高达 28M，以便您检查最终的性能。

如果你更喜欢教程，我推荐你观看这个YouTube 视频。你将获得 Typesense 的概述，作者还会向你展示一个端到端的演示。

TypeSense 在 GitHub 上拥有超过 17000 个 Star，目前版本号已达 26，这简直太神奇了。它使用 C++ 构建。

星级 Typesense ⭐️

🎯 使用 Typesense 构建的热门应用程序。

一些使用 Typesense 的现场演示和应用程序。

✅ 现场演示。

他们还提供现场演示，展示 Typesense 在大型数据集上的运行情况，例如：

• 搜索来自 Linux 内核的 1M Git 提交消息- GitHub Repo

• 从 MusicBrainz 搜索 3200 万首歌曲数据集- GitHub Repo

• 具有预先输入功能的拼写检查器，包含 333K 个英文单词- GitHub Repo

• 从 OpenLibrary 搜索 2800 万本图书数据集- GitHub Repo

• 地理搜索/浏览体验- GitHub Repo

• 电子商务浏览和搜索体验- GitHub Repo

• 搜索 2M 烹饪食谱- GitHub Repo

其他一些公司则使用 Typesense 云来完成整个工作。

这些公司包括 Codecademy、Logitech、Buildship、n8n 和 Storipress CMS。

10. Payload——构建未来网络的最快方式。

构建现代后端和管理 UI 的最佳方案。Payload 无需任何黑魔法，全 TypeScript 编写，完全开源，它既是一个应用框架，又是一个无头内容管理系统 (CMS)。这是我全心全意欣赏的少数项目之一。

他们的网站拥有最简洁的用户界面之一，我看过超过1000个网站，其中甚至有一些非常疯狂。快去看看吧！

您可以观看此 YouTube 视频，其中 James（联合创始人）讨论了 Payload CMS 简介以及它如何缩小无头 CMS 和应用程序框架之间的差距。

简而言之，Payload 是一个无头 CMS 和应用程序框架。它旨在极大地提升您的开发流程，但更重要的是，随着应用程序变得越来越复杂，它不会对您造成任何阻碍。

使用以下命令开始。

npx create-payload-app@latest

您可以阅读Payload 与普通 CMS 区别的完整功能列表。

如果您是 next.js 的粉丝，我建议您阅读《使用 Next.js 和 Payload 的终极指南》。

您可以阅读文档和安装指南。

Payload 也将努力推出 v3 测试版，因此请密切关注。

Payload 在 GitHub 上拥有 19k+ 颗星，并被 8k+ 名开发人员使用。

星载荷⭐️

🎯 使用 Payload 的热门应用程序 + 模板。

我们将看到可帮助您将 Payload 用于特定用例的模板和应用程序。

✅混音和有效载荷

带有 Remix 和 Payload 的 Mono repo 模板。

这可以帮助您设置 Payload CMS 与 Remix 一起进行内容管理，这样每个应用程序都被分成其包（包括快速服务器应用程序）。

✅ Astro 和 Payload

这是 Astro 和 Payloadcms 的预配置设置，旨在帮助您轻松开始构建网站。使用 Astroad，您将拥有一个完整的开发环境，可以使用 Docker 在本地运行。此设置简化了网站在部署到生产环境之前的测试和开发。

✅电子商务模板。

他们还提供电商模板，帮助您将精力更多地集中在业务战略上，而不是技术上。您的 API 完全属于您，您的数据也完全属于您。您无需受制于第三方服务，这些服务可能会在月费之外向您收取 API 超额费用，并且限制您对数据库的访问。运营在线商店的成本绝不会超过服务器费用（加上支付处理费）。

开始做一些我们不喜欢的事情总是感觉很奇怪，所以你可以阅读如何使用使用此模板的Next.js 构建电子商务网站。

一些使用 Payload 的知名公司有Speechify、Bizee等等。

阅读以下案例研究。它们将向您介绍 Payload 的功能以及它如何奠定坚实的基础。

✅快犁

Quikplow 是一个创新的按需服务平台，常被称为“扫雪机界的 Uber”。

Quikplow 开发并部署功能齐全的应用程序后端的速度之快，不仅无与伦比，甚至几乎闻所未闻。整个应用程序，涵盖身份验证、基于位置的搜索、电子商务功能等，仅用了不到 120 天的时间就开发完成。

这一前所未有的速度得益于 Payload 的身份验证、CRUD 操作和管理面板生成功能，为 Quikplow 节省了宝贵的开发时间和预算资源。

✅纸三角形

Paper Triangles 需要一种能够体现其著名沉浸式体验的在线形象，但却发现自己受到过时且缓慢的内容管理系统的限制。

他们与代理合作伙伴 Old Friends 合作，面临的挑战是建立一个能够反映其尖端工作的网站 - 需要自动播放视频、动态动画、集成相机库等，同时又不牺牲速度或内容更新的便利性。

Payload 堪称完美之选。它的开源特性以及强大的 TypeScript 和 React 基础使其成为开发高度定制化、交互式前端的理想之选。

对于像 Old Friends 这样的机构来说，Payload 是向 Paper Triangles 等客户兑现承诺的最佳选择。

Old Friends 的设计工程师 James Clements 表示：“Payload 为我们的客户提供了易于使用的界面，并为开发人员提供了执行定制设计所需的自由。”

✅比兹

他们需要在短短三个月内迁移和彻底改造 2,500 个页面，同时重新构建新的 CMS 平台，并在全面重塑品牌的情况下实施全面的网站重新设计。

为了兑现对 Bizee 的承诺，Riotters（代理商）选择了 Payload，因为它简洁、TypeScript 驱动的架构。事实证明，Payload 具有变革性，简化了设计集成，并确保了代码的无错误和可维护性。这加速了内容迁移，并保证了 SEO 和用户体验。

它甚至促进了从设计到开发的过程——帮助 Riotters 将 Figma 概念转化为实际实现。

至关重要的是，Payload 与 Next.js 的自然协同作用催化了开发人员、设计师、用户体验专业人员、质量保证团队和营销人员之间的跨职能协作。

很多公司都决定使用 Payload，这是他们做出的最佳决策之一。无论如何，去探索一下它的用途吧。

呼！
我花了好久好久才写完。希望你喜欢。

我明白！
打造一个好的、长期的副业项目可能很难，但即使是一个简单的用例也能带来非凡的成果。谁知道呢？你甚至可能直接获得对你长期有益的机会。

我试图介绍每个项目中制作的最好和最有用的应用程序。

无论如何，请让我们知道您的想法，您是否计划在未来构建任何可扩展的副项目？

祝您拥有美好的一天！下次再见。

请在 Twitter 上关注我，我将不胜感激。

如果您喜欢这类东西， 请关注我以获取更多信息:)

关注 CopilotKit 以获取更多类似内容。

副驾驶套件 跟随

React UI + 适用于 AI Copilot、应用内 AI 代理、AI 聊天机器人和 AI 驱动的文本区域的优雅基础架构🪁