部員の活動紹介サービス traPortfolio をリリースしました

こんにちは、SysAd班 traPortfolioチームです。
今回新たにSysAd班で traP部員用ポートフォリオサービス traPortfolio をリリースしたので、その紹介記事になります。

サービス概要

traPortfolioは、traPに所属する各部員の活動内容をまとめたポートフォリオサービスです。

部員は、外部向けサイトとは別に用意された部員用ダッシュボードで自身のプロフィールや大会出場履歴などの情報を入力します。1からポートフォリオをデザインする手間が省け、traP部員としての実績を外部に公開することができます。

こちらのリンクからアクセスすることができます。

traPortfolio

東京工業大学デジタル創作同好会traPに所属する各部員の活動内容をまとめたポートフォリオサービスです。

traPortfolio

また、GitHubのリポジトリも公開しています。

公開ページ
https://github.com/traPtitech/traPortfolio-UI
ダッシュボード
https://github.com/traPtitech/traPortfolio-Dashboard
サーバーサイド
https://github.com/traPtitech/traPortfolio

機能紹介

公開ページ

ダッシュボードで登録した情報が公開されます。
UIは今後大きく変わる予定です。

arc_dkvsg0un0h
arc_iw2ghhacsb

部員用ダッシュボード

現在、プロフィール、大会、プロジェクトの3つの情報を編集することができます。
今後、部内のイベントの参加状況や作品紹介などを登録できるようにする予定です。

プロフィール

各種サービスアカウントへのリンクと自己紹介文の登録ができます。
arc_5rfqz7e61q

大会

参加した大会の情報や自分のチーム情報、結果などを登録できます。
arc_02ryrwasgv

プロジェクト

traPで参加したプロジェクトの情報を登録できます。
なお、大会やプロジェクトはtraP全体で共有される情報なので、参加した誰か一人が登録すれば全員で共有できるようになっています。
arc_xfqbayd6pb

主な使用技術

traPのサービス開発で広く用いられているVue.jsとGoを採用しました。

フロントエンド

Vue3(script setup) + Vite 5 + TypeScript
Pinia
- 状態管理です。主にキャッシュを持つのに使っています
Iconify
Vitest
- 単体テスト用です。フォームのバリデーションなど、ちょっと複雑なロジックが入る部分で使っています。traPのフロントエンドはまだあまりテストを書く風習がないのですが、どんどん書いていければと思っています

バックエンド

Go
- Echo
  - Web FrameworkにはtraPで採用されることが多いEchoを採用し学習コストを抑えました。
- GORM
  - DBアクセスにはGORMを用いています。
- testify, gomock, dockertest
  - テストにはこれらのツールを用いています。dockertestはテスト用のDBを立ち上げるのに利用していますが便利で気に入っています。

今後の展望

前述したように、イベント参加状況や作品紹介などの機能追加、公開ページのUIの刷新などを予定しています。

まとめ

開発が長期化していて一部の人からは「traPのサグラダ・ファミリア」とか言われたりしていたのですが、なんとかv1リリースまで漕ぎつけることができました。
traPのサービスとしては珍しく、外部の人も見れるような(外部の人に見てもらうことを想定した)サービスになっているので、より使いやすいようなサービスにしていけたらと思います。