Yuta Asakura

個人ポートフォリオサイト

Vuello: Vue Typescript Trello Clone

レスポンシブなマルチページウェブアプリ

Personal Relations Manager (PRM)

Accomplishments / Portfolio

🗂️ Vuell：Vue TS Trelloクローン

これは、Vue.jsとTypeScriptで構築されたTrello風のタスク管理アプリです。ビルドツールとしてViteを使用し、Vercelで高速かつ信頼性の高いホスティングを行っています。このアプリでは、「To Do」「In Progress」「Done」などのカスタマイズ可能なリストにタスクを整理することができます。ドラッグ＆ドロップによる並べ替え、カスタムリストの色設定、ライト/ダークモードの切り替え、ファジー検索、ローカルストレージでのデータ永続化などの機能を活用し、ユーザーはタスクやリストを簡単に追加、編集、削除できます。これらの機能により、タスク管理が直感的で視覚的に魅力的になります。

GitHubリポジトリ: https://github.com/yutaasakura96/vue-ts-trello-clone
ライブデモ: Vuello：https://vue-ts-trello-clone.vercel.app/

✨ 機能
📌 ドラッグ＆ドロップ: vuedraggableによるドラッグ＆ドロップインターフェースでタスクとリストを再配置できます。
📝 リスト＆タスクの追加/編集/削除: モーダルインターフェースを通じて、リストとタスクを作成、編集、削除できます。
🔍 ファジー検索: Fuse.jsを使用したナビバーの検索バーでリストを動的にフィルタリングできます。
🎨 カラーコードされたリストとタスク: リストの色をカスタマイズし、タスクに優先度に基づく色分けを適用できます。
📅 期限日: タスクに期限日を追加・表示し、期限が近づくと色分けされた警告が表示されます。
🌗 ライト/ダークモード: ライトとダークのテーマを切り替えて、統一されたUI体験を提供します。
💾 ローカルストレージの永続化: すべてのデータがローカルに保存されるため、ユーザーは前回の続きから再開できます。
🔲 モーダル管理: タスクとリストの管理にはモーダルを使用し、最初の入力フィールドに自動的にフォーカスします。

🛠️ 使用技術
⚙️ Vue 3: 進歩的なJavaScriptフレームワーク。
💡 TypeScript: 型安全性と強化されたIDEサポートを提供。
⚡️ Vite: 高速で効率的なビルドツール。
🔄 vuedraggable: タスクとリストのドラッグ＆ドロップ機能を実現。
🎨 TailwindCSS: レスポンシブで効率的なスタイリングのためのユーティリティファーストのCSSフレームワーク。
📦 @vueuse/core: ライト/ダークモードの切り替えやモーダル内のフォーカストラップなどの機能を統合。
🔍 Fuse.js: VueUseライブラリのuseFuseと統合したファジー検索機能。
▲ Vercel: ライブデモの高速なデプロイとホスティングのためのプラットフォーム。

🏗️ 使い方

	1.	タスクリスト: アプリには事前定義されたリスト（To Do、In Progress、Done）が含まれており、カスタムリストとタスクを追加できます。
	2.	リスト＆タスクの追加/編集/削除: 「カードを追加」または「リストを追加」をクリックして新しいリストやタスクを作成するか、既存のものを選択して編集または削除できます。
	3.	ドラッグ＆ドロップ: タスクとリストをドラッグして再配置し、タスクの進行状況を簡単に追跡できます。
	4.	カスタムカラー設定: 視覚的な整理のために、各リストに色を割り当てることができます。
	5.	ダークモードの切り替え: NavbarComponentのライト/ダークモードの切り替えで、一貫したテーマ体験を提供します。
	6.	データの永続化: リストとタスクはローカルストレージに保存され、ページを更新してもデータが保持されます。
	7.	ファジー検索: NavbarComponentの検索バーを使用して、タイトルや内容に基づいてリストをフィルタリングできます。

Yuta Asakura

Yuta Asakura

フルスタックデベロッパー | JavaScript、Vue、React、RubyonRailsでシームレスなWebソリューションを開発

Ambition

キャリアブレイク2 months

フルスタック・ウェブ開発者

Accomplishments / Portfolio

言語