教材用アプリのタスクリスト

[version-1]

新しい教材では、クイズとセットにする。

この課題の流れ

1. アプリの全体の計画の立て方を知る（アプリのコンセプト、技術選定、実装機能の洗い出し及び実現可能調査）
2. 簡単な完成系のアプリを作る
   1. デザインカンプをもとにしたCSS でのコーディング
   2. JSの基本事項の確認(基礎文法、クラス、DOM (データ構造、簡単なアルゴリズム)）
   3. React を使った主要ページのコーディング
   4. 主要ページバックエンドの実装
   5. Contex API を使ってフロントの繋ぎこみ
   6. 目玉機能の作り込み
3. オリジナルアプリ作成

使用する技術

Frontend

技術	種別	備考
Next	Frontend
React	Frontend	Hooks API, Context API
CSS Module	Frontend
Prettier	Frontend	すでにセットアップしたものを提供？
Eslint	Frontend	すでにセットアップしたものを提供？
Axios	Frontend

Backend

技術	種別	備考
Node	Backend
MySQL	Backend
Docker	Backend
Linux, Bash, Shell	Backend

アプリの概要

目標から逆算する TODO アプリ

機能一覧

• TODOのCRUD
• ログイン・ログアウト
• カテゴリ・タグ機能
• プロフィール機能(アカウント機能)
• カレンダー機能(目玉機能)

TODO

1. アプリの作成
2. カンプの作成
3. ドキュメントの作成
4. クイズの作成
5. 投稿の作成

[version-1]

• 1. アプリの修正

  • レスポンシブ対応
  • プロフィール&設定ページ
  • プロジェクト作成・編集の繋ぎ込み
  • プロジェクト詳細ページでの更新処理・マイルストーン移管の変更
  • タスクのフィルタの繋ぎ込み
  • テストコード　(e2e & 単体テスト & レンダリングテスト) => バックエンドだけでも書きたい
  • ログイン周りの見直し
  • 404, 500 ページの作成
  • 未実装部分へのツールチップ追加
  • コンポーネント配置の最適化
  • 不要な css の削除
  • エラーハンドリングの見直し
  • Tanstack Query の導入？
  • ローダーの導入
  • ページネーションの確認

• 2. 教材作成

  • 1. HTML/CSS課題
  • 2. JS課題(基本文法 + DOM操作)
  • 3. React 入門課題 (React チュートリアル + シンプル TODO)
  • 4. React + Next.js 発展課題(Context API)
  • 5. React + HTTP通信課題(プロミス)
  • 6. TypeScript 課題
  • 7. データベース 課題
  • 8. Web API 作成課題

• 3. 全体的な部分

  • CI の設定
  • デプロイ
  • API ドキュメントの記載
  • データベースのドキュメントの記載
  • Figmaのデザイン
  • README の記載