practice-todo-nuxt

Nuxt3 を使用した学習用デモアプリ

要件

機能

• タスクの追加
• タスクの一覧表示
• タスクの完了チェック
• タスクの削除

技術スタック

• Nuxt.js
• TypeScript

このリポジトリではフロントエンドのソースコードのみ管理する

基本設計

タスク入力フォーム

ユーザーが新しいタスクを追加できるようにする。

タスク一覧表示

サーバーから取得したタスクの一覧を表示する。

タスク完了チェック

ユーザーがタスクを完了済みとしてチェックできるようにする。これにより、タスクの状態が更新される。

タスク削除ボタン

ユーザーがタスクを削除できるようにする。これにより、タスクがデータベースから削除される。

エラーメッセージ表示

API からのエラーメッセージを適切に表示する。

TODO

• linter 導入
• Prettier 導入
• tailwind 導入
• ヘッダ作成
• フッター作成
• 一覧画面実装
• 新規作成画面実装
• 詳細・編集画面実装
• モック API 実装
• ユニットテスト
  • 導入
  • 各コンポーネントのテスト
  • API モックしたテスト
  • composable に対するテスト
• Storybook 導入

Setup

Make sure to install the dependencies:

npm install

Development Server

Start the development server on http://localhost:3000

npm run dev

Production

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Check out the deployment documentation for more information.