🚀
エンジニアのためのポートフォリオアプリを作った話「DevProfile」
DevProfile
使い方
このように自分のリンクを各種SNSに貼り付けることで、自分のプロフィールを紹介することができます。
Next.jsとSupabaseを使用したスキル管理アプリの構築
この記事では、Next.jsとSupabaseを使用して、ユーザーが自分のスキルを管理できるプロフィール管理アプリケーションの構築方法について説明します。このアプリケーションでは、スキルの追加、編集、削除、並べ替えが可能で、ユーザー認証にはOAuthを利用します。
技術スタック
- Next.js: フロントエンドフレームワーク
- Supabase: バックエンドサービス（データベース、認証）
- @dnd-kit: ドラッグアンドドロップ機能
- Lucide-react: アイコンライブラリ
アプリケーションの概要
ユーザーはログイン後、自分のスキルセットをカード形式で管理できます。各スキルカードには、スキル名とアイコンが表示され、ドラッグアンドドロップで並べ替えることができます。また、スキルを追加するためのダイアログがあり、利用可能なスキルから選択して追加することができます。
コンポーネントの概要
- SortableSkill:
個々のスキルを表示するコンポーネントです。
スキルはドラッグアンドドロップで並べ替え可能で、削除ボタンが含まれています。 - SkillsSection:
ユーザーのスキルを一覧表示するセクションです。
DndContext と SortableContext を使用して、スキルのドラッグアンドドロップ機能を実装しています。 - SkillsDialog:
スキルを追加するためのダイアログです。
スキルを検索し、選択してプロフィールに追加することができます。 - ProfileSection:
ユーザーの基本情報を表示するセクションです。
プロフィール画像や基本情報の編集機能が含まれています。
まとめ
このアプリケーションは、Next.jsとSupabaseを使用して効率的に開発することができます。ユーザーは自分のスキルを視覚的に管理し、編集することができ、プロフィールページをカスタマイズすることが可能です。
Discussion