GXPass

• Githubでの活動、君の技術力を見える形にしよう
• ref: https://gxpass.h-x-s.dev/

チーム名

【チーム7】 Stack Over OIT

プロダクト説明

「GXPass」は、あなたのGitHub活動を自動で集計し、魅力的なスキルカードとして可視化するサービスです。 手間をかけずに、すべてのリポジトリからスキルや活動状況を抽出。 オリジナルデザインのカードとして簡単に共有できます。

背景・課題・解決されること

1. プロダクト概要

「GXPass」は、GitHubアカウントと連携するだけで自動的にポートフォリオサイトを生成するWebサービス

どんな「本当に欲しい」に着目したか

10代，20代の学生エンジニアの「ポートフォリオを作り直したり、アップデートするのがめんどくさい」を解決する

どんなアプローチで「本当に欲しい」を実現しましたか？

• GitHub APIを利用してリポジトリ情報を取得
• 使用言語・コミット履歴・スター数などを自動解析
• 視覚的に整理されたポートフォリオページを即生成

2. プロダクトの機能

GitHub活動を自動集計

全リポジトリのデータをもとに、使用言語・コミット数・プルリク数・スター数などを自動で集計し、スキルカードを生成。手作業は一切不要

オリジナルスキルカードの作成

集計した情報をもとに、デザイン性の高いスキルカードを自動生成。活動量や魅力を一目で確認できる

称号・活動スコア表示

コミット時間や活動量からユニークな二つ名を自動生成し、コミュニティ内での個性を表現。活動量やGitHub上での魅力もスコア化して表示する

簡単共有

作成したカードはURLやQRコードで簡単に共有可能。SNSや名刺代わりに活用できる

使い方．操作説明・デモ動画

デモ動画はこちら

注力したポイント

アイデア面

• 学生エンジニアが抱える「ポートフォリオ更新の手間」を徹底的に削減するため、更新作業を全自動化する仕組みを考案。
• 「魅力度」「称号」「レベル」「活動指数」「スキルゲージ」といった独自指標を導入し、単なる経歴紹介ではなくゲーム感覚で自己を可視化できるよう設計。

デザイン面

• ポートフォリオの表示をゲームのプレイヤーカードをイメージしたカード形式に統一し、名刺としても活用可能なデザインを構想。
• デザイン・構造・指標の統合により、閲覧者が一目で学生エンジニアの能力や活動度を把握できる体験を提供。

その他

技術面でのこだわり

• 認証回りでは、ユーザーがログイン時にわざわざアカウントを作成する手間を省き、利便性を重視した設計を行った。
• GitHub APIへのリクエスト回数を削減する工夫を導入し、効率的かつ安定したデータ取得を実現。
• サーバーサイドにはGoを採用し、軽量かつ高速に動作する環境を構築。
• データベースはMYSQLとSQLiteに対応させ、低予算の環境でも簡単に運用できるよう設計。
• フルスタックのコンテナ化: Backend、Frontend、そしてリバースプロキシとしてのNginxまですべてをdocker-compose.ymlに集約した。
• 難しかった点としては、コンテナ化の手順や API 仕様の不明確さによる開発上の苦戦が挙げられるが、それらを乗り越えることで安定したプロダクトに仕上げた。

UI/UX面でのこだわり

• ゲーム風プロフィール・ユーザカードを再現したデザインを作成した。
• Figmaでデザインを作成し、Storybookでコンポーネント単位に管理して開発効率を向上した。
• モック（MSW)を作成し、バックエンド（API）未実装でもフロントエンド側で動作検証を実施した。
• スキル更新画面では、バックエンド処理中もユーザが退屈しないUXを工夫した。
• 難しかった点としては、Node.jsやReactなど初めて触る言語・フレームワークでの開発が挑戦だったが、乗り越えることでフロントエンドの安定性と操作性を向上させた。

将来の展望

• 名刺を自動生成し、PDFや画像でダウンロード可能にする機能
• QRコードの生成・ダウンロード機能を追加
• LINEやXなどへのリンク共有ボタンを導入
• SNSプロフィール欄にアイコン表示を追加
• 称号をAIによって自動生成する機能の実装

使用技術

• Node.js
• React
• Go
• GitHub API
• NGINX
• sqlite
• MySQL
• Docker