17 个标志性项目助您打造个人作品集 💼 🚀🦾

作为开发人员，我们常常对应该为我们的投资组合构建哪种类型的项目感到困惑。

这就是我要介绍 17 个能给任何人留下深刻印象的标志性项目的原因。

我已经看过 500 多个项目，因此我可以自信地说，建设这些项目将产生巨大的影响和轰动。

这会激起你的好奇心，而且它会......

👑 1. CopilotKit——几分钟内即可为任何项目添加 AI 副驾驶。

您会同意在 React 中添加 AI 功能很困难，而这正是 CopilotKit 可以作为构建自定义 AI Copilots 的框架来帮助您的地方。

您可以使用 Copilotkit 提供的简单组件构建应用内 AI 聊天机器人和应用内 AI 代理，这比从头开始构建至少容易 10 倍。

如果已经有一个非常简单和快速的解决方案，你就不应该重新发明轮子！

他们还提供内置（完全可定制）的 Copilot 原生 UX 组件<CopilotKit />，如<CopilotPopup />、、、<CopilotSidebar />。<CopilotTextarea />

使用以下 npm 命令开始。

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

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

所有与 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>
  );
}

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

您可以按照本指南将聊天机器人集成到您的应用程序中。

您可以观看完整的演练！

CopilotKit 在 GitHub 上拥有 8.5k+ 颗星，并有 300 多个版本。

明星 CopilotKit ⭐️

我为什么要讨论框架？

因为我已经介绍了 7 多个可以使用 CopilotKit 构建的热门应用。你可以在这里查看！

您今天可以构建的 20 多个简单的 AI 项目（LangChain、Cop​​ilotKit 等）

Anmol Baranwal for CopilotKit ・ 24 年 5 月 15 日

#opensource #javascript #webdev #beginners

2. Reactive Resume——具有强大功能的免费简历生成器。

这是市面上最好的简历生成器之一，并且会充分考虑您的隐私。完全安全、可定制、可移植、开源且永久免费。

它简化了创建、更新和分享简历的流程。由于没有用户追踪或广告，您的隐私是重中之重。该平台极其用户友好，如果您希望完全拥有自己的数据，只需不到 30 秒即可完成自托管。

它提供多种语言版本，并具有实时编辑、数十种模板、拖放自定义以及与 OpenAI 集成等功能，可增强您的写作能力。

您可以向潜在雇主分享您的个性化简历链接，追踪其浏览量或下载量，并通过拖放部分内容来自定义页面布局。该平台还支持多种字体选项，并提供数十种模板供您选择。此外，它甚至还支持暗黑模式，为您提供更舒适的浏览体验。

它有一些令人兴奋的功能，你甚至可以自定义多个列。此外，它们的用户界面也非常好用。

一些令人兴奋的功能：

✅ 仪表板。

✅ 部分选项。

✅ 个人资料部分。

✅ 体验部分。

✅ 拖放布局选项。

✅ 排版选项。

✅ 主题选项。

✅ 带有公共链接的统计数据，您还可以制作不与任何人共享的个人笔记。

查看所有功能的列表。

它涉及这些：

• React（Vite）用于前端。
• NestJS 用于后端。
• Postgres 作为主数据库。
• Prisma ORM 可轻松进行数据库切换。
• Minio 用于对象存储（头像、简历 PDF、预览）。
• 无头 Chrome 的无浏览器（PDF 打印、预览生成）。
• 用于密码恢复电子邮件的 SMTP 服务器。
• GitHub/Google OAuth 用于用户身份验证。
• LinguiJS 和 Crowdin 用于翻译管理和本地化。

它在 GitHub 上有 21k 个星，其主要语言是 TypeScript。

星级反应简历⭐️

3. Namviek——小团队项目经理。

Namviek 是一款面向低预算小型团队的开源项目管理器。它包含运营小型团队所需的基本功能。

它的前端使用 Next.js 构建，与 Vercel 无缝集成。后端使用 Node.js，但团队计划在未来将部分功能迁移到 Golang。

