我在 3 个月内完成了 3 个 Hackathon 项目，并赢得了 1500 美元的奖金🥳🎉

2022年上半年，从2月中旬到5月中旬，我有一些空闲时间，于是决定尝试一项新活动——黑客马拉松。我的参赛作品获得了亚军提名，所以我决定写一篇文章来激励大家。

请注意，本文并非任何形式的炫耀。我仍在学习，写这篇文章的目的是告诉大家，只要你努力，相信自己和自己的想法，每个人都能做到。

下面我将列出我构建的每个项目，包括功能列表，并描述我使用的技术栈。我还会提供我完整的黑客马拉松文章链接、已部署项目的链接以及开源代码链接。

1. CropScore

从二月中旬到三月中旬，我想到了一个解决方案，可以让你不再为分辨率和长宽比等技术问题所困扰。CropScore会计算实时裁剪与目标用途的契合度分数（顾名思义）。

该项目是专门为Hashnode和Netlify黑客马拉松的参赛作品而构建的。

功能列表📋

• 图片上传 - 支持 .JPG 和 .PNG 格式
• 预设 - 目前有来自 10 个常用平台的 33 个预设
• 自定义模式 - 用户可以切换到自定义分辨率
• 比例锁定 - 用户可以锁定任何自定义纵横比
• 输入验证——无效输入的信息警告消息
• 移动工具 - 用户可以移动图像
• 缩放工具——放大或缩小图像以获得精确的裁剪
• 旋转工具 - 以 45 度为增量顺时针或逆时针旋转图像
• 变换图像 - 在 X 轴或 Y 轴上交换图像
• 辅助网格 - 提供居中帮助
• 分辨率数据 - 当您调整裁剪窗口大小时实时更新
• 裁剪分数 - 适合目标用途的实时裁剪分数
• 图像预览 - 用户可以预览裁剪
• 重置 - 将图像和裁剪窗口重置为上传图像时的状态
• 下载 - 下载 .PNG 和 .JPG 格式的图片
• 响应式 - 可在任何设备上使用

我使用的技术栈

NextJS - React 应用程序框架

React-cropper - 用于核心裁剪功能

Flaticon、React-icons - 用于图标

Chakra UI - 用于组件

GitHub - 托管代码

Netlify - 部署项目

ESLint，prettier - 用于 linting 和代码格式化

Namecheap - 用于自定义子域名（在 Netlify 上配置）

项目链接📚

✅ 完整的黑客马拉松文章：在 Hashnode 上阅读

✅ 上线项目：部署在 Netlify 上

✅ 源代码：可在 GitHub 上获取

2. VoiceCue

从三月中旬到四月中旬，我想出了VoiceCue，这是一款生成提示时间码的应用程序，只需单击一下即可找到语音记录的所有重要部分，如情绪、实体和标签。

该项目是专门为DEV和Deepgram黑客马拉松而构建的。

功能列表📋

1. 语音识别——基于Deepgram API

2. 常规统计 - 语音录制概述

3. 情绪分析——积极和消极词汇检测

4. 词云生成——最常用的词汇分类

5. 实体名称识别——人物、地点等类别

6. 活动追踪——查找过去、现在或将来的活动

7. 交互式记录 - 查看进度或单击以控制进度

8. 说话人检测 - 录音中说话人总数

9. 提示词用法——用于更好地理解上下文的简短文本样本

10. 自定义搜索——扩展查询提示的能力

11. 波形预览——查看语音的动态，识别静音

12. 音频控制——播放、暂停、快进和快退

13. 拖放支持 - 将音频拖放到文件选择区域

14. 上传 MP3 文件 - 最常用的音频格式

15. 进度加载器 - 改进了加载成绩单的用户体验

16. 完全响应 - 在手机和平​​板电脑上均可正常运行

17. 丰富多彩的用户界面——更易于交互和单词突出显示

我使用的技术栈

NextJS - React 应用程序框架

Deepgram——基于人工智能的语音识别

妥协，情绪- 用于文本处理

react-tagcloud - 生成词云

react-tabs - 用于导航面板

react-drag-drop-files - 用于拖放支持

wavesurfer.js - 生成音频波形

GitHub——托管代码

Vercel——部署项目

ESLint，Prettier - 用于 linting 和代码格式化

Namecheap - 用于自定义子域名

项目链接📚

✅ 完整的黑客马拉松文章：阅读 DEV

✅ 上线项目：部署在 Vercel 上

✅ 源代码：可在 GitHub 上获取

3.音频播放器

从四月中旬到五月中旬，我参加了Hashnode举办的Writeathon。

我描述了如何创建自定义音频播放器来展示我的作品集中的曲目，因为很多人对它的技术实现感兴趣。

我很高兴选择了这个，因为我涵盖了从功能规划、线框图和设计到创建组件、实现逻辑、添加响应能力和部署应用程序的整个应用程序创建周期。

功能列表📋

1. 播放和暂停音频
2. 下一曲目和上一曲目
3. 重复曲目
4. 随机播放曲目顺序
5. 进度滑块
6. 剩余时间/总时间
7. 音量滑块
8. 搜索轨迹
9. 按类型过滤曲目
10. 播放列表项目

我使用的技术栈

React - 前端界面库

GitHub——托管代码

Vercel——部署项目

Namecheap - 用于自定义子域名

Flaticon - 用于播放器中使用的图标

项目链接📚

✅ 完整的黑客马拉松文章：在 Hashnode 上阅读

✅ 上线项目：部署在 Vercel 上

✅ 源代码：可在 GitHub 上获取

结论

那么，我的主要收获是什么？我想鼓励有抱负的开发者挑战自我，尝试新的冒险。黑客马拉松是探索新技术、学习新技能和结识新朋友的一种有趣方式。

无论最终结果如何，你仍然会是赢家，因为你所获得的实践技能远比任何其他东西都更有价值。此外，其他人也会从中受益，甚至可能在未来为改进项目做出贡献。

最重要的是，参加黑客马拉松能给你动力去完成项目，因为你承诺了一个目标和一个明确的截止日期。如果没有这些，从事副业往往会导致你放弃，或者在原有的基础上再开始新的想法。

而且，这样你就能找到一些可以添加到简历和作品集里的东西，这能帮助你找到下一份工作。坚持下去，你一定能成功！

写作一直是我的热情所在，能够帮助和激励他人让我感到快乐。如有任何疑问，欢迎随时联系我们！

在Twitter、LinkedIn和GitHub上联系我！

访问我的投资组合以了解更多类似项目。