【🌟 初めてのハッカソン 参加記】技育CAMPハッカソン Vol.12で優秀賞を獲得した「平和ネットAPI」


# 🌟 初めてのハッカソン 参加記

こんにちは！今回、初めてハッカソンに参加し、「[技育CAMPハッカソン Vol.12](https://x.com/geek_pjt/status/1822558335054545270)」で優秀賞を獲得することができました。この記事では、私たちのプロジェクト「[平和ネットAPI](https://github.com/TECH-C-LT/Peace-Net)」について、その開発過程や学んだことを共有したいと思います。

<img width=40%><img width=20% src="https://github.com/TECH-C-LT/Peace-Net/raw/main/assets/peace-net.png">

## 🌈 プロジェクト概要

「[平和ネットAPI](https://github.com/TECH-C-LT/Peace-Net)」は、インターネット上の誹謗中傷問題に取り組むためのAPIサービスです。主な機能は以下の通りです：

1. 🛡️ Guardian API：テキストの内容を分析し、有害なコンテンツを検出
2. 🔆 Sunshine API：ネガティブなテキストをポジティブな表現に変換

また、APIキー管理や使用状況確認のための[管理サイト](https://www.pe-ace.net/)、そしてAPI使用のための[ドキュメントサイト](https://docs.peeace.net/)も提供しています。

## 💡 開発のきっかけと準備

プロジェクトのアイデアは、ハッカソン前のチームでのブレインストーミングから生まれました。この事前準備が非常に重要でした🔥

- 📊 課題と目的の明確化
- 🤝 チームの思想の共有
- 📝 役割分担と実施すべきタスクの洗い出し

この準備により、ハッカソン中は実装に集中することができ、チーム全体が同じ方向を向いて効率的に開発を進めることができました。

## 🛠️ 技術スタック

私たちは最新の技術を積極的に採用し、効率的な開発環境を構築しました。
💙 Love TypeScript 💙

### フロントエンド
<img src="https://img.shields.io/badge/-TypeScript-000.svg?logo=typescript&style=flat" />
<img src="https://img.shields.io/badge/-Next.js-000.svg?logo=nextdotjs&style=flat" />
<img src="https://img.shields.io/badge/-Tailwind CSS-000.svg?logo=tailwindcss&style=flat" />
<img src="https://img.shields.io/badge/-shadcn/ui-000.svg?logo=shadcnui&style=flat" />

- [TypeScript](https://www.typescriptlang.org/)
- [Next.js@15RC](https://github.com/vercel/next.js)
- [Tailwind CSS](https://tailwindcss.com/)
- [shadcn/ui](https://ui.shadcn.com/)
- [Magic UI](https://magicui.design/)
- [Supabase Auth](https://supabase.com/docs/guides/auth)

### バックエンド
<img src="https://img.shields.io/badge/-TypeScript-000.svg?logo=typescript&style=flat" />
<img src="https://img.shields.io/badge/-Hono-000.svg?logo=hono&style=flat" />
<img src="https://img.shields.io/badge/-OpenAI API-000.svg?logo=openai&style=flat" />

- [TypeScript](https://www.typescriptlang.org/)
- [Hono](https://hono.dev/)
- [OpenAI API](https://openai.com/index/openai-api/)
- [Vercel AI SDK](https://sdk.vercel.ai/)

### ドキュメントサイト
 <img src="https://img.shields.io/badge/-TypeScript-000.svg?logo=typescript&style=flat" />
 <img src="https://img.shields.io/badge/-Docusaurus-000.svg?logo=docusaurus&style=flat" />

- [TypeScript](https://www.typescriptlang.org/)
- [Docusaurus](https://docusaurus.io/)

### データベース
<img src="https://img.shields.io/badge/-Supabase-000.svg?logo=supabase&style=flat" />

- [Supabase](https://supabase.com/)

### インフラ
<img src="https://img.shields.io/badge/-Vercel-000.svg?logo=vercel&style=flat" />
<img src="https://img.shields.io/badge/-Cloudflare Workers-000.svg?logo=cloudflareworkers&style=flat" />
<img src="https://img.shields.io/badge/-Cloudflare Pages-000.svg?logo=cloudflarepages&style=flat-square" />
    
- [Vercel](https://vercel.com/)
- [Cloudflare Workers](https://www.cloudflare.com/ja-jp/developer-platform/workers/)
- [Cloudflare Pages](https://www.cloudflare.com/ja-jp/developer-platform/pages/)

### その他
<img src="https://img.shields.io/badge/-Turborepo-000.svg?logo=turborepo&style=flat" />
<img src="https://img.shields.io/badge/-GitHub-000.svg?logo=github&style=flat" />
<img src="https://img.shields.io/badge/-Github Actions-000.svg?logo=githubactions&style=flat" />
 <img src="https://img.shields.io/badge/-Prettier-000.svg?logo=prettier&style=flat" />
    <img src="https://img.shields.io/badge/-ESLint-000.svg?logo=eslint&style=flat" />
    <img src="https://img.shields.io/badge/-Docker-000.svg?logo=docker&style=flat" />

- [Turborepo](https://turbo.build/)（モノレポ管理）
- [GitHub](https://github.co.jp/)
..etc

## 🔑 開発のポイント

1. 🚀 **最新技術の活用**：Next.js@15RCやHonoなど、最新のフレームワークを採用することで、パフォーマンスと開発効率を向上させました。([useActionState](https://ja.react.dev/reference/react/useActionState)めちゃ便利！)

2. 🏗️ **アーキテクチャの重視**：Clean ArchitectureとFuture Based Architectureを採用し、保守性と拡張性の高いバックエンド設計を実現しました。（勉強しながらだから間違っているところもあるかも😅）

3. :cloud: **サーバーレスアーキテクチャ**：VercelとCloudflareを組み合わせることで、高性能かつスケーラブルな配信環境を構築しました。

4. 🗄️ **効率的なDB操作**：Supabaseの[Functions](https://supabase.com/docs/guides/database/functions)や[Triggers](https://supabase.com/docs/guides/database/postgres/triggers)を使用することで効率的なDB操作を実現しました。

5. 🔄 **GitHub Actionsでデプロイの自動化**：メンバーが頑張ってくれた🙇めちゃ便利！

![技術スタック](https://github.com/TECH-C-LT/Peace-Net/raw/main/assets/tech-stack.png)
![アーキテクチャ](https://github.com/TECH-C-LT/Peace-Net/raw/main/assets/architecture.png)

## 📚 学んだこと

1. ✌️ **チームワークの重要性**：事前の準備と明確なビジョン共有が、プロジェクトの成功に大きく貢献しました。

2. 🚀 **技術選択の影響**：最新技術を適切に選択することで、開発効率と製品品質を大きく向上させることができました。

3. 🤔 **アーキテクチャ設計の重要性**：将来の拡張性を考慮したアーキテクチャ設計が、プロジェクトの持続可能性を高めることを学びました。（まだまだわかんないことがたくさん😅）

4. 💪 **時間管理のスキル**：限られた時間内でプロジェクトを完成させるための効率的な時間管理の重要性を実感しました。今回はGitHubのProjectsでスケジュール管理しました！

## 🔮 今後の展望

1. **パフォーマンス改善**：現在のAPIレスポンス時間の短縮を目指します。どう実現しようかな🤔
2. **機能拡張**：画像分析への対応を検討しています。
3. **アプリケーション開発**：本APIを使用したChrome拡張機能やスマホキーボードアプリの開発を計画しています。

## 🎬 終わりに

初めてのハッカソン参加で優秀賞を獲得できたことは、大きな励みになりました。チームメンバーの努力と協力が実を結んだ結果だと思います。（メンバーの一人は山でキャンプしながら発表してました🤣）

https://github.com/TECH-C-LT/Peace-Net

https://www.pe-ace.net/

皆さんも、ぜひハッカソンに挑戦してみてください。新しい技術や仲間との出会い、そして自己成長の機会が待っていますよ！👨‍💻👩‍💻

PS : 参加してた人みんなすごい人ばかりで頑張り屋さんですごすぎた...（語彙力無）😮💭