它具有任何项目经理都需要的大量布局选项。

Namviek 在 GitHub 上有 1.7k 颗星，是使用 TypeScript 构建的。

星空 Namviek ⭐️

4. Litlyx——一行代码，人工智能分析。

Litlyx 是一种单行代码分析解决方案，可与每个 JavaScript/TypeScript 框架集成。

这是一个面向开发人员的简单分析解决方案，但他们使用 GPT 包装器，用户可以查询使用 litlyx 收集的数据。

例如，您可以简单地询问How many visits did I have 7 days ago?、、等等How many visits I had last week?。how many custom events were triggered with this name or name of the event

我相信他们计划将来用它生成图表和报告。

它可追踪 10 多个 KPI 以及您应用所需的任意数量的自定义事件。享受 AI 驱动的仪表板，获取直观的数据洞察，自动将报告直接发送到您的邮箱，以及无缝下载 CSV 文件来处理您的数据。

你可以使用 npm 或 CDN 安装它。整个库文件大小不到 4kb，这是一个加分点。

它支持如下所示的 15+ 个框架。

阅读文档并查看现场演示。

相信我，构建一个好的 SAAS 分析系统非常适合您的投资组合！

Litlyx 在 GitHub 上拥有 215 颗星，使用 Vue + TypeScript 构建。

星 Litlyx ⭐️

5. Matcha – 纯 CSS 中的嵌入式语义样式库。

默认浏览器样式表通常非常简单，当您设计应用程序原型、生成静态 HTML 页面、Markdown 生成的文档等时，如果没有“视觉上好看”的东西，并且不想过早地深入研究 CSS 的复杂性，那么这可能会令人沮丧。

matcha.css 是一个纯 CSS 库，旨在将 HTML 元素的样式设置为类似于默认浏览器样式表，从而无需用户手动修补其文档。

要使用 matcha.css，只需在

<link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css">

例如，我们通过一个例子来检查一下。

在添加脚本代码之前。

添加脚本代码后。

无需做任何事情，您就会得到一个尊重用户对明暗模式、漂亮字体和适当间距的偏好的页面。

它<menu>实际上看起来像一个菜单，并且它<form>甚至还带有“必填字段”指示符来指示必填项，非常美观。无需任何构建步骤、JavaScript、配置或重构。

还有一些“插入式” CSS 库，但我相信这是最完整的一个，因为它提供了开箱即用的附加现代样式，如语法突出显示、简单布局、实用程序类等。

matcha.css 也易于定制（它没有任何！重要规则，甚至提供了创建自定义构建的助手），同时也是可逆的（如果您决定迁移出去，只需删除样式表）。

您可以在文档中阅读更多有关使用语义样式处理的 HTML 元素的内容。

这些项目类型非常优秀，能够充分展现其可信度。此外，开发独特的产品并解决实际问题也总能让你更具优势。

Matcha CSS 在 GitHub 上有 1.5k 颗星。

星抹茶⭐️

6. Instrukt——终端中的集成AI。

Instrukt 是一个基于终端的 AI 集成环境。它提供了一个平台，用户可以：

• 创建并指导模块化 AI 代理。
• 生成用于问答的文档索引。
• 创建工具并将其附加到任何代理。

用自然语言指导它们，并且为了安全起见，在安全容器（当前使用 Docker 实现）内运行它们，以在专用的沙盒空间中执行任务。

使用Langchain、、Textual和构建Chroma。

使用以下命令开始。

pip install instrukt[all]

动图

有很多令人兴奋的功能，例如：

✅ 一个基于终端的界面，让高级键盘用户无需离开键盘即可指示 AI 代理。✅
索引您的数据，并让代理检索数据进行问答。您可以使用便捷的用户界面创建和组织索引。✅
索引创建将自动检测编程语言并相应地优化拆分/分块策略。✅
在安全的 Docker 容器中运行代理，以确保安全和隐私。✅
集成 REPL-Prompt，可与代理快速交互，并为开发和测试提供快速反馈循环。✅
您可以使用自定义命令自动执行重复性任务。它还内置了提示/聊天历史记录。

