タスクマネージャーアプリを作る

投稿者：HIROKI CHIYODA

タスクマネージャーアプリの作成を複数回に分けて、動画で紹介します。

技術スタック

• Bun
• TypeScript
• hono
• Next.js
• Tailwind CSS
• shadcn/ui
• cloudflare D1
• drizzle

データテーブル

tasks table

動画

レスポンシブ対応ヘッダーを作る

ヘッダーには、アプリロゴと検索窓とユーザー登録ボタンとログインボタンを表示します。
また、レスポンシブに対応して、認証のボタンは2つのボタンとドロップダウンメニューで切り替えるようにします。
上記の動画でレスポンシブに対応したヘッダーを作成ができるようになります。

レスポンシブ対応サイドバーを作る

サイドバーには、ボタンを配置して、ボタンにはアイコンとタイトルを表示します。
また、レスポンシブに対応して、ボタンのタイトルの表示を切り替えるようにします。
最後に、ヘッダーとサイドバーを固定して、スクロールしても動かないようにします。
そうすることで、ナビゲーションや検索に素早くアクセスできるようになり、ユーザー体験の向上につながります。

Hono+drizzleを使って、APIのGETメソッドを作る

データベースを準備して、REST APIのGETリクエストを作成します。
データベースはCloudflareが提供しているD1を使って、honoとdrizzleを導入してAPIを作成します。
Honoは軽量で高速なWebフレームワークで、drizzleは、データベース向けに設計されたORMです。

shadcn/uiのCard Componentを使って、タスク詳細カードを作る

タスクマネージャーアプリのタスク詳細カードを作成します。
shadcn/uiのカードコンポーネントを導入して、タスク詳細カードを作成します。