About
わたしについて
Projects
作成したプロジェクト
Rankify Hubは、対戦ゲームなどのキャラクターのランキングやTierリストを作成し、共有できるアプリケーションです。
ユーザーページの機能
- ✓カテゴリーを選んでドラッグ＆ドロップ操作でTierを作成可能
- ✓ユーザーが作成したTierを共有可能
- ✓カテゴリーの検索機能
- ✓他ユーザーが作成したTierの検索機能
管理者ページの機能
- ✓認証機能
- ✓カテゴリーとアイテムの追加・変更・削除
技術スタックと構成
アーキテクチャ
このプロジェクトはフロントエンドとバックエンドを分離したマルチコンテナアプリケーションとして構成し、モノリポで管理しています。
バックエンド
Kotlin/Spring Bootで実装しており、ドメイン駆動設計の考え方に基づくオニオンアーキテクチャを採用することで保守性を高めています。
フロントエンド
TypeScriptとNext.js、React、Tailwind CSSで構築しており、ドラッグ&ドロップライブラリにはdnt kitを採用しています。
インフラストラクチャ
開発環境にDocker Compose、本番環境はHeroku（バックエンド・PostgreSQL）とVercel（フロントエンド）、AWS S3（オブジェクトストレージ）を採用。 GitHub Actionsによる自動テスト・デプロイのCI/CDパイプラインを構築し、開発効率と品質の両立を図っています。
今後の機能追加計画
- 他のユーザーが作成したTierリストへの「いいね」機能
- カテゴリーにサブカテゴリーの追加
- カテゴリー無しのフリースタイルTierの作成機能
- モバイル対応の改善
- Tierとカテゴリーの検索機能拡充
- i18n対応（英語が最優先）
Flowは、動画ファイルをタイムラインのサムネイル表示で視覚的に管理できるデスクトップアプリケーションです。 タグ管理、お気に入り機能を備え、再生回数やファイルサイズなどでのソート機能で大量の動画ファイルを効率的に整理・管理することができます。
主要機能
- ✓タイムライン形式でのサムネイル表示
- ✓ファイル＆フォルダでの動画インポート
- ✓クロスプラットフォーム対応
- ✓ライトモード、ダークモードの切り替え
管理機能
- ✓ファイル名による検索
- ✓お気に入り、タグによる動画管理
- ✓再生回数やファイルサイズなど多彩なソート機能
技術スタックと構成
フレームワーク
デスクトップアプリケーションフレームワークのElectronで、クロスプラットフォーム対応のアプリケーションを実現。 言語およびフレームワークはReactとTypeScript、Tailwind CSSを採用。
データ管理
FFmpegによる高速なサムネイル生成、electron-storeを使用した効率的なデータ管理を実装。 大量の動画ファイルでもスムーズな操作性を実現しています。
ビルドツール
esbuildによるビルドシステムを採用し、electron-builderで各プラットフォーム向けのビルドを行っています。 Git Tagを作成時にGitHub Actionsによる自動ビルドとリリースを実装しています。
今後の機能追加計画
- クラウドバックアップ連携
- キーボードショートカットのカスタマイズ
- 設定ファイルのカスタマイズ
Next Project
under development...
Skills
スキルセット
バックエンド
フロントエンド
データベース
インフラ/DevOps
アプリケーション
その他
Contact
お気軽にご連絡ください