您可以阅读有关所有功能和安装指南的信息。

您还可以使用内置的 IPython 控制台来调试和检查代理，这是一个简洁的小功能。

Instrukt 获得 AGPL 许可，这意味着任何人都可以将其用于任何目的。

Instrukt 在 GitHub 上有 252 个星，是使用 Python 构建的。

星级指导⭐️

7. NPM Copilot ——Next.js 的 CLI 工具，可以实时分析日志。

npm/yarn/pnpm copilot 是一个命令行工具，它使用 OpenAI 的 GPT-3 语言模型来提供修复代码错误的建议。

该 CLI 工具会检测当前目录中正在使用的项目类型和包管理器。
然后，它会运行相应的开发服务器命令（例如，npm run dev、yarn run dev、pnpm run dev），并监听正在运行的应用程序生成的日志。
当遇到错误时，CLI 工具会实时提供错误修复建议。

首先使用以下 npm 命令安装 npm-copilot 包。

npm install -g npm-copilot

CLI 工具将开始监控 Next.js 应用程序生成的日志并实时提供错误修复建议。

可以通过这个命令在项目中使用。

npm-copilot

它支持Next,js、React、Angular和Vue.js

它在 GitHub 上有 343 颗星，并且是使用 JavaScript 构建的。

星级 NPM 副驾驶⭐️

8. Latitude – 开发人员首先嵌入的分析。

Latitude 是一个开源框架，可以使用代码在数据库或数据仓库（甚至是静态 CSV 文件！）之上构建交互式数据应用程序。

使用 Latitude，您可以在运行时编写带有自定义参数的可组合 SQL 查询来提取和转换您的数据，并使用我们简单的前端组件来显示它。

该框架负责构建查询、在数据源上运行查询并将其返回到前端，因此您可以专注于为用户构建最佳的数据体验。

它启动速度快、维护简单、并且可以根据您的数据进行扩展。

观看此视频以了解更多信息！

您可以使用 npm 包latitude-data/react将其与您的前端集成

您可以在 Latitude 存储库的示例部分查看转换典型用例的示例项目列表。

阅读文档和快速入门指南。

Latitude 在 GitHub 上有 800 颗星，是使用 TypeScript 构建的。

星纬度⭐️

9. Mac 上的语音助手——您的语音控制 Mac 助手。

你的语音控制 Mac 助手。GPT Automator 让你可以用语音在 Mac 上执行各种任务。例如，打开应用程序、查找餐厅以及合成信息。太棒了 :D

它是在伦敦黑客马拉松期间建造的。

它有两个主要部分：

a. 语音命令：它使用本地运行的 Whisper（Buzz 的一个分支）生成命令。

b. 命令到行动：你向一个配备了我们编写的自定义工具的 LangChain 代理发出命令。这些工具包括使用 AppleScript 控制计算机操作系统，以及使用 JavaScript 控制活动浏览器。最后，像任何优秀的人工智能一样，我们让代理使用 AppleScript 说出最终结果，例如“{Result}”（如果你以前没用过，可以尝试在你的 Mac 终端上输入“Hello World!”）。

我们自定义了一个工具，让 LLM 使用 AppleScript 控制计算机。提示符是以下文档字符串：

@tool
def computer_applescript_action(apple_script):
    """
    Use this when you want to execute a command on the computer. The command should be in AppleScript.

    Here are some examples of good AppleScript commands:

    Command: Create a new page in Notion
    AppleScript: tell application "Notion"
        activate
        delay 0.5
        tell application "System Events" to keystroke "n" using {{command down}}
    end tell

    ...

    Write the AppleScript for the Command:
    Command: 
    """
    p = subprocess.Popen(['osascript', '-'], stdin=subprocess.PIPE, stdout=subprocess.PIPE, stderr=subprocess.PIPE)

    stdout, stderr = p.communicate(applescript.encode('utf-8'))

    if p.returncode != 0:
        raise Exception(stderr)

    decoded_text = stdout.decode("utf-8")

    return decoded_text

如果你好奇它的工作原理，GPT Automator 使用 OpenAI 的 Whisper 将您的音频输入转换为文本。然后，它使用 LangChain Agent 选择一组操作，包括使用 OpenAI 的 GPT-3（“text-davinci-003”）从你的提示符生成 AppleScript（用于桌面自动化）和 JavaScript（用于浏览器自动化）命令，然后执行生成的脚本。

请记住，本项目不适用于生产环境。该项目执行自然语言生成的代码，可能容易受到即时注入及类似攻击。本项目仅作为概念验证。

您可以阅读安装指南。

让我们看一些提示以及它将做什么：

✅ 找到计算的结果。

提示：“2 + 2 等于多少？”

它将编写 AppleScript 来打开计算器并输入 5 * 5。

✅ 查找附近的餐馆。

提示：“查找我附近的餐馆”

它会打开 Chrome，用谷歌搜索附近的餐厅，解析页面，然后返回最顶部的结果。有时它会很调皮，打开谷歌地图的结果，并说“最好的餐厅是谷歌地图页面顶部的餐厅”。有时它会打开谷歌的顶部链接，然后卡在谷歌无障碍功能页面……

以下是运行时打印到终端的内容：

Command: Find a great restaurant near Manchester.

> Entering new AgentExecutor chain...
 I need to search for a restaurant near Manchester.
Action: chrome_open_url
Action Input: https://www.google.com/search?q=restaurant+near+Manchester
Observation:

Thought: I need to read the page
Action: chrome_read_the_page
Action Input: 
Observation: Accessibility links
Skip to the main content
... # Shortned for brevity
Dishoom Manchester
4.7
(3.3K) · £££ · Indian
32 Bridge St · Near John Rylands Library
Closes soon ⋅ 11 pm
Stylish eatery for modern Indian fare
San Carlo
4.2
(2.8K) · £££ · Italian
42 King St W · Near John Rylands Library
Closes soon ⋅ 11 pm
Posh, scenery Italian restaurant
Turtle Bay Manchester Northern Quarter
4.7

Thought: I now know the final answer
Final Answer: The 15 best restaurants in Manchester include El Gato Negro, Albert's Schloss, The Refuge, Hawksmoor, On The Hush, Dishoom, Banyan, Zouk Tea Room & Grill, Edison Bar, MyLahore Manchester, Turtle Bay Manchester Northern Quarter, San Carlo, The Black Friar, Mana, and Tast Cuina Catalana.

我不能保证这些餐馆值得一去，请自行承担风险。哈哈！

✅ 如果您要求 GPT Automator 擦除您的计算机，它就会这样做。

是的，只要你开口，它就会清空你的电脑！
我内心深处渴望这么做 :)

您可以在此处查看完整的演示！

您可以在Chidi 的博客上阅读更多内容。

它在 GitHub 上有 218 个星，是使用 Python 构建的。

星级 GPT 自动化程序⭐️

10. OpenAlternative——专有软件的开源替代品列表。

面向社区的项目只要包含一些独特的内容，对投资组合来说也是有益的，在本例中确实如此。

OpenAlternative 是一个由社区驱动的专有软件和应用程序的开源替代品列表。

其中一些巧妙的功能包括：

✅ 过滤器和算法支持的搜索。

✅ 不同的主题、语言和分类选项。

✅ 提交项目选项，无需在 GitHub 上创建问题。

OpenAlternative 在 GitHub 上有 477 颗星，是使用 TypeScript 构建的。

星开放替代方案⭐️

11. Lively——允许用户设置动画桌面壁纸和屏幕保护程序。

我试过这些效果，效果真的很酷。这是一个非常可靠的项目，因为它已经在App Store上架了，任何人都可以通过代码学到很多东西。

你可以观看这个视频来了解它看起来有多么疯狂。

它们提供三种类型的壁纸，包括视频/GIF、网页和应用程序/游戏。

它基于 C# 构建，并且支持一些很酷的功能：

1. Lively 可以通过终端的命令行参数进行控制。您可以将其与其他语言（例如 Python 或脚本软件 AutoHotKey）集成。

2. 强大的API集，助力开发者创建交互式壁纸。获取硬件读数、音频图表、音乐信息等。

3. 当全屏应用程序/游戏在机器上运行时，壁纸播放会暂停（~0％CPU，GPU 使用率）。

4. 您还可以利用机器学习推理来创建动态壁纸。您可以预测任何 2D 图像与相机的距离，并生成类似 3D 的视差效果。太酷了 :D

我见过很多人使用它，其中很多人甚至不知道它是开源的。

您可以使用安装程序或通过微软商店下载它。

它是 2023 年 Microsoft Store 的获胜者，这为它的简历增添了巨大的推动力 :)

它在 GitHub 上有 14.5k+ 颗星，有 60 个版本，并且是使用 C# 构建的。

星活跃⭐️

12. Documenso——以最简单的方式签署数字文档。

动图

如果你从事自由职业，需要签署协议，那么这是最佳选择。它解决了一个大问题，让开发人员不会浪费时间，从而专注于重要的事情。

如今，这在技术上相当容易，但它也为每个签名引入了一个新的参与方：签名工具提供商。

该项目的技术栈包括 TypeScript、Next.js、Prisma、Tailwind CSS、shadcn/ui、NextAuth.js、react-email、tRPC、@documenso/pdf-sign、React-PDF、PDF-Lib、Stripe 和 Vercel。

免费套餐允许您每月签署 10 份文件，这已经足够了。

您可以阅读此内容来了解​​如何设置项目。

您可以阅读文档。

我知道它的用例不太广泛，但你仍然可以从代码中学习，所以这始终是一个加分点。而且考虑到整个过程，这是一个很好的项目，可以添加到你的作品集中。

我已经测试过了，效果非常好。简而言之，它的工作原理如下：

✅ 您上传文档并开始填写信息。

✅ 插入所有相关方的电子邮件。

✅ 您只需在文档中插入所需的电子邮件、姓名或签名的文本框。

✅ 当任何一方签署时，您将收到一封电子邮件，并且每个成员签署后即可下载。

该文件将包含签名，并附上一页包含数字信息的附件。非常独特！

它们在 GitHub 上有 6.9k 颗星，并且是使用 TypeScript 构建的。

星级文档⭐️

13.开放解释器——计算机的自然语言界面。

Open Interpreter 允许 LLM 在本地运行代码（Python、Javascript、Shell 等）。安装后，您可以在终端中运行 $interpreter，通过类似 ChatGPT 的界面与 Open Interpreter 聊天。

这为您的计算机的通用功能提供了自然语言界面：

✅ 创建和编辑照片、视频、PDF 等。✅
控制 Chrome 浏览器执行研究绘制、清理和分析大型数据集。

我不知道您怎么想，但是他们的网站让我惊叹不已！

使用此命令快速启动。

pip install open-interpreter

// After installation, simply run:
interpreter

您可以阅读快速入门指南。

您应该阅读有关ChatGPT 代码解释器的比较以及您可以使用的命令。

您可以阅读文档。

Open Interpreter 兼容托管和本地语言模型。托管模型速度更快、功能更强大，但需要付费。本地模型是私有且免费的，但功能通常较弱。

代码库可能有点大，但你绝对可以构建它的迷你原型版本。

它们在 GitHub 上有 51k+ 颗星，并且是使用 Python 构建的。

明星开放解释器⭐️

14. CodeSnap ——VS Code 中代码的精美截图。

它是一个 VSCode 扩展，可以帮助您以更好的方式快速保存代码的屏幕截图。

我们都同意，如果你想向别人展示简单的截图，那么它就很无聊，而且没有什么用。

以下是几个示例。

它将屏幕截图复制到剪贴板，显示行号，并提供许多其他配置选项。

但对我来说，这是根据我的品牌颜色选择背景颜色的选项。

如果您想了解如何构建 VSCode 扩展，我推荐这些：

• 如何制作自己的 VS Code 扩展- freeCodeCamp
• 你的第一个扩展- VSCode 文档

从已有 200k+ 安装的VSCode 市场下载 CodeSnap 。

我相信经过如此多用户验证的 VSCode 扩展非常适合您的作品集。

CodeSnap 在 GitHub 上有 512 个星，并且是使用 JavaScript 构建的。

星号 CodeSnap ⭐️

15. SQL Translator——一种使用人工智能将自然语言查询转换为 SQL 代码的工具。

我试图建立一个类似的项目，最终发现它已经存在。

该工具旨在让任何人都可以轻松地将 SQL（结构化查询语言）命令转换为自然语言，反之亦然。

SQL 是一种用于管理和操作关系数据库中数据的编程语言，虽然它是一种强大的工具，但它也可能相当复杂且难以理解。

另一方面，自然语言是我们在日常生活中说和写的语言，对于不熟悉技术术语的人来说，它通常是首选的交流方式。

使用 SQL 和自然语言翻译器，您无需成为 SQL 专家即可了解数据库的运行情况或编写 SQL 查询。您只需用自然语言输入查询即可获取相应的 SQL 代码，反之亦然。

部分功能如下：

• 黑暗模式。
• 小写/大写切换。
• 复制到剪贴板。
• SQL 语法高亮显示。
• 模式意识（测试版）。
• 查询历史记录。

您可以阅读安装说明，由于它使用 Nextjs，因此非常简单。

这个问题是给你的。哈哈！

SQL Translator 在 GitHub 上有 4.1k 颗星，是使用 TypeScript 构建的。

星级 SQL 翻译器⭐️

16. shadcn/ui 的 10000+ 个主题- shadcn 的多个 VS Code 主题。

首先，这款应用在发布时就迅速走红，特别是因为很多开发人员使用 shadcn/ui。

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

此外，用户界面也很糟糕。

让我们看看它的一些巧妙功能：

✅ 为只想检查一下的开发人员随机化主题 + 上一个。

✅ 探索社区制作的主题。

✅ 复制当前代码主题。

✅ 保存您的主题以供将来参考。

可以肯定地说，你可以用更少的资源构建更多的内容:)

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

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

它在 GitHub 上有 817 个星，是使用 TypeScript 构建的。

星级 10000+ 主题⭐️

17. DevHub - GitHub 的 TweetDeck。

DevHub 是一款移动和桌面应用，可帮助您管理 GitHub 通知并随时掌握仓库动态。保存自定义搜索，应用筛选条件，确保不错过任何重要信息。

一些简洁的功能：

✅ 所有列都支持一组通用的过滤器，例如机器人、标签、问题状态、文本等。问题和拉取请求列很特殊：它们为您提供了 GitHub 高级搜索的所有功能。

✅ 为每个人创建一个列并查看他们在做什么：提交、评论、问题、拉取请求、标签、发布等。

✅ 在两种模式之间进行选择：桌面或菜单栏；仅为您想要的列启用推送通知。

✅ 在所有设备上获得相同的体验。

这是一个有用的项目，将立即拥有第一批用户。

DevHub 在 GitHub 上有 9.6k 个星，是使用 TypeScript 构建的。

星级 DevHub ⭐️

呼！清单上好多项目都让人眼花缭乱，哈哈！

您可以从这些项目中获得灵感来构建更伟大的事物。

顺便问一下，您最喜欢哪个项目？

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

您可以加入我的开发人员和技术作家社区dub.sh/opensouls。

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

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

副驾驶套件 跟随

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